A small sampling of our developer handoff file
Conscious
A digital banking app that rewards users for spending in line with their values.
Overview
Conscious is a digital banking app promoting social justice by rewarding its users for spending consciously. Their tagline is "banking for good" and the clients' goal is to become a B Corporation. On launch, they plan to initially provide users with a digital debit card, a checking account, and a savings account with a plan to add other features such as depositing paper checks in the future.
My Role
Lead UI/UX Designer and UX Writer managing a team of 4 other designers across 3 time zones.
Tools
Figma
The Process
Discovery
Ideation
Design
Usability Testing
Redesign
Developer Handoff
The Challenge
Conscious had a user interface they weren't excited about as it was too dissimilar to other existing banking apps. Their existing design also heavily used a variety of greens which implied that the app was environmentally-related rather than social justice focused. They wanted a fresh user interface and style guide with which they could develop a minimum viable product.
Conscious also did not have a website and toward the end of this project, another team began working on the Conscious Website design based on this project's App design. The Conscious clients also simultaneously had a separate UX Research team working to conduct a marketing analysis on their target clients' digital banking likes and dislikes.
The Solution
We presented Conscious with a refreshing app redesign which incorporated the UX Research team's data and better reflected their vision of banking for good. The new app ensures clear navigation with a more modern yet unique design while still providing users with a familiar interface similar to other banking apps.
01. Discovery
01.01 Kickoff
As the team lead, I scheduled and facilitated a kickoff meeting for my team via zoom and reviewed our project plan to ensure everyone understood the clients' requested deliverables. Those deliverables included:
Three UI iterations of one screen
A UI Inspiration board, a Moodboard, and a style guide for each iteration
High-Fidelity wireframes
A final design and its respective UI inspiration board, moodboard, and style guide
A developer handoff file
Our clients provided a video with a brief walk-through of their current UI. In that video, they indicated that they didn't have any specific colors or expectations for what the app should look like other than promoting social justice and focusing on Gen-Z and younger Millennial users.
They also wanted to maintain all of the existing features and user flows.
01.02 Existing UI & User Flow Review
Existing UI
After viewing our clients' video and taking notes on their UI vision, we then reviewed their existing user interface. The color scheme was made up of six shades of green with mostly white text. Some text was also very small, making it difficult to read. My first thought was of accessibility guidelines and whether the white text against a green background would pass contrast tests for accessibility. The team also noted that the existing illustrations lacked consistency in their styles.
The existing app design also did not imply any kind of relationship with social justice. Specifically, the "impact" button on the homepage was not labelled and, as such, our team assumed it was a "refresh" button as that was what it most resembled.
Existing User Flows
Our clients originally wanted us to focus on keeping the existing user flows without making changes. Those user flows centered around:
Registering using a phone number
Reviewing one's checking account
Reviewing one's savings account
Reviewing one's social justice impact through spending
Adding/connecting an external bank account
Reviewing the one's Rewards for using Conscious to make purchases
01.03 Client Questions
To gain more information about the clients' expectations for Conscious, we created a list of 8 questions. Though the Conscious clients said that they didn't have any specific ideas or requests for their UI redesign, I've found that many clients do have some ideas of what they want but are unsure of how to articulate their vision.
01.04 Client Answer Review
From our questions, we learned that our clients wanted to convey a sense of hope and happiness to their users. We also gained insight into the digital banking apps that they admired (Mercury and Chime) and what other app interface designs they liked and wanted Conscious to resemble (Spotify Wrapped).
They also wanted their redesign to feature illustrations rather than stock images, but still weren't sure about a specific color scheme.
02. Ideation
02.01 UI Iteration Planning
I scheduled a meeting for our team to choose which screen we wanted to design iterations for. We ultimately decided to create three UI iterations of the home screen in order to capture more of the features our clients wanted to maintain.
We decided to base our UI Iterations around themes from the clients' feedback:
Classy - based on Mercury's look
Fun - based on the Spotify/Chime feedback
Social Justice - based on the pictures that the clients provided of historical social justice warriors
Each UI iteration also included a corresponding moodboard, inspiration board, and style guide.
02.02 Identifying Designer Strengths & Interests
During our meeting to determine UI Iterations, I also encouraged my team to share what they felt their design strengths were and/or what they were interested in getting more experience in during this client project.
Moving forward in this project, I delegated tasks according to each designer's individual interests where possible.
02.03 Sketches & Classy Wireframes
Part 1
I broke our team into three smaller groups to work on the Classy, Fun, and Social Justice designs.
For the Classy iteration, my group and I decided to each create our own individual visions. I sketched out what I thought the homepage could look like, then created a high-fidelity wireframe version in Figma.
We compared our individual Classy screen designs iterations, then collaboratively designed a final Classy version based off our three designs.
02.04 Homepage Wireframes Part 2
Next our team met to review each group's wireframes and make minor design adjustments.
We finalized our top three UI iterations and I shared these along with the respective moodboards, UI inspiration boards, and style guides to the clients.
02.05 Client Feedback & Redesign
Our clients responded that while they liked the iterations, they weren't excited about any specific one. We hadn't quite met their vision of Conscious; however, there were aspects of our designs that they did like and wanted incorporated into a new design. They also provided a color palette that they wished us to try using but clarified that they weren't stuck on that specific palette.
My team and I met to review the clients' feedback and decided that we needed more information. We came up five more questions to clarify some of the clients' design comments and dig more into the specifics of what they were looking for.
Based off the clients' responses to these five questions and their design comments, we collaboratively created a new UI iteration of the homepage which incorporated the aspects they liked from the three designs. We also used a variation of their color palette with minor modifications to ensure accessibility regarding color contrast.
We shared the new design with the clients with an explanation for the minor color modifications and anticipated that we would soon begin the full redesign of the other app screens.
However, UX/UI design is an iterative process which is what makes it such an interesting field.
02.06 Rethinking our Iterations
The Conscious clients didn't quite feel that we'd captured their vision with the new homepage iteration. However, they helpfully provided new UI inspiration from Apple Pay and a mock up they had designed themselves. They requested that we use a specific font for the redesign (Nunito) and that we use their color palette without modification this time.
Before we moved forward, I ensured that the clients' whole team was in alignment with these requests as there had previously been some indecision among their team on a few design elements. I also notified the client that new iterations would put the Conscious project behind schedule and wanted to make sure an updated timeline was acceptable to them.
With client assurance that they were in alignment and understood that that the project deliverable dates would change, my team began working on three new iterations of the homepage.
02.07 Collaborative Redesign
I scheduled the full team to meet and we worked together to ensure that we took all of the clients' requests into consideration while still adhering to accessibility standards.
At this time, one of our designers who had a background in illustration created a new "impact" icon which mimicked the original icon while lending it the feel of "giving back." It also ensured that there could be no confusion between the impact icon and a refresh button.
2.08 New Iterations
We completed three new iterations with the new impact icon and met with success. The clients loved the new icon and requested that we move forward with one of the new designs.
03. Design
03.01 Style Guide Update
We updated our style guide to capture the final User Interface look that the client liked and ensure that our team would be on the same page for maintaining a consistent UI moving forward.
03.02 Applying the New UI to All Screens
I had each designer choose a section of the original Conscious screens to update using the new user interface.
Once each designer chose a section, we set an internal team review deadline, then reviewed our sections together for consistency. I ended up designing 35 of the 52 screens. Though we worked mostly individually, we still communicated and collaborated via Figma comments and Slack to provide ongoing feedback for each other.
03.03 UX Writing/Copy
At this stage, I also reviewed all UX writing or copy to ensure that it would streamline the user's progress through the app. This was especially important when considering the copy for buttons or links which would take the user to another screen.
Another area for UX copy that I felt was important were the descriptions underneath each transaction. The original UX copy in the clients' app was not consistent in the information listed. I was concerned that the copy would not only be difficult for developers to code, but more importantly, would confuse users.
I updated the copy to more clearly explain the transaction details and ensure that developers would feasibly be able to code those sections so that the appropriate information would be displayed.
04. Client & Research Team Input
04.01 Client Presentation
I, along with one of my team members, conducted a walk-through of the new screens with the clients via Zoom. They were excited that the new user interface introduced two new possible features for their users:
The idea of discounts on shipping for Conscious users at certain retailers
The idea of letting users set impact goals for themselves in the account settings section.
They had a few requests for minor design updates and asked our team to build out the Rewards section of the app.
04.02 Incorporating Research Analysis
At this time, the UX Research team finished their market analysis and presented their findings to myself and to the team lead for the Conscious website design.
I noted two major data points from their UX Research which needed to be addressed in our final UI iteration:
Digital bank users place high importance on the ability to contact a customer service representative quickly and easily.
Digital bank users want a feature which allows them to deposit paper checks.
Taking this information back to the clients, I asked if these were features that they wanted my team to incorporate the redesign. Though the Conscious clients weren't ready to provide a paper check deposit feature, they did want to have a simple customer service screen which could connect users to an email address.
With this new insight, my team and I got to work incorporating the research data into our new designs and building out the Rewards section of the app.
05. Final Design & Handoff
05.01 Final Designs
In our final design for the clients, my team created more screens to demonstrate the user flow for the Rewards section. We also created a Customer Service screen in the style of a "contact us" form which would automatically send user issues to the appropriate email address. This style allowed users to lodge an issue without having to leave the app and saved the users extra steps. I also ensured that the users had several options for connecting to the Customer Service screen from within the app.
The redesign also included a Deposit Checks flow for the Conscious clients to use in the future when they eventually add that feature.
5.02 Developer Handoff
Our clients approved of the new designs and the team created and shipped a developer file complete with annotations and developer notes which explained element spacing and any special interactions.
We also created an updated component file to make the build out easier for the developers.
5.03 Prototype
We created a prototype which captured all the clients pre-existing flows plus the additional deposit checks feature.
06. Usability Testing & Redesign
06.01 Testing the Updated UI
Though it was not a deliverable, my team and I conducted usability testing on the prototype to determine if the updated UI was as intuitive as we anticipated. We utilized UserTesting.com to recruit and test participants.
Survey
First, we developed a short survey to ensure we were testing appropriate participants. We wanted to test participants who fit the following 3 categories:
Gen Z or younger Millennials
Technologically competent
Be experienced with using a digital bank account
06.02 Test Plan
Test Method
We used conducted unmoderated user tests with 6 participants for which we required verbal answers and encouraged participants to talk through their thought process as they completed each task. Each participant also agreed to have their test session recorded so that we could observe their facial expressions.
Test Tasks
We identified the 6 basic functions of app for which we wanted to assess the viability and user-friendliness. From these functions, we developed the following 6 tasks:
Set up an account for the first time
Change your name in the app
Review the recent transactions in your checking accounts
Transfer funds out of your Conscious Savings account and into your Chase Bank account
View the impact you have made on your community by spending consciously
Update the specific communities that you would like to focus on supporting
06.03 Affinity Mapping & Synthesis
Our team individually reviewed the results and one team member volunteered to synthesize the data with an Affinity Map.
06.04 Findings & Issues
From our small user test, we were able to identify 5 issues. Two were deemed major issues which interfered with our users' abilities to complete their tasks. Three of the issues were more minor and were more "wishlist" items or comments from users.
06.05 Updating the design
Our team worked together in Figma to redesign sections of the Conscious screens in order to address and fix all 5 issues.
Major Issue #1
Participants were not easily able to update the communities they wanted to support.
Recommendation:
Add an option for updating user selections in the Impact Screen as that is where most participants looked first
Redesign:
My team and I worked together through several new iterations of the Impact screen to add a clear option for users to view the communities they supported. Once on the Communities screen, users would then be able to edit their communities preferences.
Major Issue #2
Participants did not recognize that the Transfer Funds tile was a button and were confused about where to go to transfer funds between bank accounts.
Recommendation:
Add a clear CTA button to the tile to Transfer Funds between banks.
Redesign:
Through several iterations of the Transfer Tile, my team and I landed on incorporating a Make a Transfer button and arrow. This button style was only used in one other spot on the homepage and allowed the button to more easily stand out. We also updated the UX Copy in the tile to be much clearer to let users know what where the button would take them.
06.06 Reflection
Though this UI redesign took longer than our original timeline estimates, I still really enjoyed it. One might think that working on digital banking UI would be boring (something our clients actually apologized for at one point!), but I found the redesign process really fun. It's challenging and exciting to redesign something which requires that the designer stay within certain parameters while still introducing more user-friendly and fun aspects into the design.
Two things I took away from this project were:
I really enjoy developing new iterations based on research data or new user insights. UX/UI Design is supposed to be an iterative process and this project certainly required multiple iterations with much client feedback and sudden UX Research data needing to be taken into account and incorporated into new design iterations.
I believe that had I paused our team during the UI Iterations and gone back to conduct a thorough Competitive Analysis, we would probably have reached a final design much sooner. Not only because our UI goals would have been clearer, but because we would have had data to back up our design decisions to the clients.Accessibility is important and can be implemented in design even if it's not terribly important to the client. Our clients decided they wanted new designs in a specific color palette which wasn't terribly accessibility friendly when it came to contrast. However, by using that palette wisely and/or modifying the colors marginally to ensure they met color contrast accessibility requirements, my team was able to satisfy the clients while still meeting WCAG accessibility standards.