Walley Bank
Overview
Walley Bank is looking to expand on the UX research that has been conducted and complete the UI design of their mobile app. The UX team researched the market need for a banking app that allows people to create savings accounts that help them save for small, fun items, such as a new phone or sunglasses, and large items, such as a house deposit.
Now that the concept has been validated by research, the mobile app is ready for its next iteration.
Design Brief
Designing a mobile app that allows customers to manage their savings. Whether it’s a small saving or a big saving.
My Role
- Create Mood board
- Create UI flow
- Create component library
- Design pages
- Design clickable prototype
- Test and synthesis data
Tools Used
- Figma
- Sass Colour Generator
- WebAIM for contract Checking
- Miro
Wireframes for mobile app based on design given to me
User flow based on a deep understanding of a user's typical journey with the product.
The user flows below display the complete path a user takes when using the Walley bank mobile app.
First-round usability testing reveals good insight!
A mood board to communicate the artistic direction of the app!
I created a mood board to communicate the artistic direction of the project. As with everything in user experience design, the mood board should be focused on meeting user needs and problem-solving.
Defining the atoms in the design system for hi-fi design
To make the process of design faster and also to provide a consistent experience for users I started to create a design system suited for this project.
Color System
I split the color palette between action, text, surface, and accent colors, and used ColorBox to generate the different tones and shades for each category.
Accessibility needs to be baked into the Design!
I used the contrast plugin within Figma to make sure the color contrast was passed.
Type System
I used Google Material Design as a reference. For the typeface, I chose Poppin and define different styles to cover all the needs.
Creating molecule based on atoms!
I created a component library based on the foundations including the color, type, and icon system defined in the earlier stage.
