Project Overview

Dreamline AI was born from a vision to revolutionize the way capital is deployed for energy-efficient and clean energy projects. In a world increasingly aware of the urgent need for sustainable solutions, our founders recognized the barriers that often hinder the swift deployment of resources where they are most needed. Thus, Dreamline AI was established with a mission to streamline these processes, making it easier and faster to fund and manage impactful energy initiatives. 

TimeLine

4 weeks

My Role

UI Designer

Tool

Figma, jira, protopie

About the Project

I was tasked with revamping the signup flow to enhance user experience and improve conversion rates. The project aimed to create a seamless and intuitive process for new users to register, while maintaining the brand’s visual identity and ensuring accessibility across devices. 

Challenge

Confused Navigation: 

One of the major challenges was the existing flow’s complex navigation, which left users unsure of where they were in the process. This caused high drop-off rates and user frustration. We addressed this by introducing a clear, step-by-step progression with visual cues, allowing users to track their progress and understand what information was needed at each stage.

Lack of Visual Hierarchy:

 The previous design lacked  visual hierarchy, making it difficult for users to distinguish between primary and secondary actions. We resolved this by implementing a more structured layout, emphasizing key actions with contrasting buttons, larger fonts, and prominent spacing, ensuring that the most important elements stood out clearly.

Inconsistent Brand Identity: 

Dreamline’s previous signup flow suffered from inconsistent branding, with mismatched colors, fonts, and design elements that didn’t reflect the company’s identity. To resolve this, I standardized the visual design, ensuring that colors, typography, and button styles were consistent across the entire flow, strengthening brand recognition and trust.

Before Redesign

Design Challenge

How might we simplify the signup process to minimize users dropoff.

The previous process was not easy to complex causing users frustration and abandonment.

How might we Ensure Users Always Know Where They Are in the Signup Process? 

Confusion about the current stage in the signup flow was a pain point. To address this, we designed a clear step-by-step progression with a progress bar, ensuring users could see their position in the flow and what they still needed to complete. This improved navigation and helped users feel more in control.

How might we Create a Visually Hierarchical Flow to Guide Users Smoothly?

 Visual hierarchy was lacking, leading to confusion between primary and secondary actions. We asked how we might guide users through the flow with a clear hierarchy that emphasized primary actions, By using typography, color contrast, and button styles strategically, we ensured the key actions stood out.

How might we Build Trust by Maintaining a Consistent and Recognizable Brand Identity? 

A consistent brand identity is crucial for building user trust, especially during signups. The question here was how to create a signup flow that felt cohesive with Dreamline’s overall brand, ensuring that users felt secure and familiar with the environment. Through consistent use of color schemes, fonts, and design language that aligned with Dreamline’s core branding, we strengthened trust and familiarity, creating a seamless experience.

Design Solution

Streamlined Process with Minimal Friction

The new signup process was designed to be simple and intuitive. By eliminating unnecessary steps, we reduced the friction for users, allowing them to complete registration quickly:

• Pre-filled fields and social login options minimized manual input and made signing up faster.

• Real-time validation ensured users received immediate feedback, preventing errors before submission.

• Clear, inline tooltips provided guidance where needed, making the process more user-friendly.

We ensure a clean and intuitive interphase

• Progress Indicators:

A progress bar was introduced at the top of the form to give users a sense of direction and control. This simple visual cue helped users understand how many steps remained. 

• Primary and Secondary Actions: 

• The primary action buttons (such as “Next” or “Submit”) were visually prominent using strong contrast and larger button sizes, while secondary actions (like “Go Back” or “Cancel”) were smaller and less visually dominant. This ensured users focused on the essential tasks.

• Consistent Feedback: 

• Upon completion of each step, users received immediate feedback, either through a success message or form validation error. This helped reduce any uncertainty or hesitation during the process.

The Outcome

The new signup flow design for Dreamline received overwhelmingly positive feedback from the stakeholders. They were particularly impressed by how the design directly addressed key pain points, offering a smooth and seamless experience while maintaining Dreamline’s unique brand identity.

1. Clear Impact on User Experience:
The redesigned signup flow significantly improved usability by simplifying the process, reducing friction, and offering a more intuitive interface. During user testing, participants found the new flow much easier to navigate compared to the previous version. The progress bar and clear visual hierarchy were especially appreciated, helping users stay oriented and confident throughout the process. Early data from testing indicated a notable reduction in user drop-off rates, a testament to the success of the simplified, guided flow.

