top of page

UI Design - Mobile App Case Study

This App helps people find vinyl record shops, as well as,  solutions for an enjoyable eCommerce shopping experience.

Proof of concept
Flow diagrams
Low-fidelity mockups
Hi-fidelity UI
Interaction design
Heuristic evaluation
UI Accessibility
Design system




Mobile App UI design
May 2023-Jun 2023

Mobile App (iOS). 
UI Design Constraints

Portfolio Spec Project: challenge UI design, UX workflow, and creativity. I enjoy collecting vinyl records, so this was a fun and inspiring project.



UX.UI Designer, Art Director



Figma, Photoshop, Illustrator, Balsamiq, Flowmapp, Principle

Challenge: Introduce new features and solve Journey-Level pain points. Helping to eliminate user confusion, errors and amount of steps for the Log-in process.

Goal: Create simplified and delightful experience designs–considerate, comfy and tactile. 

UX-UI Focus: UI consistency and standards, visual hierarchy and appeal, user control and error prevention. 


Communicating the 'Spirit of my idea' – initial concepts and sketches into UI solutions – I like to draw and get creative, even if it's a bit crude at first.

What problem am I solving for?

From the initial research, I gathered user data and identifying user pain points and goals – understanding he right problem.  I spent 2-3 Hours in ideation doing crazy-8s exercises and generated ideas–for the right solution. These sessions helped me identify solutions for a clear and efficient flow, as well as, ways to communicate good design for key screens in the App's experience


Experience Flow

To outline the necessary App functionality, I created flow diagrams of main login tasks the user can do: looking at both the user flow and potential pitfalls.

The experience flow I created helped identify opportunities of user tasks and I applied these to a refined UI architecture.


Identifying a UI design system

During the development stage of this App, I also created moodboards and a design style guide for UI specs. This design system helped me hash-out details for building precise and efficient interfaces. Font, color and structure. 

Vinyl-Design System.jpg
Vinyl-Grid Layout.png
Vinyl-Color System.png
Vinyl-Button Specs.png

Low-fidelity blockframing and UI wireframes

To obtain a 'big picture' and baseline understanding for user's needs and goals, I designed low-fidelity mockups to be used in  future usability tests.


Refining the UI Design 

For an enjoyable and pleasing user experience, I aimed at refining the current UI by mapping out the technical and aesthetic aspects of the interface. These guidelines helped future enhancements for the overall form and functionality.

  • Use of Golden Ratios

  • UI elements have a 3:1 Contrast Ratio

  • Line Heights at approx. 150%.


UX.UI Design Solutions: Log-in Task

MVP: I designed the Log-in interface flow and blended aesthetics, form and function. I kept user needs at the foreground of my design decisions while focusing on the following key UI standards:

  • UI consistency and Nav
  • Clear signifiers and paths
  • Visibility and feedback
  • Error prevention
  • Efficiency of use and intuitive interactions
  • Clear aesthetics and tasks
  • Minimalism effect
  • UI flexibility with user recognition

BELOW: The outlined screens are the necessary 'key' App functions for the Log-in process.

Primary experience goal: reduce the amount of steps to complete tasks as well as the need to enter complex data into the system.  I designed the appropriate level of user feedback and error prevention for the user flow to be successful.


Delight can sometimes be a mystifying word, however here I aimed at making the experience more memorable and considerate for users.

MVP: realistic ideas developed into rapid iterative UI designs.

High-fidelity prototypes for presentation, collaboration and interactive design.


I brought my designs to life with high-fidelity-clickable prototypes.

Goal:  I helped users learn how to interact with the interface and design a purposeful user interface. Perform usability test to validate my design decisions and process.



  • Visual hierarchy and interactions: as parts of a groups and relationships of the UI elements

  • Help guide users around interface, alert them of changes and errors

  • Design to feel more like the a real, physical product

  • Communicate the Apps theme through interactive design


UI accessibility: Part 1

During tests and exploration, I created iterations with higher ratio rankings to meet QC standards. The visuals were slightly tweaked using contrast, brightness and value for quality control.


Accessibility: Part 2

A Color Vision deficiency variation check

bottom of page