All You Clothing

RESEARCH

Interview Findings

Because All You Clothing was successful with their storefronts, I needed to understand what attracts and deflects users to shop online. I began my process with interviewing participants who shop online on a regular basis. My objectives were to discover the likes and dislikes from each participant and put together the common answers:

• No need to socialize and wait in line
• Images of people wearing the clothing to inspire complete outfits and display different body types
• The convenience of being able to shop from their home.
• Organized website with a variety of filters to choose while searching
• Frustrated when the site displays a lot of out of stock items
• Dislikes deceiving photos that are photoshopped or when clothing is clipped to fit a small model

Secondary Research

Based on The Hartford, there are great benefits to having a website for a retail storefront. Here are some beneficial points that I felt resonated with this project:

1. Creating a presence where you can extend your reach to anyone in the world.
2. Point of contact. This will provide customers an easy way to contact a business.
3. Leveraging social networks. In this day an age a social presence is the key to success for business. Allowing users to find your website through social connections.
4. Most importantly, selling your products online creates a virtual store as an alternative or even complement the storefront

IDEATE

Site Map

The next step I did in my process was to create a site map which was conducted using the card sorting method. Most ecommerce sites either have too much on the navigation or have too little. I wanted the navigation to be as streamlined as walking into the store itself.
‍

Now that I had an idea of what site map would look like, I created two user task flows for participants to do during my testing phase. Both tasks require the participant to look for a specific product, add it the shopping bag, and complete the checkout process.

However, after creating the first task I assumed that All You Clothing would have a lot of returning customers. Returning customers would like to view their past orders, also this could benefit the company to track who their customers are. So I expanded the checkout process allowing the user to make a choice to either checkout as a guest or create an account.

Sketches

Besides this phase, I also created preliminary sketches for the homepage. I'm convinced that for ecommerce sites, the initial impression made by the homepage is pivotal. It not only establishes the brand's identity but also determines whether users will return or proceed further. Similar to many physical storefronts with display windows that offer glimpses of what's inside or what's new, I aimed to replicate that allure by prominently featuring a hero image.
‍

DESIGN

Mid Fi Wireframes

After selecting the homepage sketch that seemed most effective in capturing attention, I began developing mid-fidelity wireframes. These include the homepage, product results page, and product preview. My goal was to ensure that every element was prominently visible for ease of access. For instance, on the product preview page, users can view each image on a larger scale.

Design System

In constructing this UI Kit, my aim was to anchor the brand identity in neutral earth tones. Given that the brand showcases inclusive imagery, it was essential for the design system to resonate with a sense of authenticity and 'naturalness'. Moreover, I intended for the products to be the focal point, rather than the website itself. I sought a welcoming ambiance for the website, opting for a subdued palette instead of bright color bursts.

High Fidelity

Below are the initial high-fidelity designs crafted using the design system.

TESTING

I initially thought of testing the mid-fidelity wireframes first. Yet, my core vision centered on emphasizing inclusive photos and a natural color palette. I aimed to assess the complete user experience. Thus, the subsequent phase involved integrating the design system into my wireframes to craft the prototype. Once the prototype was ready, I enlisted 8 individuals for testing. My goals were to evaluate ease of use, navigate the interface, identify any pain points, and gather feedback on the branding.
‍

Results and Revisions

From the affinity map, distinct patterns emerged. Several users highlighted the font choices, feeling they were misaligned with the overall aesthetic. Older participants expressed difficulty navigating the steps and hoped for a more accessible UI. It became clear that the primary concerns revolved around the UI design. I prioritized these adjustments and, after implementing them, retested with some of the initial participants, successfully addressing the highlighted issues.

Final Prototype