2. Brand Alignment:
Stakeholders were highly impressed by the consistent use of Dreamline’s brand elements across the signup flow. By integrating the company’s colors, fonts, and style in a modern, minimalistic layout, the design not only reflected the company’s identity but also strengthened users’ trust in the platform. The friendly, approachable tone in error messages and form guidance further reinforced Dreamline’s customer-centric approach, aligning perfectly with the brand's values.

3. Users Testing:
The design underwent rigorous testing phases, including A/B testing with Dreamline’s existing user base. The tests revealed substantial improvements in form completion rates, particularly due to the streamlined input fields and real-time validation features. Additionally, error prevention mechanisms were shown to significantly reduce the time spent correcting mistakes, leading to a smoother and more satisfying user experience

4. Stakeholder Approval for Development:
Following testing and validation, the stakeholders were confident in the design’s ability to meet both user and business objectives. they praised the attention to detail, noting how every decision—from visual hierarchy to error handling—was made with the user in mind. 

This approach reassured them that the new signup flow would drive better engagement and higher conversion rates, especially for  first-time visitors. As a result, the design was swiftly approved for development, signaling the start of the implementation phase.

The positive feedback and testing results made it clear that the redesign would have a measurable impact on Dreamline’s user acquisition strategy, positioning the platform for future growth and success.

My Design approach

 The Double Diamond Design Process was the ideal approach for redesigning Dreamline's signup flow because it promotes a structured, user-centered method that ensures a comprehensive understanding of user needs and problem-solving. this method helped create a balanced, thoughtful design solution by combining divergent and convergent thinking in a way that aligned perfectly with the goals of the project. 

Below are the designed steps i followed to solving this problem consist of three phases below:

Discover 

In the discovery phase, the goal was to gather as much information as possible about the existing signup flow, user pain points, and Dreamline’s business requirements. 

• User Research:
  We began by conducting extensive user research through surveys, and usability testing on the existing signup flow. The aim was to identify key frustrations and obstacles users faced during the signup process. Feedback revealed issues such as confusing navigation and inconsistent brand experience.

• Stakeholder Interviews:
  To align with business goals, we conducted interviews with Dreamline’s stakeholders. this helped us understand their objectives mainly, increasing user signups, reducing abandonment rates, and strengthening brand recognition.

• Competitive Analysis:
  We analyzed competitor platforms to gather insights into industry best practices and trends in signup flow designs. this allowed us to understand how Dreamline's flow compared and identify opportunities for improvement.

Define – Defining the Problem

In this phase, the insights gathered during the discovery phase were synthesized into a clear problem definition. This helped narrow down the focus and establish specific design goals.

This phase allowed me to clearly articulate the primary challenges and opportunities for improvement. By narrowing the scope to focus on key issues such as:

 simplifying navigation, enhancing visual hierarchy, and ensuring brand consistency, I was able to create a strong foundation for the design solution. 

This include:

• Problem framing

• Users persona

• Journey Mapping

Design & iterate

This phase involved brainstorming, prototyping, and iterative testing to develop and refine the ideal design for Dreamline’s signup flow.

 Brainstorming:

During the ideation phase i brainstorm using the mindmapping approach togather with scamper approach.

 Several potential design solutions were generated, considering this approaches to the signup flow. These ideas ranged from simplifying the user input process to enhancing mobile optimization and introducing visual cues for better navigation.

Wireframing:

 Low-fidelity wireframes were created to quickly visualize the structure and layout of the new signup flow. These wireframes focused on improving user navigation, introducing a step-by-step signup process, and emphasizing important actions with clear visual hierarchy.

Prototyping:

 High-fidelity prototypes were built to bring the design to life. These interactive prototypes allowed stakeholders and users to experience the new flow in action, providing valuable feedback before moving into development.

Usability Testing:

 The prototypes were tested with real users in iterative cycles. Each round of testing provided insights into what worked well and what needed improvement. For example, testing revealed that users responded positively to the progress bar but needed clearer error messaging, leading to further refinements.

The redesigned Dreamline signup flow was carefully structured to provide users with a smooth, intuitive, and hassle-free experience from start to finish. 

This user-centered flow aimed to reduce cognitive load, and enhance overall engagement while ensuring that each step felt natural and easy to complete. 

Style Guide

To ensure consistency, clarity, and a seamless user experience across the redesigned signup flow for Dreamline, i developed comprehensive style guide.

This guide was essential in maintaining visual coherence and brand identity throughout the interface, making the user experience intuitive and aesthetically pleasing. The style guide provided clear guidelines on the use of typography, color, icons, spacing, and interactive elements, ensuring that all components of the signup flow were aligned with Dreamline’s brand values and user-centered design principles. 

Key Takeaway