Skip to main content

UX + UI

🧪 UI Challenge April

Table of Contents
Two iPhone 16 Pro screens featuring a cryptocurrency app summary and deposit screen
Two iPhone 16 Pro screens featuring a cryptocurrency app summary and deposit screen

# (Very) Brief Brief

For this month, the challenge I was given was to design a summary screen for a set crypto app. The restriction was to ensure that the screen would flow seamlessly from the previous, as if I was following a brand’s design system.

# Original & Design Inspiration

The first part of the challenge involved breaking down the UI and components of the original design as well as the inspiration screens. From this activity, I gained a solid understanding of what features were needed in the summary screen, as well as the ‘grids’ & structural layout of the original concept.

Three iPhone 16 Pro screens, featuring a cryptocurrency app homepage, a list of coins, and a trade calculator

This original concept was designed by Arafat Mahfuz on Dribbble.com.


Three crypto summary screens each displaying the key statistics and costs relating to Ethereum, a popular cryptocurrency

The three screens (above) were given as part of the initial brief, to indicate what features would be needed and competitor layouts. The screen on the left shows how I broke down each concept and original design.

# Components & Interface

A collection of assets used to build out the summary screen

Components and interface

# Outcome & Design Feedback

I was really happy with the feedback I recieved from Ines Mir, a UX industry veteran, and have definitely felt like the time I put into the challenge was well spent.

## Outcome (Pre-feedback)

Variations of the summary screen, plus an additional deposit screen
Summary screen featuring a graph indication of coin price, floating menu, and resources carousel

Two iPhone 16 Pro screens featuring a cryptocurrency app summary and deposit screen

## The good bits

Overall, Ines seemed very positive about my work, noting the attention to detail and consistency of the design, in that it followed the previous creator’s design principles to a tee. I was really glad she mentioned this, as I had spent hours pouring over the Figma file, diligently measuring every pixel and recreating icons to perfectly capture the original’s look and feel.

## Some mistakes were made

The main points that were noted is that I could have done a better job with the information architecture - particularly with the float at the bottom of the screen which seemed a little confusing. This is because in previous screens, the float is established as a tabbed system, where users flick from screen to screen by tapping icons on the float. In my screens, I broke the pattern and introduced a different mechanic, which can critically impact the overall ‘flow’ of the app. To remedy this, I would potentially add a step-down on the float menu to indicate that the buy button is nested within that particular screen, or as she suggested, collapsing the icons into a dot menu.

On a minor note, she also reminded me to not be afraid of experimenting with different textures and effects to uplift the UI and give it more character. Since much of my experience has been designing for b2b during the minimalist era, I often self-restrict this experimentation based on habit - though this is something I plan to break away from.

## Final versions

Second iteration of the summary screen, this time with a stepped float menu

Version 2: Stepped float menu

Third iteration of the summary screen, this time with a smaller float menu

Version 3a: Smaller float menu

A comparison of the summary screen before and after stylisation

Version 3b: Stylisation comparison and final version