UIUX Case Study: Redesigning the Crypto.com app

 


The brief for this project was to redesign an existing app and identify areas of improvement. The project was solely about the UI, although there are some sprinkles of UX here and there because I couldn’t resist.

Why the Crypto.com app?

Although there was no research involved in this project, from personal experience I know that most people are aware of the concept of cryptocurrency, but do not understand it enough to either find out more or decide to make an investment.

I chose this app because of its success with marketing that causes many people to use it as their go to app when they decide to learn more about crypto. However, the problem is that the information that is given on the app, is difficult to navigate, uses confusing icons, and the overall user flow can make it difficult for the user to use the app with confidence.

I felt that confidence and familiarity with this app was key — especially because it is vital for any user who chooses to spend their money on this kind of app.

My overall goal by redesigning the app was to present information in such a way that my Grandmother would understand it.

The Redesign

I chose to focus on three main screens for this project, starting with the original home screen:


The Home Page

The second screen was where the user was taken after clicking Bitcoin from the home screen, one thing to note was how bizarre it was that the second screen changed from the brand colours, to completely white.


Screens 2 & 3 for Redesign

The final screen was the wallet, I chose this screen because it would be part of my own flow within the app, however in the original the wallet is completely separate from the main app.

Creating A Proto Persona

I deemed it necessary to do a persona for this project, in order to validate the changes I would be making in the eventual redesign which would be focusing on making the information about cryptocurrency more readily available, and the actual process more smooth and efficient.


Proto Persona

My main focus for my persona was that he wants to make decisions on his investments based on the facts presented to him via an official app, as opposed to external pressure from his friends or colleagues at work.

The Redesign and Learnings

Based off the original design I created this style tile, I changed the typography to Gotham due to it’s clean design and sharp edges which makes it clear to read the important information which will be presented in the app.

I also chose to stick with the original primary colours, as these are used a throughout many financial apps, and this was important for me to keep with the sense of familiarity I would want the user to feel.



style tile

Based off initial ideas and how the competition presented their apps, I was able to create my own Hi-Fi prototype, starting with the following opening screenshots.

First Three Screens of Redesign

As shown above, I kept the main colours which suit the brand, by doing some quick research from other apps and online, I found out that using blue for financial apps was extremely common for any apps in the financial area.

I did choose however to go with the light blue as my primary colour for the background, as it is less harsh on the eye, and the coolness of the colour in general evokes a sense of security and a good contrasts for messages and CTA’s used within the app.

For the redesign I added a warning overlay when the app opens for new users, and users can find out more information on each currency from the more info addition to each bar of its respective currency.

Moreover, each operation is now available via four buttons on the home page should users want a quicker flow to send, trade receive or buy crypto. I also chose to add icons for popular, as well as “trending” coins, in order to add to the feel of familiarity, as users generally find interest in what is trending through social media.


Last three screens

As the user clicks on more information, I added a second overlay which gives a brief and simple explanation to the currency, which they can view in more detail on the following page as seen above.

For the page with information regarding bitcoin, I added a best time to buy feature, as well as showing the highest and lowest prices for the time period the user chooses, with the corresponding colours of red and green to show the lowest and highest points. The most obvious change to make on this screen was to match the colour scheme, which for some strange reason changes to white in the previous design.

Finally, I decided to make the wallet page less condensed with information, and add the wallet and its functions on to one page. I took some inspiration from the home page of my own bank’s mobile app, and during the design critique process I was asked why the buy button was made bigger. For me this decision was based on what people tend to do, or think of, when they take out their wallet — it’s because they want to buy something, or, the company wants you to buy something. Although this was a UI challenge with little UX, I feel this decision was valid.

Final Learnings and Thoughts

I really enjoyed this project, my only limitation was time as I lost a day of the course so I was behind on time before starting. Nonetheless, I learned a lot about Figma during this process and therefore enjoyed the UI stage of the course a lot, even though I missed research and other UX Stages.

Overall, I believe at the moment, I achieved an app that delivers familiarity and simplicity for users of the app who either buy or use crypto, and I think this is one project I am proud of just because if the amount of UI I learned, so in the future maybe I will revisit this project and improve the app further.

Post a Comment

0 Comments