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
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
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.
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
Efficiency of use and intuitive interactions
Clear aesthetics and tasks
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