UI / VISUAL DESIGN
___
Beeline (VicSuper)
Web portal
My role
VicSuper's Beeline tool had a complete revamp and so I jumped onboard to help bring the UI and visual design to life while complimenting the user experience.
Having recently been involved in the design of the new VicSuper mobile app, I gained a thorough understanding of VicSuper's branding and the first iteration of digital UI styles was created. These styles were used to develop further during the Beeline project.
The opportunity
Beeline is an online tool which helps users set simple financial goals and track progress against those goals. By providing users with helpful advice, Beeline shows what actions to take right now - to help achieve a more comfortable lifestyle when you’re no longer working.
Having recently been involved in the design of the new VicSuper mobile app, I gained a thorough understanding of VicSuper's branding and the first iteration of digital UI styles was created. Beeline's UI needed to align with these styles while continuing to develop the design system. With the complexity of the tool, a number of new UI components and screen layouts needed to be designed.
Tasks and deliverables
UI and visual design exploration, UI testing
Tools used
The dashboard
We looked at what others were doing in the dashboard UI space before anything and also thought about what we were wanting to achive on this screen.
Presenting summaries and information upfront on the dashboard and helping the user navigate intuitively through the product using key UI principles such as visual and type heirarchy, colour, contrast, proximity, grouping relevant info, less is more, show only what is needed at the right time.
Core high level principles we wanted to maintain across each page – to be attractive, easy to use, simple and understandable.
UI research into different ways to approach the visual design
The side menu
The side bar menu was more than just a navigational tool for Beeline, it served as a series of steps the user needed to move through which would assist with reaching their end financial and retirement goals.
A lighter UI was explored early on and nurmerous iterations along with UI research into this style of menu lead to the darker style.
Visually tracking progress
The goal was for users to immediately see their status towards reaching their retirement goals and to then to understand what steps to take if action is required.
Iconography exploration
We looked at a few different styles to see which would be the most appropriate for Beeline.
The initial thought was to introduce more colourful and fun icons to spice up the visual language, but we decided to opt for a more minimal approach to help support the user experience. It also made sense to closer align with other VicSuper products such as the mobile app.
Testing icons
I conducted some quick testing to see how people reacted to icons and to find out if they met expectations.
Objective was to test to find out if users understood the icon meaning without supportive text and also to make sure that the icon was relvant to the supporting text.
Icons in context
We wanted to treat icons a little different depending on context. Icons without a fill were used in the content areas and icons that sit in the main navigation menu are differenciated by having a fill and work better visually on a dark background.
Visually conveying information
A key principle we wanted to keep in mind was 'use graphic charts and graphs where possible to help clearly communicate data'.
Testing the new coach identity
After learning from users that the exisiting coach image was outdated and not well recieved at all, we explored some variations to test.
We put four different coach images infront of users and asked them four questions. We wanted to find out how important in general the coach was in helping guide users, their emotional connection to the coach, how trustworthy they felt the coach was and any other images they would prefer to see.
The new coach avatar and messaging
The prefered coach was the female avatar so we sourced a suitable vector chatacter that I could tweek in Adobe Illustrator as we needed for different situations and context.
The coach was an important feature to help guide users through the Beeline tool with as much ease as possible. So, it was important for us to explore ways to visually represent the coach and it’s messaging throughout the Beeline tool in a consistent and engaging way.
Summary & next steps
This screen was one of the most important in the users journey and so the UI had to be carefully considered to communicate the goals ie. allow users to understand their contributions summary, what's completed and next steps to take. There was some complexity on this screen where we needed to include a UI component showing dynamic fields with conditional logic. We needed to ensure this screen overall needed to be unclutted, intuitive and easy to understand. A number of sketches and exploratory mockups were worked up before arriving at the final UI solution.
Onboarding - helping users get started
The goal was to create an intuitive and engaging introduction to the Beeline journey. To help users understand the product and guide them through the intial steps in choosing their goals.
We wanted to try something a bit different visually to steer away from the standard rotating carousel.
The client liked, it but but in the end thought it was a bit too far from convention. So we reverted back to a standard UI pattern for this screen.
Style tile - putting the UI components together
Building apon the component styles from the VicSuper app project,
this project had a need for more components with more complexity, so there was a bit of work to bring it together in a cohesive manner.
The goal was to work towards an 'atomic design' approach to help achieve higher efficiency, consistency and scalability - keeping design up to date - reusing components.
The components for this project were a step towards creating VicSuper's digital design system. The next steps which we had started to slowly do in downtime, was to to create a components library within Sketch.
Also needed was to look at the all the current styles accross all products eg the public facing website, the mobile app and Beeline, then bring them all into alignment.
I’d love to chat about how I can help you. Say hi over email.
Contact me
© Jeremy Laycock