Mobile Finance App Revamping  
COL Financial
UI/UX Case Study

Project overview

Duration
Role
Tools
1 week
UI/UX
Figma

Background

I am a first time user of the stock trading platform, COL Financial. Through my observations and experiences, as a user and UI/UX designer, I aim to propose a more functional and improved interface for the mobile app which will improve customer experience.

I was the sole designer of this project and set the following deliverables for myself:

  • User flows
  • Prototypes
  • High-fidelity screens (Onboarding, Homepage, Search page, Portfolio, Widget)
  • Research and Findings

Goals

1. Modernize the UI to make it more “user-friendly”
2. Encourage more people to use the app by enhancing the user experience.
3. Simplify and improve the aesthetics.
4. Entice younger generation to use COL Financial by modernizing the app to make it less intimidating.

The Process

This personal project presents the redesign process of COL financial using the design thinking framework approach.

The redesign was conducted based on user experience, research insight, reviews, user personas, and myself, a stock investor of COL financial.

The design thinking framework approach
Image source: https://warishussain.medium.com/how-to-innovate-the-design-thinking-framework-bc9599fcc450

Empathize

Obtain insights from the users by observing and consulting with users in order to understand users' experiences, motivations and problems.

Method 1: Reviews

I have gathered real life reviews from the Apple App store, the Google Play Store, and Reddit.

Method 2: User Personas

In order to gain a complete understanding of the users, their needs, preferences, and motivations for using a specific product or service, it is important to gather detailed information that describes who they are in a user persona.
Note : This user persona was created based off of different user reviews that I’ve gathered.

Define

Identify problems with the mobile app and the users’ pain points and frustrations.

  • No sorting option from highest gain/loss and alphabetical.
  • Outdated user interface.
  • No background widget to display watchlist and portfolio.
  • Not enough market depth (news, information about the company, and their updates)

Ideate

Sketch ideas (initial stage of creating the design)

The initial phase involves translating abstract ideas into tangible visual concepts through sketches. In this step, I used pen and paper to create a blueprint for how I wanted the design to look like and went with the ones that are realistically possible to develop for a mobile app.

Design System

To ensure consistency and efficiency in the design and development, I created a design system which will serve as a resource that provides a uniform language and a visual identity for the app.

I made sure to only use colors that compliment the logo of the company to create a trademark effect on the design.

Protoype

User flows

Click image to enlarge

Wireframes

Prototyping

Old UI 

Results

Onboarding

Note: Descriptions and images on the onboarding pages were inspired from the landing page of the company’s website:
‍
https://www.colfinancial.com/ape/final2/home/HOME_NL_MAIN.asp?p=0

Home page

‍

  • Added a sorting option, for sorting alphabetically or by the highest gain/loss.
  • Graph which moves as you drag on it which shows the gain/loss during that period of time.
  • Showcases list of stocks, cash, and funds.

Search page

‍

  • Original

‍

  • Blue theme to compliment the blue tones from the logo.
  • Watch list is scrollable and includes the essential information. However, if the user wants the full details It is clickable and leads to the details page.
  • A news section showing the latest updates from the PSE Market news.
  • A section displaying COL financial’s twitter/X account with their updated tweets.

‍

  • Changed selected icon   from white to yellow with an underline for more visibility
  • Spacing is uniform and aligned with auto layout
  • White background for more clarity for users who may be colorblind.

Portfolio

‍

  • Original

‍

  • Blue theme to compliment the blue tones from the logo.

‍

  • Three circles representing stock, cash, and funds. The higher percentage will represent a larger circle.
  • Includes a section for the account details and settings for logging in.
  • The second screen shows a micro interaction that displays the values when clicked on.

Purchase page

Widget

‍

  • The first widget (upper right) gives live updates on their current stock rates including a graph and the gain or loss of your current balance with the percentage
  • The second widget (bottom) showcases the user’s personalized watchlist with each stock showing their current status all without the hassle of opening the app and entering your password. Swiping right will show another stock from the watchlist.
  • When the user clicks on any of these widgets, the application opens and requires a password.

Interactive figma prototype

Conclusion

Improving your product is as simple as listening to your users. Companies should keep in mind the current trends and behaviors of their consumers to optimize their products and services. We should focus on creating easy to understand visuals while also creating functional user experiences for the app users.

Hence, platforms should always be kept up-to-date to deliver exceptional user experiences that guarantee their customers' satisfaction and ease of use.

How can we measure impact?

1. If there is a significant increase of users downloading the app.

2. Surveying users if they approve of the app and gather survey data (ex. age)

3.Listening to reviews and feedback from users.

4. Beta testing - recording the time of how fast users take when buying or selling stocks. (This would mean that the UI is easy to understand and efficient).

Next > Hair Salon

Behance
Upwork
Email
Resume
© 2023 Francis Young. All Rights Reserved.