top of page
UX Design Agile-Sprint Cycle
A healthy approach to e-commerce
- attention detail
- hierarchy strips
- designs based on research not a hunch
- case study is a story:Problem > Solution = solved with Design / Milestones of project
- frame the problem as if you were talking to a friend
- NOW use photos of yourself or Emoji to Help visually tell the story.
Usually 5 steps plus images of person with app etc. - images taken is much easier to follow in case study. Diaognose the problem to fix
Competitive research
Competitive analysis
Persona
Wireframes
User surveys
Flow diagrams
Mini usability studies
Low fidelity mockups
Hi-fidelity UI
Prototype
Design system
Heuristic evaluation
UI Accessibility
Company/When
What
Why
44 pt square for icons (icon fits half
40- 44 - 48 pt h button size
consistent fonts: avoid thin or light fonts between 12( or 14-16) - 24 pt + 40pt for important
Alignment! Buttons especially (an action) = red square method
white space (extra "w" for measurement)
Colors: 60/30/10 White/dark color/accent/and or accent #2
Colors: 70-80% of color spectrum range
ICONS must be in same design set! Corners, rounded, stroke, color, etc. must be consistent
Blockframe= simple / color representation (not wireframes)
Red square method= based on 8 pt grid 16x16, 24x24, 32x32
32pt for mobile app frame margin
Card inside = margin 24pt
Analog Devices
Mar 2022-Jun2023
Mobile App (iOS)
Portfolio Spec Project
Role
Category
UI Designer
E-commerce. Food&Drink
Software
Figma, Axure, Photoshop, Illustrator, Bravo Studio
Agile= delivering a slice(s) of the pizza / MVP ...for feedback (every 2 weeks). Adapt within Scrum Sprint framework.... "EPICS" (high-level)>User Stories (story about types of payment etc + alternative payment methods (all the details) ..Ex. Epic=A website Checkout Path and then lower level like: Create Acct., Payment Info., Review-Submit. Kanban. LEAN= Think+Make+ Check
Why I made this project
I’m a big fan of organic, healthy products. This app has a purpose of allowing people to easily find and order from local organic shops around them. Design a user centered website experience. Meet core users needs and helps them to be more productive and happy.
DISCOVER
Market research
I did generative research to uncover pain points and give real value to the user. 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.
The claim
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.
DISCOVER
Competitive analysis
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.
App 1
App 2
App 3
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).
Problems from the comments
I can't browse products before creating an account - no idea if it's worth it!
John
I needed something for Tomorrow and the closest delivery was in a week...
John
Because of the app I found a local store nearby that I can simply go to by foot.
John
DISCOVER
User survey
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
What's the most important factor you take into account while eco-shopping?
23 participants
Price
25%
Convenience
34%
Delivery time
31%
Other (please comment)
10%
Notable comments
I can't browse products before creating an account - no idea if it's worth it!
John
I needed something for Tomorrow and the closest delivery was in a week...
John
I needed something for Tomorrow and the closest delivery was in a week...
John
Initial research shows
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.
DEFINE
Target personas
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)"
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.
DEFINE
Ideation & sketches
Explored different sets of potential, novel ideas and refined these for my new designs. with focus on user pain points and user centered goals. Got reality checks by referring to the personas and explored different alternatives. Internal Design Workshops using Design Charrettes and Possible Furtures Brainstorming techniques. to synthesis. Informed decisions based on data. 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:
User scenarios & storyboards
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. Storyboards= shows user needs, design concepts, input conditions and outputs in UI. User's needs are meet by these purposed solutions.
I have ideas to remove pain points flush out solutions into Scenarios and storyboards- make solutions useful, viable and useable,. Understand how my ideas will work in reality. = creativity tempered with reality workable interactions, prevent errors, user behavior. meets goals, users needs and closer to true design solutions.
Paper prototypes
Worked through the scenarios one by one; allowing persona to perform that task: Minimalist constructed...fast to build and fast to change...for usability testing.
User-centered planning
Metrics demonstrate the value of my user-centered design methods and removes user pain points:
Efficiency: 20% faster input
Effectiveness: 50% fewer data errors
Satisfaction: moves from a 3/5 to a 4/5 star rating
Prioritize minimum-majority and absolutely neccesary requirements, goal setting-metrics, easy to track B measure success with usability tests /system metrics. Most important features first, Created a STORY MAP with requirements for NEW STATE with priorities. Nice to have features were lowest on my priority list. Build> get feedback(goals/metrics) . A/B
BUILD
Flow diagrams
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).
BUILD
Lo-fidelity wireframes
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
FPO: Blockframe
BUILD
High-fidelity UI & Design
Refine and build -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
24 high-fidelity designs were created
UI design alignment and grid markup
Accessibility check
Once the initial flows were created...user scenario....
I started by defining the font and color structure for design system....
BUILD
Prototypes
Once the initial flows were created...user scenario....
Rapid Prototyping
METRICS
Usability test
Usability metrics
What does success look like and how to measure it. Efficiency= time to complete task, satisfaction=happiness with system, effectiveness= reduction in user errors. Ex. User take 20% less time to complete tasks with new system / process compared to older system. 50% or no data entry issues. New version of App and user satisfaction goes from 3/5 to 4/5 review stars. or user churn.
The New Romantic
Change the text and share something about the collection you would like to feature.
The New Romantic
Change the text and share something about the collection you would like to feature.
The New Romantic
Change the text and share something about the collection you would like to feature.
Project Logo
Quick Sub copy
Type: Web-mobile App UX design sprint
Design Brief
Problem Statement
Possible Solution
My Role / Tools Used
Research / USability test; User tested the AP AN SHARED WHAT THEY LIKE AND DISLIKED
RESEARCH- IDEATION- HEURUISTICS - Competative audit
Design Sprint Problem to solution
Day1 Map
Day 2 Sketches
Day 3 Decide / Affinity Map
Day 4 Prototype Grey Scale Wireframes Proto
Day 5 Test High Fi Protos
Resources
At Folio, we’re passionate about UX design and strive to provide our customers with the best possible user experience.
Resources
At Folio, we’re passionate about UX design and strive to provide our customers with the best possible user experience.
bottom of page