Summary
Our objective was to design a website for an online clothing company. Product: “rugged, moderately priced, will last a long time” shorts, t-shirts, jackets, and hats.
My Role
I was one of two designers on this project. I was responsible for the personas, task flows, and wireframes.
Research
Competitor Analysis:
Common Themes:
Simplistic Color Scheme- White Background
Identical navigation and layout
Content arranged in one central column
Logo in upper left- most prominent position
Dropdown-style menus
Large images featured on home page
Site Development:
Major Considerations
Competitor analysis reveals certain conventions that are common across most single-brand online retailers. Consumers expect content to be laid out in a particular way and certain design conventions to be present. Our design should follow these conventions whenever possible. A wildly different or new layout may lead to customer confusion about the navigation, a pain point which should be minimized. Also noted is the visual nature of garment shopping. The site should feature prominent imagery as the primary conveyor of information to the consumer.
Process:
The design of the site will be shaped by observations of competitor websites and also through feedback and observation of consumers’ online shopping activities. Based on this initial observation, sketches and wireframes will be produced and then refined via usability testing. This feedback will inform the team of possible deficiencies in the design and will allow for a more useful site for consumers.
Main Categories Needed:
The items available for sale should be organized by target user of the clothing. For example, the main navigation should include links for Men, Women and Children. Furthermore, competitor analysis revealed the convention of organizing product by type of article as well. Therefore, the site navigation should also have direct links to each type of apparel (e.g. shirts, shorts, jackets, and hats).
Users, Tasks, Personas
Users: Characteristics: Hunters, campers, hikers “Outdoorsy”
Those looking for quality of quantity. Similar to eddie bauer and ll bean
Quality, Quality, Quality. Educated. Computer literate
Smartphone, tablet, and desktop users.
Smartphone for searching, desktop for purchasing.
What are the users looking for:
Small, single purchases
Wholesale (potentially) Fast ordering
Personas & Tasks: Cora 27 years old Female Single, no children Small business owner, Educated “Outdoorsy”
Cora is looking for clothing for an upcoming camping/hiking trip her and her friends are taking. Cora cares about the price, but will pick quality over price. She believes “you get what you pay for”. She will do a quick search for a deal or promo code, but won’t spend hours or days searching, if it doesn’t come up with a simple search she will still make the purchase. She has been to the clothing site and has made purchases. She has an account.
Cora’s Flow: Landing/Home Page > Product Detail (Direct Link from Featured Content) > Add to Cart > Continue Shopping >Product Details > Add to Cart > Check Out (Sign into Account) > Shipping > Billing (added Promo Code) > Confirmation
Martin 39 years old Male Married, 2 children Business professional, executive
Martin is a coach for his son’s sports team. He is looking for uniforms. He cares about convenience, He wants to be “in, out and done”. He is not worried about deals or the best price. He wants a name or brand he recognizes. Martin does not have an account on the site. He will use the site as a guest. He does not care to create an account.
Martin’s Flow: Landing/Home Page > Product Gallery (T-shirts, Side Site Navigation) > Product Details > Check Out (as Guest) > Shipping > Billing > Confirmation
Conclusion
Simplicity: The main page for the site is organized in a single column, which translates to less time spent trying to locate information on the page. The main site navigation utilizes simple, obvious links to direct users to different content areas.
Familiarity: Based on our competitor analysis, a navigation design similar to our competitors was utilized. Given that certain layout conventions such as a single column of main content and a fixed navigation layout are features of all our competitors, the team decided against re-inventing the wheel with a new layout that would be unfamiliar to a customer.
Recognition: Each clickable item on the site is designed to be obvious. For example. Clicking on a picture of a shirt will take the customer to a more detailed description of the shirt.
Flexibility: The page is designed with large areas of white space on either side. This allows the page to be resized to a half-screen and still be fully readable without changing the scale of the content. This also aids in readability when switching to a phone or tablet view of the site.
Feedback: Clicking on an image opens a popup window with a more detailed description of the item in question. Furthermore, when proceeding through the checkout screens, the user is given visual prompts to let them know what action has just been taken.
Safety: The site allows for users to sign in and shop with saved settings and information, but it also allows for guest checkouts, where their information is taken once for the order and not saved.
Empathetic UX Designer | Crafting Inclusive Digital Experiences That Drive Meaningful Impact
Kellyn von Arx © 2022. All rights reserved.