User Flow Diagram
What is it
UI Case Study for an e-commerce web-app
Role
UX Researcher
Text Conductor
UI Designer
Tools
Sketch
Figma
InVision
Target Devices
Mobile phones
Tablets
Desktops
My Design Process
1. Project Brief
Problem
People don’t want to go into physical stores these days, and why would they? Online shopping presents a means to find what they’re looking for by typing a few keywords, all without having to take a step, let alone finding the precise store and driving there.
My task was to create an online shopping app with an easy-to-use but advanced filtering system to allow users to find exactly what they’re searching for, even if they’re not fully certain what that is yet.
Solution
The app needs to be clean and sleek, not only was this stated in the brief but it’s also ideal to make an advanced filtering system usable. In order to optimize the customer’s shopping experience and assist them in finding the perfect product, I also needed to include Product Reviews from previous customers and the ability to move items to a Wishlist. This would not only help the customer who may not want to buy the item at that moment but would also serve the business mindset of having a constant reminder of products the customer is interested in, making them more likely to make another purchase in the future.
Who
SHADE provides the full convenience of online shopping for those who don’t want to go into the brick-and-mortar while adding an unparalleled level of ease to find exactly the style of sunglasses the shopper is looking for due to the clean layout and intuitive navigation.
What
This responsive web app gives users direct information on every pair of glasses. It provides a sleek and clean yet detailed filtering system and gives shoppers the ability to have their new pair shipped anywhere and then returned without additional cost iif they happen to not be the perfect fit.
When & Where
Being a responsive web app, users are able to shop at any time, whenever the stroke of need or inspiration hits them. They can shop at home, at work, even while they’re out and about, connecting from any device that has internet.
Why
Looking for the perfect pair of glasses can be difficult and frustrating, but it doesn’t need to be. Allowing shoppers to easily try on multiple options and return any that don’t quite fit removes the stress while still allowing the fun and excitement associated with shopping.
2. Research
Competitive Analysis
Luxury brands such as Louis Vuitton and Gucci and clean, modern brands such as Sunglass Hut, Urban Outfitters, and Warby Parker served for the Competitive Analysis. The luxury brands’ style of minimalism with moments of vibrant color were guideposts for the SHADE brand style.
Urban Outfitter’s sleek, easy-to-use UI elements for e-commerce and filtering provided inspiration for that of SHADE’s, while Sunglass Hut showed ample opportunity in the market for a similar business style but with an upscale feel.
3. Wireframing
User Journey
I mapped the user's journey from the moment they open the app through the completion of placing an order. The boxes with a star in the top corner are those of the main user flow to view a product. The other screens are comprised of the checkout process and ancillary features such as Wishlist, Featured Products, and Account views.
Low-Fidelity Wireframes
Sketches
After planning out the User Flows, I then sketched out all low-fidelity wireframes, planning for the shopping screens as well as the e-commerce screens. I did a few rounds of Crazy 8's where I quickly sketched multiple versions of each screen wireframe and picked the best ones to design further. This practice helped me compare side-by-side the different ways to lay out the designs, and I find it very useful when I'm stuck and not sure how to proceed.
Not sketched here but added later in the process were the Featured, Wishlist, and Primary Home screens, as I realized they were needed for users to perform secondary tasks.
Outlined in red are the main function screens, which were then created into Mid-Fidelity Wireframes below. The rest of the screens sketched here are the step-by-step checkout screens.
Mid-Fidelity Wireframes
Creating UI Elements
Using Sketch, I then created mid-fidelity wireframes. Shown here are the screens for a specific user flow: the user wanting to look through products. I decided the ideal way to display the products was in tile format, fitting 3 to the width of the screen. A later iteration would include a way to allow the users to adjust the view, zoom in to fewer products visible at a time, in order to assist those with lessened visibility. I also included a navigational menu and a filter page and began experimenting with different UI elements to apply various search filters.
4. Testing
Usability Testing
Scenario
You are shopping for a pair of sunglasses; you want to filter your search and add the right pair to your shopping bag.
Results
While I was glad to hear that my app was fairly intuitive and smooth to use, I also gleaned some constructive information.
Issue 1: The order of the main menu to begin shopping felt awkward.
I changed the order of the Shopping Categories so that “All” was on the bottom, indicating that it would include the Sales category as well when selected.
Issue 2: Unable to confirm or reset filters.
I added the much-needed “Apply” and “Reset” buttons at the bottom of the Filter screen.
Issue 3: Confusion over menu icons.
Although the icons for Shopping, Account, Bag, and Wishlist were pretty easily understood, the Features icon was not, so I made the decision to add labels under all Navigation Bar icons.
5. Design
Branding
Once the usability issues were resolved, I dove into designing the brand guidelines that would be followed throughout creating the high-fidelity wireframes. SHADE is a luxury online sunglasses source. With that in mind, I styled the brand to be sleek, modern, and sharp.
Original and final iterations of the Product and Filter screens.
Iterations
Through the course of applying UI Design to the screens, I created a few iterations to find the best style that would fit the brand. On the product screen, I changed the style of the Color Samples to make them feel more modern. I also adjusted the layout of the Product Screen to center the information, making the information easier to read and creating more focus on the important aspects. I also created lines to better section off groups of information and generally worked to make it more visually appealing.
Not only did I add background color on the Filter screen to help it feel like a pop-up when opened, but I also adjusted the style of the various Filters’ UI elements to be similar to styles users have seen in other apps and therefore more intuitive.
High Fidelity Wireframes
You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.
Prototype
6. Review
Challenges
I found it difficult to imagine building an advanced filtering system while also making a sleek and dynamic design, not cluttering the screen. By doing more research and looking into the strengths and weaknesses of other, competing companies’ filtering designs, I was able to find improved, more usable UI elements.
Designing a Home Screen to be simple yet grand, with the focus on one item and not overrun by other information, presented another challenge. The singular Shop button on the mobile screen and the simple navigation on the desktop screen allows for the consolidation of information to make the design more elegant.
Takeaways
Conducting SWAT analyses and Usability tests garnered the best results for creating a design I was unfamiliar with and then improving my design decisions. I was set on making everything black-and-white originally but then changed direction with that by adding bits of color and decorative flare to add some youth and versatility to the brand. Having received no guidelines on style or even product before creating SHADE, I am happy with the direction I took it in, but if I had to do it again I would go for a more soft and rounded approach.
What's Next?
The next steps would be to create a prototype and perform testing on users to find out what they think. This would not only create a better understanding of the app's usability but also how visually appealing users find it and determine if any more elements or filter options need to be added before turning it over to the development team.
Thank you for reading my Case Study!
Please contact me if you have any questions or are interested in working with me!