Case Study
Star One Credit Union: UX/UI Redesign
UX Design / UI Design / Mobile Banking App
From May to July 2023, I took on a personal passion project to redesign Star One's mobile app, driven by my desire to improve the user experience. The project involved a comprehensive revamp of the app's interface, with a focus on addressing key usability issues. Throughout the process, I incorporated valuable user feedback to ensure the design was user-centric and addressed their needs, even though this was an independent, exploratory mockup rather than an official assignment.
History
Star One Credit Union is a not-for-profit financial institution based in Sunnyvale, California. It was established in 1956 and has since grown to become one of the largest credit unions in the Silicon Valley area. Star One Credit Union serves individuals, families, and businesses, offering a range of banking and financial services.
Problem
The recent update to the Star One Credit Union mobile app has resulted in a poor user experience, including a cumbersome and visually messy interface, loss of simplicity and intuitiveness, lack of standard features like displaying each account upon logging in, and overall dissatisfaction among users. A UX/UI redesign is needed to address these issues and provide a user-friendly, intuitive, and aesthetically pleasing app that meets the expectations and needs of the members.
Goals
Improve:
User Experience
User Interface
Assets for higher quality usage
Overall look and feel of the app
Constraints
Limited Data Analytics
No Business and Market Guidance
No Engineers
No Brand Guides
No Clear End Date
No User Testing
The Process
Analyze
As a long-time member of Star One, I've experienced firsthand the issues with the current app. The information architecture is cluttered, making it overwhelming and difficult to navigate. This not only decreases the user’s sense of productivity but also increases cognitive load.
According to Hick’s Law:
“The time it takes to make a decision increases with the number and complexity of choices.”
In this case, users are spending more time figuring out how to perform tasks or locate information, leading to slower completion times and reduced efficiency. This reinforces the need for improvements to streamline the app and enhance usability.
Research
To further validate my claims, I conducted a thorough review of user feedback from the app store. I identified six users who expressed dissatisfaction with the recent update to the Star One banking app, with the majority highlighting issues related to the user experience and interface design.
The recurring themes in their feedback prompted me to delve deeper into understanding the root causes of these concerns.
To do this, I created an Affinity diagram, allowing me to categorize and analyze the specific pain points more effectively. This method provided a clearer picture of the prevalent usability challenges, enabling me to form a well-informed, data-driven conclusion about the necessary improvements for the app’s interface.
Resonating
Funneling through all the reviews, one stood out to me the most.
*Disclaimer
For this project, I chose to focus on core features that I felt would bring the most value through a thoughtful redesign. This was a personal decision, driven by my desire to highlight what I believed were the most frequently used and impactful areas of the mobile app experience.
Iterating: Wireframing
Like any great design journey, it all begins with sketching wireframes from scratch—the first step in a dynamic, iterative process.
Here, I start by crafting a rough version of the existing app, using it as a foundation to build and evolve my ideas. This method sparks a flow of modular creativity, allowing me to continuously refine the design and uncover new possibilities.
Log in screens
Dashboard screens
Account screens
Deposit screens
Transfer screens
Iterating: Lo-fi
With the foundation of my redesign in place, I moved on to creating lo-fi screens. For this step, I pulled relevant design elements from Figma community files and applied them to a standard iPhone layout.
This approach allowed me to streamline the process, saving time by avoiding custom lo-fi components. I find this part of the iteration process especially enjoyable, as it feels like assembling puzzle pieces to create a clearer visual representation of the final design.
Log in screens
Dashboard screens
Account screens
Deposit screens
Transfer screens
Time to…
🌶️ Here is where things get spicy 🌶️
To transition into creating hi-fi screens, I sported my handy-dandy visual designer hat and set sail to build the foundational design elements—the atoms and molecules—necessary to bring the vision to life.
So, what does that involve? I’m glad you asked! For the atoms, I focused on key elements like the color palette, typography, logos, grids, and icons. The molecules included interactive components such as buttons, input fields, radio buttons, navigation, and card elements.
Together, these elements form the backbone of what is commonly known as a Design System.