top of page
UI Design - Mobile App Case Study
Creative and technical workflow for a UI.UX Mobile app design
Proof of concept
Wireframes
Flow diagrams
Low-fidelity mockups
Hi-fidelity UI
Prototypes
Interaction design
Heuristic evaluation
UI Accessibility
Project/When
What
Why
Mobile App UI design.
May 2023-Jun 2023
Mobile App (iOS).
UI Design Constraints
Portfolio Spec Project: challenge creativity, innovation and pixel perfect delivery
Role
Category
UX.UI Designer, Art Director
eCommerce. Business
Software
Figma, Photoshop, Illustrator, Flowmapp, ProtoPie, Principle, PLAY, Notion
Why I made this project
*Highlight*
Explorative
UI Case
Native iOS Mobile App
Design iterations and interactivity -
Crafted within the app 'PLAY'
For tenants, having to deal with maintenance requests feels like a burden. Having an app that helps tenants quickly report repair issues or security concerns and get these issues resolved in no time and without much fuss, is a deal breaker.
For larger apartment complexes, the App helps to efficiently manage maintenance requests and track progress so that tenants can get the help they need quickly and with minimal effort and in a timely manner.
Problem space: Design a user-centered Mobile App experience while meeting core users needs and helping them to be more productive and happy.
Steps:
Problem Space> Solution
Experience Audit
UI Trends and UI Patterns
UI Design Patterns
Blocking
Wireframe
Mood board
Style guide
Grid/Layout
Principles
Ideate>Sketc.h(marker)>Mockup>Prototype
SITEMAP/SYSTEM MAP
MockQup: UI FlowCHART /Scenario/Flowmapp
Prototype: Principle/ ProtoPie: PLAY
Huertitics
Accessibility
Low to High fidelity
APP Features
Before / After
Assumptions/Constraints/Hypothesis
Clutter-free interface: limit the number of options and functions
Golden Ratio
on the screen
Prioritize content
Focus on user goals
Ensure intuitive navigation
Correct Button sizes
Readable text
Hand position controls
Effective onboarding
UI: Simplicity, Consistency, Visual Hierarchy, Feedback and Responsiveness, Accessibility, Clarity, User Control, Error Prevention and Recovery, Aesthetics and Visual Appeal, Scalability and Adaptability
FND PURPOSE FIRST FOR ANIMATION: limit amount of elements (don't overwhelem user) Simplified and slight timing: 200-500ms ; ease but don't make them wait. Realtime feedback to user.
Gesture/Trigger
Reveal-type animation
Zoom / Silde-in Animation
Help user to learn "how" to interact with Interface...Visual hierarchy (interactions are part of a group of animations) Intutuative experience, validity and unique branding. Signal users of changes or directions of elements. (going back) mental model Because nothing is static- motion animation ....Micro-interactions, "state" changes, animations/interactions...the initial flows were created...user scenario....
Help communicate with users and feel more like the real physical product with feedback and connection within the system and elements. Helps me communicate the Apps theme. Help guide users around interface, alert them of changes, show relationships of UI elements....animaition as a sense of accomplishment...download button icon animation to a green checkmark
Initial research
During the interviews, I gathered evidence for the problem space and an understanding at a deeper level. Next, I considered what this means for project goals.
Primary research included: red route analysis, priority reviews, value proposition, impact matrix, product concepts, design priorities and a UX roadmap.
Whiteboard sessions, features audit and mental models
Experience Audit
Indepth behavior patterns > quantitative data. There is a growing need for a convenient, easy to use, affordable service with fast delivery available form local stores. Deep understanding. Shared what they liked and disliked.
Opportunities for improvement are called out as they relate to the journey, while specific areas for improvement are called out below.
Initial concepts and sketches
I did research to challenge assumptions and uncover user friction points. Determine the best design solutions based on research and tangible evidence. Evaluative research... tree test, card sort, eye track, A/B, etc. Attiutudinal (what they say) /Beahvioral(what they do). 1. Thank of question 2. Gather evidence 3. Consider what it means.
Moodboard
Organic food awareness has been growing has been growing in the last 10 years. The market is now estimated at around $10B worldwide.
The problem
Organic food awareness has been growing has been growing in the last 10 years. The market is now estimated at around $10B worldwide.
UI Flow map
I analyzed 3 of the most popular apps in this space – looking at both the ordering experience and the the negative app store comments to find patterns.
The good:
All apps allow users to search for stores nearby and buy locally.
The bad:
There is no way to see the product before registration (App 1, App3) and there's no next-day or same day delivery option (App 2, App3).
Low fidelity wireframes
I conducted a quick online survey among people who are eco-friendly on Twitter. What: Support call Metric pain points from web analytics and heatmaps. Rich data from user interviews- 'watching' representative users use product, usability: Why. What areas do i need to address first? Solutions for these problems. Treejack
To obtain a baseline understanding of how users viewed the repair request App, I created a questionnaire, paper prototypes and Low-Fidelity wireframes for user testing and research.
CityBike user interviews look at commuting behavior in general via surveys and bike commuting specifically through in-person interviews. Output highlights current user behaviors alongside users’ stated needs.
Part of my goal was to learn more than I knew before I started with research and discovery. I aimed understand usr friction patterns through observation of task-driven testing. I created the F2F research to understand the users, their needs, emotions and behaviors.
What I learned about the user...to make informed design decisions. What I learned from users
User Interviews 2/4 Most people use map features regularly and navigation features when they’re taking an unfamiliar route. Being prepared is important and usually requires too many apps. Infrastructure, not bike technology, prevents people from seeing biking as a viable commuting option. A small subset of riders use apps for tracking their rides. Usually those people track other physical activities as well. Many riders are interested in reviewing past routes but won’t download an app just for that.
Opportunities Immersion / Hypothesis Concepts
Provide on-bike displays that provide information without requiring interaction while riding.
Provide the rider with confidence that they’ll always be able to find their bike, even when it’s stolen.
Provide the rider with what they need to know to be prepared for the journey ahead.
Support both the native who knows where they’re going and the visitor who needs more help getting to their destination.
Balance showing the rider what’s most relevant in the moment with the big picture.
User Needs
CityBike / Connected Bicycle User Interviews Strava Google Maps Dark Sky Cyclemeter Komoot Map My Ride Apple Activity MapOut Buienalarm Weather Underground “I need to know where I’m going and the basics of how to get there.” “I need to be aware of construction and other obstacles to my commute.” “I always check to make sure the weather doesn’t catch me by surprise.” “I like knowing how far and how fast I went.” “I like seeing past routes so I can decide which routes to repeat and which to avoid.” “I need an app that doesn’t take my attention away from the ride.” “I want to see all of my rides in one place so I can compare them and see my progress.”
Experience maps
CURRENT STATE of the interface system. Reduced user bias with experience map by focusing on the problem from valid data. Extracted pain points and user goals: stages in user tasks. Direct quotes, user goals, actions, pain points: Pain point dot voting = top issues. Priority Map/Invert to Goals or benefits "Reduce the need to enter complex data into mobile App" or find an alternative to enter this data. Don't forget to balance business needs with user needs: fixing ones with biggest impact.
Blockframing mid-fidelity mockups
I created two personas based on two types of users for the app: the store owner and the client. Who is the target user? Active observation as a humble apprentice: user quotes = rich/facts. Listened for their goals and how they achieve them with actions..."can you tell me more about that or what you just did...I noticed that you....(explain it to me)"
Keypath Scenario
Indepth behavior patterns > quantitative data. There is a growing need for a convenient, easy to use, affordable service with fast delivery available form local stores. Deep understanding. Shared what they liked and disliked.
High-fidelity Mockup to high-fi prototypes
To outline the necessary app functionality, I created a flow diagram of the main tasks the user can do. One of the flow is shown below. MVP and pivoting to test new (idea) hypothesis, feedback from users, learn from feedback and iterate=build -measure-learn (for improvement).
Information Architecture
Indepth behavior patterns > quantitative data. There is a growing need for a convenient, easy to use, affordable service with fast delivery available form local stores. Deep understanding. Shared what they liked and disliked.
Interactivity and prototypes
MVP: To outline the necessary app functionality, I created a flow diagram of the main tasks the user can do. One of the flow is shown below. Rapid Iterative. Low Fidelity Validation for my UI designs: meet users needs.
FPO: Image of App Flow
FPO: Wireframes
UI consistency and accessibility
Realistic experiences. Once the initial flows were created...user scenario....
I started by defining the font and color structure for design system....
FPO: Color /Fonts/ Icons, imagery , illustrations , Design System, Art Direction, Mood Board
FPO: High Fidelity UI - Interaction Model
Heuristic comparison
Before / After ....Good/ Better
UI design alignment and grid markup, color
FPO: Blockframe
High-fidelity functional Prototypes
Once the initial flows were created...user scenario....
Rapid Prototyping
Accessibility QC
Once the initial flows were created...user scenario....
I started by defining the font and color structure for design system....
bottom of page