Attain
Financial planning for short- and medium-term goals via a responsive website. UI solution for accessing the product when and where it's needed most.
About this project
Responsibilities
-
Brand Guidelines
-
Wireframes
-
UI Design
-
Prototype
-
Testing
Background
For this product I developed branding guidelines, which I combined with user data to determine the most appropriate format to be a responsive website. From there, I wireframed both desktop and mobile screen sizes.
Research
In researching for this product, I discovered that the target user wants to save money quickly for a specific reason, such as a large purchase or trip. Further, they prefer a tool that can be used anywhere on any device before a planned expense.
User Flow
I outlined a user flow taking into consideration the needs of the target user. While Attain is a responsive website, low and mid-fidelity screens are presented in mobile format following a “mobile first” approach, which recognizes the frequency at which users access websites on their mobile devices.
User Journey
From the full user flow, I selected a single user journey comprising of four screens: “As a user, I want to see an overview of how much my finances have changed and how much I am saving throughout the saving period, so that I can stay on track.”
Brand Guidelines
Guiding Principles
While composing these brand guidelines, I kept in mind the importance of building trust and confidence with users due to the sensitivity inherent in financial products.
Logo
My goal with the logo was to have a visual representation of Attain's values. A triangle sitting on its base provides visual stability while the monochrome greens evoke money and a calming feeling of nature. Having the logo comprised of three triangles further represents how financial goals can be broken down into smaller, more easily achievable steps.
Colors
Image Style
Writing Style
Typography
Each component of the style sheet works to emphasize the values and personality of Attain as a product and service. Having a consistent viewpoint throughout each facet of design contributes to user trust and confidence.
Designing
Low-Fidelity Wireframes
I developed low-fidelity wireframes incorporating information about user needs, user flows, and my identified user journey.
Mid-Fidelity Wireframes
Besides establishing hierarchy and component placement, mid-fidelity wireframes also allowed me to create a prototype for user testing. Testing at this stage uncovered pain points before time and energy went into final design work.
Prototype Testing
User Test Analysis
Pain points were identified based on feedback from 3 users.
Pain Points
Users appeared unclear when they could click on charts to interact
Users all searched for
a back button/ way to navigate back to the dashboard
One user had trouble with the month abbreviations
on the charts
One user wanted more information about what chart components
meant, particularly in the
savings section
Resulting Changes
Changes based on feedback and users’ actions:
-
Added walkthrough
via info icon -
Updated layouts and labels for charts
-
Changed hamburger
to back button on Financial Details screen
Additional changes (seen in final screens):
-
Changed background color and styling of dashboard to be consistent with lighter colors and styling of other screens
-
Changed header 2 text style to have
NO underline for a cleaner look -
Added scroll function to charts for improved functionality
Mid-Fidelity Prototype
Watch the video walkthrough of the prototype, or click through it here.
A/B Testing
User Feedback
A total of 8 responses resulted in a 50/50 split. I worked to incorporate the gist of the feedback to optimize card outlines and shadows, for example:
-
“The heavy dropshadow draws your eyes too much to those elements. The option with less dropshadow is more balanced and works well with the hierarchy that is already established.”
-
“The darker one blends better with overall color scheme”
A
B
Finalizing
High-Fidelity Wireframes
Using the results of my testing, I added black and white versions of high-fidelity elements and confirmed pixel perfect components before the final step of creating full-color high resolution screens.
Mockups
Mockups allow for an almost-as-good-as-the-real-thing view of full color high-fidelity screens.
Where to go from here
Next steps for the app
-
Create screens for additional user flows
-
Test a high-fidelity prototype with users