Kanoe Montaño (she/her)
UX/UI designer

conscious

Collaborative UI Designer for mobile that rewards users for spending in-line with social justice values

Image alt tag

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.

Conscious is a start-up business therefore we were starting from the ground up.

Role

Team member UX and UI Designer

Tools

  • Figma

  • User Testing.com

Length

5 weeks ( June- August 2022 )

Deliverables

  • Wireframes

  • High Fidelity Screens

  • User flows

  • Visual Design

  • Color Palette

  • Developer Hand-off

  • Icon design

  • Logo development

  • Iterative Designs

  • Style Guide

Problem

Conscious had a software developer who designed some initial screens that did not align with their end-user needs but helped to capture the structural functions of the app. They also had a few functionalities they did not know how to integrate into the design like how to show the social impact of their user spending, how to balance the demand for familiar yet modern and fresh design, and finally how to make this design sprint the most comprehensive realization of the app since ideation.

Solution

We designed a mobile banking app that makes managing finances visually refreshing, easy to navigate, and enjoyable to engage with. A second UX research team helped inform our design so that it aligned with the client's target user. The final designs were continually updated throughout the client consultation and resulted in a modern, yet accessible design.

Ideation

Client generated home screen design

Client generated home screen design

Initial Designs and Inspiration

Our client gave us these designs before our initial team meeting. During our team meeting, we identified strengths and growth points for the current designs and identified themes to guide the redesigns: Social Justice, Fun, and Classy.

After reviewing the designs we put together a list of goals for future iterations of the designs

  • Maintain accessibility standards for readability and comprehension.

  • Improve the visual experience of viewing all transactions

  • Improve interaction with different accounts (checking, vs. savings)

  • Refresh and innovate the design system and create a style guide.

  • Improve the icon for "Impact" to more closely align with icon psychology.

Client questions to align designers with clients

Client questions to align designers with clients

Client Questions

The most viable product (MVP) is the product that the designers and client can agree on and be excited about. In order to acheive this we wrote up some questions to clarify the goals of the app so we could do our best to meet those goals through the design, all while being trusted with their vision for "banking for good."

Social Justice Moodboard (one of three)

Social Justice Moodboard (one of three)

Moodboard

We divided ourselves into three teams with three different themes: Social Justice, Classy, and Fun. I was on the Social Justice team, since that is heavily where my background is and where I feel strongest incorporating design elements that speak to the images on our moodboard. This is one of the moodboards we created.

Below you will see some color palette and font explorations.

Design

K. Montaño Redesign of Conscious Account Screen Redesign V1

K. Montaño Redesign of Conscious Account Screen Redesign V1

Initial Redesigns

We selected the home/landing page to redesign our three themes to provide the client with a sample of which direction they would like to pursue, which provides the user with a bird's eye view of their accounts and balances. This was my initial redesign of the home screen.

I focused on using the same tone of green that they used in their initial designs, but I wanted to increase the contrast and breathing room between elements to aid accessibility and navigation. I also refreshed the lower navigation with a semi-circle layout meant to mimic a wheel or coin. This was also prior to designing an "Impact" icon so I just used the letter mark "C" from the Conscious branding as the "Impact" icon, and then the rewards button was symbolized by the heart-- meant to convey that this is a rewarding experience in the way a heart can connote.

The clients did not pick this design but they liked the elements of showing how much of their spending during that time period was spent "Consciously" meaning aligned with the user's values. This is also indicated by the difference in color, the darker green highlighting "Conscious" purchases and the pale green is a regular purchase.

K. Montaño Account Screen V2

K. Montaño Account Screen V2

Updating Designs with Client Feedback

The clients were not particularly excited about any specific design style but picked certain elements they wanted to incorporate. While we had already created color palettes for them, they picked their own to help guide our updated iterations. They clarified that they were not tied down to any specific color palette. Given the feedback and guidance from the client with the new color palette, I submitted this redesign to show the landing page for the user accounts. The reaction from the clients was more promising. They were energized by seeing their colors in action and they welcomed the openness of the design, which was in stark contrast to the initial screens they gave us.

Color Palette V3 and Inspiration from the Client

Color Palette V3 and Inspiration from the Client

Designing is RE-designing

I enjoy the iterative process of UX and UI design because it continues the same lesson I was told in my theater and art instruction "The first does not equal the best" meaning the first idea is not always the best idea so updating and exploring the potential of an idea is always worth it in the end.

And the Conscious clients reminded me of this valuable lesson-- because they needed to see all our iterations to know that we had not met their vision yet. So they gave us the following inspiration: Apple Card. And we also created a separate color palette to match the mood of the inspiration.

We also provided feedback that an in-app QR code may not have the kind of desired functionality for a start-up app like Conscious. This is due to the lack of widespread knowledge of how Conscious would work as a contactless money-sending service and the user demand for another instant transfer of funds is dominated by Venmo, CashApp, Zelle, and Apple Pay. In our next iterations, we decided against the QR code but found a compromise by integrating the gradient design along with the stacked design of the lists of transactions.

"Impact" Icon Sketches to Final Version

Impact Icon Design

A crucial aspect of the Conscious banking app is the ability to view how your spending is making a positive impact in specific communities: LGBTQ+, Black, Brown, AAPI, Sustainable, Women, Indigenous, and Latine-owned businesses and organizations. In order for users to find this part of the app, there would need to be a uniquely designed "Impact" icon that would not only align with our client's vision of the icon, but would also not be too much of a stretch for icon recognition and psychology.

My initial idea for an "Impact" icon was to use the "C" in Conscious inside of a light bulb because it was branded and simple to understand for a user. This initial idea did not convey the social and financial impact of the money flow within the app, however. The clients wanted to use the circle arrow icon as their "impact" symbol. We wanted to respect this input without confusing the end user with previous associations with a "refresh" icon which is commonplace is many browsers and apps. We went back to sketching and ideating and with the help of our teammate who has a background in illustration and graphic design, she built us the final heart AND circle arrow design. Our clients loved the update.

Style Guide. Now, Final UI

Once we agreed on the basic structures that would make up our Style Guide, we built a comprehensive handbook to help us keep our designs consistent now and in the future of Conscious. Then we could move on to designing our final screens with a happy client and informed designers.

Developer Hand-off

Annotating for clarity

After finalizing our designs we annotated our screens in detail for future developers to understand how these screens will connect to form an app, all through user interaction and user flows.

Conclusion

Reflections

A valuable lesson for every designer is patience because patience definitely paid off in this client project. Even though our timeline got pushed back longer because of changing design directions from the client feedback, we were able to efficiently deliver and test an industry-changing neo-banking app.

Projects like this take time and take a lot of care and intention because of their mission. They want the user to feel empowered by their mission and the app needed to demonstrate that. I am proud of the work I provided here, including pushing back on the client to advocate for more industry standard practices in terms of icon design and achieving the highest engagement with the app. Conscious made me more conscious of how I operate as a User Experience and Interface Designer and Advocate in the Social Justice space.

Final Thoughts

I look forward to when we can see Conscious officially launched, as both an app and a website. A different team from our contract studio, Moment Studio, is working on building a website platform for Conscious to fully compete and define themselves in the neo-banking space (think Capitol One).

I also am hopeful that in this social and political reckoning we are having, we will begin to further legitimize the work and expertise needed to blend Social Justice with UX and UI design because otherwise, we will be providing empty solutions to overflowing problems.