Design Processes

User Flow Mapping
Design Library
Component Creation
Prototype Design
User Testing
Synthesis Mapping
Prototype Iteration


Future Bank is an online banking service that provides extra savings support and spending clarity by allowing users to set up multiple savings pockets within one consolidated bank account. From the initial UX research stage I conceptualised, tested and developed a high fidelity product prototype.







Atomic Design Process 


After evaluating the provided UX outline, creating the overall user flow and general design direction, I developed the first element iterations and Figma component library using atomic design principles. The initial style library included typography, colour, illustration style and then moved onto larger elements. Once this was established I created a prototype and went on to consider user testing and interviews for feedback.







Testing Insights

‘The statement transfer detail sections usually have three categories, they have particulars, they have code and description. A description for here might not be enough for my clients invoices.




Once completing user interviews, an AB test and some transaction and search tasks I found that overall users appreciated the simplicity of the initial prototype design. I learnt about user layout preferences from AB testing of the accounts page but that some hierarchy changes could improve their experience. I also discovered that more detailed transaction details should be optional for users if required.


Recommendations


From my synthesis and user insights the following recommendations were found and iterated in the final prototype.



  1. Type face weights and colour was adjusted to create stronger hierarchy, legibility and flow associations.

  2. Clearer language was included in forms which included more detailed entries for business transactions.

  3. Key information on the account page was adjusted to sit further within the fold of the preferred design to reduce the need to scroll and search for summaries or important info.



Final Figma prototype design for key user flows.