Dreamline AI Dashboard
An intuitive web app that streamlines the journey from property assessment to booking clean energy upgrades, all in one place.
About Dreamline AI
Sign in flow designed in collaboration with Pretty Zorma
Dreamline AI is a tech startup focused on making sustainable energy upgrades accessible to property owners.
By simplifying complex processes like assessments, incentive matching, and project booking, Dreamline AI empowers users to make eco-friendly choices with ease.
How can we streamline the distribution of clean energy funding and quickly get our clients starting energy efficiency projects?
How might we take a client from sign-up to booking a clean energy project, all in the same portal?
The Problem
The Product
Designed a responsive web app that allows users to:
book a property assessment,
receive the corresponding report,
get matched with tailored incentives,
and book clean energy upgrade projects with a contractor.
The Process
Define
Visual Concepting
Design Execution
Design Consistency
Task Flow
The project required a streamlined approach to handle complex user journeys across various personas—property owners, contractors, and incentive providers. The founder needed a prototype that simplified the process of a property owner booking a sustainable energy project without getting caught up in minor details.
I created a high-level task flow that broke down the journey into six key steps:
Sign up
Schedule an assessment
Answer eligibility questions
Review the assessment report
Apply for matched incentives
Book a project
This high-level flow provided the foundation for developing the MVP. It ensured that the core user journey was clear and actionable, allowing the team to focus on implementing the most critical features first.
User Flow
With the overarching task flow established, we needed to define the individual screens for a phased rollout. Backend development limitations meant we couldn’t build everything at once, so we had to prioritize which screens to release first.
I mapped out a detailed user flow that aligned with the task flow, guiding users through each step: signing up, scheduling an assessment, answering eligibility questions, reviewing the report, applying for incentives, and booking a project. The flow was designed to support a logical progression, even with the constraints of the phased rollout.
The user flow helped the team focus on the key interactions for the initial launch, ensuring that users would have a clear and cohesive experience despite development constraints.
Sketches
The project had multiple complex processes that needed to be broken down into digestible parts. The risk of overwhelming both the users and the design process was significant.
I broke the flow into three manageable sections:
Scheduling a property assessment and receiving the report.
Browsing, selecting, and applying for incentives.
Booking a project with a contractor.
Flow 1: Resident Scheduling Property Assessment
Dividing the flow into distinct stages made it easier to prototype and hand off to development. It clarified the user journey for the team and allowed for more focused design work on each part of the process.
Flow 1: Scheduling a Property Assessment
To bring clarity to the design process and establish a visual structure, I began creating wireframes. The initial focus was on desktop layouts since the platform's primary users were expected to interact with the dashboard on larger screens, particularly for tasks like scheduling assessments and reviewing detailed reports.
Through the process of creating wireframes it became clear that the project lacked consistency, with various colors and styles creating a disjointed experience. Additionally, the team's desktop-first approach led to bulky, sprawling designs that weren’t efficient.
Mood Board
There was no established brand identity, which made it difficult to create cohesive visuals that resonated with the target audience—property owners, many of whom were older and unfamiliar with complex interfaces.
I created a mood board to establish a simple, friendly, and modern visual direction. The design needed to be accessible to all users, so I emphasized rounded corners, inviting illustrations, and approachable text.
The mood board provided clear visual guidance and ensured that the design direction aligned with the founder’s vision. It also set the tone for the project’s overall brand identity, which balanced modernity with accessibility.
Flow 2: Applying for Incentives
I explained to the founder my decision to switch to a mobile-first approach, highlighting that it would allow us to concentrate on essential page actions and ensure accessibility. This focus on functionality would help us develop an MVP faster.
The founder agreed with this approach and stressed the need to clearly guide users through the incentive application process. Since contractors would only commit to projects once the costs were guaranteed covered, it was crucial to address this requirement in our design.
I designed a process that guided users to browse, select, and apply for relevant incentives based on their property assessment. This ensured users wouldn’t book projects with contractors until funding was confirmed. The approach aligned with business goals and provided a smooth user experience, minimizing the risk of dead ends or premature bookings.
Flow 3: Booking a Project
The project booking flow needed to be clear and intuitive, ensuring users could smoothly transition from applying for incentives to booking projects.
I drew inspiration from Material Design 3 to create mid-fidelity booking cards that were visually engaging and easy to navigate. The design emphasized simplicity, with clear calls to action, helping users move efficiently through the process.
By applying and adapting Material Design principles to fit the brand’s unique needs, I created a design that was functional yet distinctive. This iteration effectively balanced aesthetics and usability, setting a strong foundation for further refinement in the high-fidelity version.
Style Guide
The project faced challenges with visual consistency, and without a style guide, future iterations risked deviating from the brand identity. I developed a style guide that standardized design elements, including colors, illustrations and icons. This guide ensured that the design would remain cohesive across all screens and provided a reference for future updates.
Dodger Blue
I updated the logo from teal to Dodger Blue (Primary 500) to improve accessibility. This shade maintains the brand's versatility and professionalism while evoking clear skies, aligning with the "dreamy" name.
For buttons, I used a slightly darker hue (Primary 600) to ensure accessibility with light text, as Dodger Blue meets AA standards only with white text is bolded.
Yellow Accent
I chose a golden yellow as a secondary color and for use in illustrations. It provides striking contrast and evokes the energy of the sun.
Green Sparingly
Initially, I considered green as the primary color to represent the green energy mission. However, the owner preferred a more professional look that reflects tech and Ai.
In response I limited green to illustrations, more subtly conveying the clean energy purpose.
Illustrations & Icons
Dreamline AI had a limited budget, requiring fair use icons & illustrations. Additionally, developers requested content that didn’t require accreditation to reduce page load.
I took the time to source appropriate icons and illustrations that complemented the friendly Poppins typeface.
Final Design
Learnings
Through this project, I learned the value of prioritizing key tasks and avoiding overcomplication. The switch to a mobile-first approach was crucial in improving the user experience, and refining the brand identity & developing a style guide helped maintain consistency across the board.
Next Steps
The team planned to move forward with user testing to refine the design based on feedback. Although my contract ended before I could participate in this phase, it will be crucial for validating the design and making any necessary usability improvements.
