Dreamline AI Website
Dreamline AI brings together property owners, incentive providers, and contractors to rapidly deploy and manage clean energy projects.
The Problem:
Dreamline AI's live site was text-heavy and unformatted. With an upcoming marketing campaign, it was crucial to have a polished site to attract new users.
I redesigned the site by updating colors to meet accessibility standards, restructuring text into easy-to-read sections, and sourcing budget-friendly icons and illustrations.
The Product:
The Design Thinking Process
Adapted from the Nielson Norman group
Understand
Empathize
Define
Explore
Ideate
Prototype
Materialize
Test
Implement
Site Audit
Before diving into the design, I conducted a thorough site audit to understand what was working and what needed improvement from a usability perspective.
Navigation
Redundant Elements:
The pill slider at the top of the page was redundant, as the page titles were already displayed in the navigation header.
Main Page Issues:
There was no landing page, instead directing users immediately to property owner information.
Navigation Clarity:
There was no indication of the current page, as all headers remained bolded regardless of the user's location on the site.
Accessibility
Color Contrast:
Some titles were in peach-colored text on a white background, failing to meet WCAG accessibility standards.
Text Hierarchy:
Pages lacked clear titles and had random bolded text, creating hierarchy issues.
Consistency
Color Scheme:
While the dark blue had a professional look, it clashed with the teal logo.
Design Elements:
There were inconsistencies with different shades of blue and various illustration styles. The site needed a cohesive style guide.
Competitor Analysis
To inform the design of Dreamline AI, I took a look at Eli, a company with a similar scope. The following screenshots from their site were particularly influential in shaping my approach.
Clean & Simple Design
Eli's use of black text on a white background creates a clean and simple design that enhances readability and user experience.
This inspired me to prioritize clarity and simplicity in the layout of Dreamline AI’s site.
Hero Images & Rounded Corners
The use of hero images and components with rounded corners adds a modern and visually appealing touch.
I adopted this approach to give our site a contemporary look while maintaining visual interest.
Strategic Use of Icons and Color
Eli's strategic use of icons, incorporating color only when necessary, was both functional and aesthetically pleasing.
This inspired me to integrate icons thoughtfully, using color to highlight key elements.
Sitemap
With a large volume of content to manage, I knew editing it all down would slow us down. Instead, I streamlined the site's structure by reducing the scope of the pages for the initial launch.
To communicate this plan to stakeholders, I created a straightforward sitemap using Miro. This approach ensured everyone was on the same page and helped us move forward efficiently.
Low-Fidelity Wireframes
With a clear understanding of the existing issues, a defined vision, and a streamlined scope, I proceeded to wireframing. These wireframes served as the blueprint for the project, providing a solid foundation for the visual design and development stages.
Careers Page Before
Careers Page After
Style Guide
With the wireframes in place, it was time to align the colors with the branding and meet accessibility standards. Dreamline AI gave me considerable freedom to update the colors, leading to the following choices:
Dodger Blue
I updated the logo from teal to Dodger Blue (Primary 500). 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
As a nonprofit, 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.
Mid-Fidelity Wireframes
Given the tight deadline, I expedited the process by sending these mid-fidelity wireframes to the development team, allowing them to start building the layout immediately. Due to the rush, I initially chose a light blue background for the cards and footer, even though it wasn’t the best choice. This highlights the iterative nature of design, real-world time constraints, and my ability to refine the design based on feedback.
Feedback & Refinement
After sending the initial version to the development team, I received valuable feedback from the owner and my supervisor. I incorporated these changes and provided detailed annotations on every screen for the development team, ensuring no crucial updates were missed.
Enhancing Visual Contrast
Changing the background to a light grey facilitated a minimalist design approach, allowing elements like the navigation bar, cards, and footer to pop on a clean, white background. These changes enhanced readability and highlighted key content without overwhelming the overall aesthetic, contributing to both improved visual appeal and a cohesive, user-friendly design.
Streamlining Navigation for Initial Launch
At this point, I communicated my approved plan to streamline the initial launch pages to the development team. This involved updating the navigation bar and footer to hide links to future pages as well as hiding certain buttons. This adjustment aimed to improve user focus on essential content and enhance navigation clarity during the site's initial rollout.
High-Fidelity Wireframes
Next Steps
Build out the remaining pages:
Continue developing and refining the site by completing the remaining pages according to the streamlined plan.
Develop the dashboard:
Focus on creating a functional dashboard to be able to more quickly replace the pre-register button.
Key Learnings
Throughout this project, I gained valuable insights into collaborative design processes, working closely with developers, the owner, and my supervisor. This experience underscored the importance of effective communication and alignment with stakeholders to achieve project goals.
