Hopeful Inc.

"Michael was extremely professional, communicative, and delivered well above our expectations and on time."
Alex Jivov
CEO, Hopeful Inc.

Project Overview

In mid-2019 the team at Hopeful Inc. approached me to reimagine the design of their web application, which is currently being developed, and the overall design language of their product. This dashboard mock-up is the first step in achieving this goal and is currently being developed by the engineering team at Hopeful. Their logo was also redesigned as part of this project. This new design is to form the basis of Hopeful’s design aesthetic as they move forward in developing their app and growing the company.

Role

UI Designer

Visual Designer

Tools

Adobe XD

Zeplin

Before Redesign

Below is the original design of the Hopeful Inc. dashboard. Though generally functional, this first iteration was clearly leaving something to be desired in terms of colours, font, and overall layout. The space on the screen was not being used efficiently, as evidenced by large blank areas, and key information was not being given a sufficient level of prominence on the screen. Further, the data being displayed in graphs and text was difficult to assess due to improper usage of fonts and colour. Overall, the design was decidedly outdated in appearance and in desperate need of a refresh.

After Redesign

Below is the refreshed and redesigned version of the dashboard with new colours, fonts, iconography, layout, and a redesigned logo. The elements of this new design now provide the foundation of the design aesthetic for the Hopeful app moving forward.

 

Unlike the original, this new interface gives the user a sense of openness by providing breathing room and white space to the elements on the page. It no longer feels claustrophobic and invites users to spend some time to review the information that is most important to them.

UI Design

Typeface, Colours, and Icons

The chosen typeface for the new Hopeful design aesthetic is ‘Muli’ and the fonts used range from 16pt to 48pt with a range of weights depending on use. Muli is a great font for this application because it is legible, modern, and works well for both headers and body text.

 

The colours are bright and are reminiscent of the sky and sun. They are meant, rather appropriately, to evoke a feeling of hopefulness.

 

The icons used on the dashboard were obtained from Google Material Design but given new colours to work with this particular design.

Logo Design

The Old Logo

As with the original app design, the old Hopeful logo needed some reworking. Below is the original logo the team was using before redesign.

Design Process and Concepts

For the new logo, the blue and yellow colour scheme needed to be maintained as per request from the team. However, I wanted to create something that could properly scale for use on the new dashboard. Therefore breaking the ‘Hopeful’ text out of the logo itself seemed to be the best option. Below are a few concepts that were designed before settling on a final version.

 

The New Logo

The refreshed logo retains the company’s colour scheme while bringing a fresh and modern feel. The interlinked circles represent collaboration while the ‘Hopeful’ text is bold and powerful.

 

Outcome and Next Steps

The design scheme, dashboard refresh, and new logo was delivered to the Hopeful team in July 2019 and was received with great enthusiasm. The company is now using this design as they move forward in their product development cycle. I am continuing to work with Hopeful Inc. as a UI/UX Consultant to advise them on the aesthetic and overall design of their app and website going forward. A live version of the Hopeful app should be launching within the next couple of months.