Project description
My team and I used a combination of tools to gather user insights, leveraging Typeform for surveys and Hotjar for heatmaps and behavior tracking on competitor products. Here’s what we uncovered:
1. Overwhelming customization options
Users often felt paralyzed when confronted with too many customization choices. Beginners especially wanted a quick way to build their landing pages without being bogged down by unnecessary details.
Remedy: Simplify the design process by introducing template-based customization. This approach enables users to focus on minor adjustments, such as colors, fonts, and images, rather than being overwhelmed by an abundance of customization options.
2. Lack of design skills
Many users reported feeling insecure about their design abilities, leading to dissatisfaction with the final look of their landing pages. They wanted their pages to look polished without requiring them to be design experts.
Remedy: Provide a selection of pre-designed, highly customizable templates as a starting point to reduce complexity.
"I always feel stuck because I’m not a designer. My pages end up looking messy, and it’s frustrating. I just want an easy way to create something that looks polished without spending hours figuring out the design details."
User goals and journey
I mapped out the user journey, aiming to create a straightforward flow from start to finish. This included reducing the number of steps from selecting a template to publishing the page and ensuring that the most commonly used actions were prioritized.
User Flow
I mapped a straightforward user journey, ensuring that the process from selecting a template to publishing a page required minimal steps.
Layout planning
My basic wireframes focused on organizing the layout and prioritizing key interactions. The wireframes were tested with internal stakeholders and a small group of users, helping to validate the general flow before moving forward.
Feedback and Iteration
Early feedback indicated that the initial layout could be confusing, particularly the placement of customization tools.
Users wanted a more straightforward method to access commonly used actions. I refined the wireframes, consolidating customization options like changing font and colors into a single, accessible section.
Challenges
Some users wanted more control over font and color choices, but we feared that increasing customization would again overwhelm novice users.
Solution
I introduced preset style options that allowed users to switch between predefined fonts and color schemes with a single click, offering more control without complicating the process.
UI & visual design
With the prototype validated, I focused on finalizing the visual design
Design System
I adhered to Rebel’s existing design system which I previously created to ensure consistency across components such as buttons, fonts, and colors. This helped streamline the process and ensured brand alignment.
Visually, the design was focused on being modern yet approachable. We offered a range of template styles, from minimalist to bold, with customization options that allowed users to adjust typography, color schemes, and logos.
Collaboration
I worked closely with the developers to ensure the design was implemented as intended, particularly focusing on performance optimization for mobile devices. Through regular check-ins, we resolved technical issues early, ensuring all functionality worked smoothly across devices.
Lessons learned
The challenges encountered, such as balancing customization with usability and ensuring smooth collaboration with developers, were overcome through compromise and iteration, ultimately leading to a user-friendly and effective feature.