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.
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.
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.
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.
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