UI / INTERACTON DESIGN
___
VicSuper
Mobile app
My role
Working in a small Agile team on the native VS app from early stages to first MVP release.
I was responsible for the UX/UI and interaction design throughout the project in collaboration with the UX manager and other team members. I helped design a product sympathetic to the users needs by following a human-centred design approach as much as possible while also balancing technical limitations and business driven objectives.
The challenge
Without a mobile app, VicSuper had some urgent catching up to do to compete with their competitors.
The primary user group being the digitally savvy generation 18-35 year olds and they needed to be able to pick up their smarphone and engage with their Super, as the desktop failed to do so. Keeping track of their Super with relevant infomation that was easier to access and understand was the core goal.
Tasks and deliverables
- Task flows
- Sitemaps
- Schema diagrams
- Low fidelity wire frames
- Interactive prototype
- Usability testing
- High fidelty UI mockups
- UI and interaction design specifications.
Tools used
HCD approach
Using a Human Centred Design approach is always priority, but can be challenging to adopt fully in companies that are only just beginning to embrace user experience.
To help us through the design process we continually used these five approaches.
UI research/ competitor analysis
We looked at competitors features, user/ interaction flows, UI and visual styles to see what others in the superannuation space were doing. We wanted to leverage good design patterns and learn from the bad stuff to help us create a great experience for the app.
Schema diagram/ wireframes
Low fidelity wire frames (phase 1 MVP) showing the holistic flow and view at the beginning of the project. As the project progressed, more scenarios and wireframed were created, and I lalso looked at flows for notifications to put in the backlog for phase two.
Sitemap and IA
Creating a sitemap was important so we could make sure that the information architecture made sense. It also helped the team easily keep track of and identify what screens were missing / needed to be completed.
Test, learn and iterate
Quick ideation and problem solving
Quick ideas through sketching were cruitial for some of the more complex screens and interactions before jumping into higher fidelity wires. Collaborating with the UX manager and other members of the team was important so we could move quickly through the process.
InVision low - high fidelity prototype
A high fidelity prototype in InVision was also created to showcase designs to the team and to help demonstrate to developers the flow and interaction design.
Usability testing
I tested the prototype with 6 people to validate assumptions, identifying usability issues and areas of improvement.
I also measured users attitude towards the whole experience of the app so we had a baseline to measure against for future testing. I used Visual Analogue Scale and out of the total users tested the average score was quite high at 7.15 out of 10.
Validating the 'quick balance' feature
Accessing the members account balance was a key task so we looked at making it viewable without logging in.
Looking at well known financial institutions and how they approached it, we explored ideas on how we should visually display this.
Mixed views came out of the usability testing regarding quick balance but we didn’t have sufficient data to make a definitive decision. As the top financial institutions were using this feature we decided to build it quickly and would look at user feedback down the track to measure the value for VicSuper customers.
The visual language
Defining the style had some challenges. We had to think about the big picture, for example
the broarder VicSuper digital brand as it was slowly evolving and not yet defined. Other projects were already in progress so we had to think about alignment and consistency along the way.
Defining the visual language
Using an inception diagram helped us define the visual language and it also helped the business understand our thoughts for the visual design direction.
Iconography
After determining the overall visual language, we followed a minimalist approach and having a slightly softer rounded feel with no fill.
UI coherence via a UI style tile
I created a tyle tile to help visualise all the elements in the app together and make sure we had a unified and cosnistent look and feel.
One example - to maintain a consistent feel across the whole app we softened sharp corners and edges of components and elements.
The extra details
I looked at where we could add touches of delight. Little details such as animations and subtle, fluid transitions between screens were important to help enhance the whole experience of the app
Exploring the 'account' screen
Before finalising the UI mockups for development, it was important to focus on some of the key user tasks and explore UI alternatives along with 'hallway' guerrilla testing before handing over to the engineering team.
Account screen – As this was the fist screen the user arrived on to get a snapshot of their accounts and balance, we spent a bit of time exploring design ideas eg how we show and visually treat the account info.
After lots of mockups and quick testing, we narrowed it down to a lighter treatment for the account view and treated it as a card tile rather then a more flat design approach. This card design had better affordance and felt like something the member would be more inclined to click on to take them into the selected account.
Final UI mockups
Shown here are four key screens mocked up for the phase 1 MVP release.
Working in parallel with devs
Working in parallel with the developers was critical in helping maintain the integrity and consistancy of the design.
I made sure I was available to sit down with the front end developers as often as possible to work through UI defects, help understand interaction design and tidy up the UI styling.
I’d love to chat about how I can help you. Say hi over email.
Contact me
© Jeremy Laycock