UX/UI Design Case Study

OVERVIEW

Western Wanderers is a responsive web app designed to make it easy and efficient for customers to find desired western wear.

Purpose + Context

Western Wanderers is one of the final projects from the UI Immersion course from Careerfoundry. The project focused on creating a mobile and web version of the app.

Objective

You’ll often find your folks who have love for western wear live out in more rural areas. Western Wanderers is designed to help customers find key items without going to a physical store whether they’re in the city or out in the country. They can shop from their mobile device or desktop. WW has made shopping from home easier by allowing users to access advanced filtering options and to save desired items to a wish list.

My Role

My role was to develop the UX/UI design of Western Wanderers. I conducted research, created user flows, developed wireframes, created prototypes and final mockups.

MY APROACH

Research

I researched mobile and desktop versions of both western wear and contemporary fashion companies. It was helpful to see how various fashion companies displayed their products and how their UX/UI played into the shopping experience. The brands I researched were; Cavenders, Boot Barn, Forever21, H&M, and Urban Outfitters.

User Personas

Based off of my research, I was able to create 3 user personas for our fictional wanderers. These fictional personals helped me tailor design solutions for WW.

Brett, 58

Brett is a rancher who lives in rural Idaho. He is a genuine, stoic, hard-working man. The closest city to him with clothing stores is 2 hours away. Brett enjoys quiet nights in with his wife, livestock shows, and fishing. He does not get to venture away from his home very often because he has to tend to ranch work.

GOALS: Purchase desired products without traveling into town, a fast and easy-to-navigate shopping experience.

Roxy, 32

Roxy runs a nonprofit organization for abused animals in her hometown of Billings, Montana. She ambitious, down-to-earth, and very outgoing. Roxy enjoys hosting friends, taking care of her animals, and being in the outdoors. She is very busy running her organization and prefers shopping online.

GOALS: Efficiency, stylish clothing + accessories, filter features to make shopping easier.

Shya, 24

Shya is a fashion blogger/single mom living in Denver, CO. Shya is funny, passionate, and creative. She enjoys creating content for her brand, time with her daugter, and baking. Shya works hard to create quality content for her blog but values time with her little girl the most.

GOALS: Efficiency + ease, finding exactly what she needs without going into the store, wishlists to organize desired products she may want to purchase in the future.

User Flows

Based off of my research and user personas, I was able to define the user’s goals. I created 2 flow diagrams illustrating key functions the users will need to complete their goals.

Low-Fi Wireframes

I started out by sketching Low-Fidelity Wireframes of the IOS mobile version of the app.

Mid-Fi Wireframes

I digitized the Low-Fidelity Wireframes in Sketch turning them into Mid-Fidelity Wireframes.

Prototyping

I created a prototype using Sketch where I linked art boards together targeting their hotspots. I had three different users identify pain points in the app. I corrected pain points that were of the highest priority.

Visual Design

Before developing the High-Fidelity Wireframes, I established my visual design direction for Western Wanderers.

Mood Board

The design direction of Western Wanderers embodies a down-to-earth rustic vibe you would find in the countryside.

Color

Western Wanderers uses muted rustic earthy tones. The colors embody a sense of sophistication and ease.

Typography

Icongraphy

Elements

Hi-Fi Wireframes

Establishing the design direction of Western Wanderers guided how I designed the High-Fidelity Wireframes.

Challenges

I find it challenging to not “over-design”. Keeping the app simple in its functions is essential for the user to be happy. There were some screens that were challenging to design because there is so much information needed, but the goal is to keep it clean and easy to navigate.

Final Showcase

Takeaways

For a second iteration, I would love to create more user flows that would make the app easy for customers to use. I would like to create screens that show the checkout process, hamburger menu, reviews, and the user profile.