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
Wireframes
Flow diagrams
Low-fidelity mockups
Hi-fidelity UI
Prototypes
Interaction design
Heuristic evaluation
UI Accessibility
Design system
Project/When
What
Why
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.
Role
Category
UX.UI Designer, Art Director
eCommerce. Business
Software
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.
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
CURRENT STATE
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.
Solutions:
-
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