Circle
Circle is a banking app that offers a wide range of financial services catering to individuals, small and medium-sized businesses, as well as institutional investors.
In my recent redesign efforts, my primary focus has been on enhancing the mobile application to ensure its clarity and accessibility as an indispensable everyday tool, perfectly aligned with the company’s vision.
Research
In the study i focused on the question “How can we evaluate the efficiency of money transfers in the mobile application of the bank?
Number of Participants
3 (2 experienced and 1 novice)
Method of evaluation
Moderated usability study and SUS questionnaire
Metrics measured
Success rate, number of errors and time on tasks.
Card Sorting
To assess and enhance the app's information architecture, I used the Card Sorting method conducted within the Maze tool. I successfully recruited a group of 10 participants for the testing. The findings indicated that the current information architecture generally aligns with user expectations, though with some recommended additions and prioritizations.
Research Insights
2 out of 3
Participants experienced difficulties to initiate a transfer.
2 out of 3
Participants experienced difficulties in finding a recipient by the name.
23 Mistakes
Were made by novice users while they were trying to initiate money transfers.
64 SUS Score
SUS stands for System Usability Scale, which is a widely used questionnaire-based tool for evaluating the usability and user experience of a product or system.
Results
Following a comprehensive user research phase, a crucial step in this project involved conducting card sort testing. This methodology allowed us to gain valuable insights into how users intuitively categorize and organize key information within the application. The results of this testing proved instrumental in shaping the final design of the main screen.
One of the key takeaways from the testing was the need for improved clarity regarding a specific feature (e.g., loyalty points, notifications). Based on this insight, I led the integration of clear and concise labels or icons directly on the main screen. This not only improved user comprehension but also allowed for quick access to this functionality without needing to navigate into separate menus.
Another area for optimization identified through testing was the information hierarchy. We observed that certain sections previously housed within a tab bar could be readily accessed and understood when presented directly on the main screen. By strategically relocating these sections, I was able to achieve a significant reduction in visual clutter. This streamlining not only enhanced the visual appeal of the app but also created a more intuitive user flow, allowing users to find the information they needed with greater ease.
Color Palette
A color palette is a curated selection of colors chosen for a specific purpose or design, often used to maintain visual harmony and convey a particular mood or theme.
Cetacean Blue
#010031
UN Blue
#608EE9
Light Salmon
#FC9580
Metallic Silver
#A9ABAD
Anti-Flash White
#F2F5F7
Eerie Black
#181818
SF Pro Display
SF Pro Text
Typography
I used SF Pro Display for font sizes 20 and higher and SF Pro Text for body text and smaller sections.
Low Fidelity Wireframes
User Interface
Home Screen
The journey from concept to polished interface begins with wireframes. These are the essential blueprints that map out the app's structure and user flow. I start with low-fidelity wireframes, focusing on core functionality and user actions. These are like rough sketches, laying the foundation for the user experience.
As the design evolves, I elevate these wireframes to a higher fidelity. These detailed mockups visually represent the final layout, incorporating elements like buttons, icons, and placeholder text. This allows for user testing and refinement before diving into the aesthetics.
Finally, to ensure design consistency, I created a UI kit. This acts as a design library, housing all the standardized UI elements – buttons, icons, fonts, color palettes. This streamlines the design process and ensures a cohesive visual language throughout the entire application
Project Details
Platform
iOS/Android
Timeline
2 Months
Tools
Figma
Adobe Creative Suite
SUS Questionnaire