Fragrance Mobile App
As part of my UX CoderGirl class, our assignment was to create mid-fidelity to high-fidelity interaction designs for a mobile app that people use to buy, research and review perfume.
Required Screens:
-
Login screen
-
Home screen displaying numerous products
-
Product details page or pages
-
Checkout / Cart flow
-
Profile & Settings area
-
Bonus: Create an onboarding flow
In a brainstorming session in class, I created these two separate low-fidelity wireframes for the home screen. These were based from my personal user experience navigating through apps and websites.
With minimal experience designing for a mobile user experience, I read articles from Medium, UX Planet, and Nielsen Norman Group to familarize myself with limitations, strengths, and best practices for mobile platforms.
CHALLENGE
-
I began to feel overwhelmed with the do's and don'ts of mobile UX design
-
There were numerous design tools and techniques listed in the articles
My teacher said his go-to method for iteration was paper prototyping; it's efficient, quick to produce, and isn't distracting. So I sat down and started sketching out wireframes, drawing inspiration from perfume and retail websites as well as my own user experiences. These low-fidelity sketches cater to specific screens for the assignment which include a forum, perfume rating, and perfume review screen.
RESULT
-
I found that starting the design process at a macro level helped me tremendously
-
I was able to get my ideas on paper and get feedback from my classmates which helped me refine my thinking
-
These sketches communicated a visual idea and set the groundwork for the next phase: designing in Adobe XD
In order to create a clickable prototype, I translated my sketches into mid-fidelity wireframes, keeping in mind that they had to be semi-functional. I created the five required screens for the class assignment and ran into a few obstacles.
CHALLENGE
-
Due to the complexity of the product, creating one screen actually produced an additional three to five task-flow screens
-
I often asked myself, what kind of relationship did I want the user to have with the app? Was my design biased?
RESULT
-
I was able to determine what elements were working in the layout and the constraints that would definitely impact the user experience
-
Designing the functionality and content required stepping back to look at the bigger picture, rather than the design details
