The main purpose of this project was to rebrand the company's brand guide and redesign the homepage in order to address issues of inconsistent design, align the website's design with the company's brand tone. Especially we focus on making the website more accessible to our target audience(45+).
Based on internal interviews and stakeholder feedback, we identified the priorities for each team and department. To effectively prioritize these needs, we mapped out the key components and features required for the project. I then conducted a thorough analysis and identified the need to rebuild our brand and website. Here are the key solutions we implemented to achieve this:
Typography: We prioritized typography to create a consistent and appealing visual identity across our website and branding materials.
Shape: We redesigned our website and branding elements with consistent shapes to reinforce our brand identity and improve user experience.
Data Visualization: We focused on improving our data visualization capabilities to present complex information in a clear and concise manner, enhancing the user experience.
The previous typography (Adobe Garamond Pro for headings and Work Sans for body) had issues
Issues with low x-height and spacing
Conflicting font combination
Difficulty in creating visual hierarchy
Challenging for users to scan the information
To solve these issues, the font was changed to Noto Serif JP (headings) and Inter (body).
Reflects brand's serious, established, and modern voice
Offers various weights for easy visual hierarchy creation
Shorter descenders for better readability
Numbers in Noto Serif JP sit on the baseline, enhancing legibility and making the text easier to scan
To establish Versapay's identity, we limited the overused leaf shape to CTA and metric banners, fixing its roundness for Web (80, 0, 80, 0) and Mobile (40, 0, 40, 0).
We defined other shapes, such as the quarter/checkmark, for specific features to prevent overuse.
The quarter represents finance teams running on quarters, anchoring shape, unexpected, blooming, and forward.
The checkmark represents order, completion, and optimism.
The previous data visualization was hard to read and had no icons or visuals for metrics.
After 2 iterations, three solutions were implemented:
Pie charts can be misleading when trying to visualize metrics, which can cause confusion for users. A 25% increase might appear small compared to the average, leading to misinterpretation of the data
Simple arrow - a more direct visual to understand, with icon/no-icon variations.
Bar chart design - straightforward and easy to compare to industry average/competitors, with no confusion for users.
Area chart design - easy to compare and more visible, with limited usage
Simple arrow
Bar chart design
Area chart design
To ensure consistency and reduce confusion in our design process, I established a design system and library. However, we encountered challenges with maintaining visual consistency in icons, colors, and typography. Here's what I did to resolve the issue:
Centralized these design elements in one file and worked with other designers to ensure they were in sync.
Streamlined the design process, resulting in a 40% reduction in design time.
Collaborated with the development team to establish this approach as an integral part of our design process.
There is no end. It will be on going to find a better and more efficient for users.
Not only rebranding but also redesigning website that align with our new voice and brand guide, I get to face with unexpected situations and struggles.