Case Study
Research | UX/UI Design/Branding
Background
Reflekt, a clothing store started in 1994, targets an audience looking for low-cost, accessible fashions.
While successful offline, with over 400 stores around the world in 32 countries, they are late in the game for a digital transformation. A digital storefront is more convenient for customers, more “mainstream” with current trends, and would allow Reflekt to move remainder inventory more easily.
Role
End-to-end UX/UI designer (including research and high fidelity prototyping).
Objectives
Identify what current users expect from a digital shopping experience
Learn common issues people have when shopping online.
Timeline
April 2022 - June 2022
Research
In beginning my research, I mainly set out to explore what leads people to shop online, rather than in-store, and what difficulties do people face in online shopping? The main methodologies I used to start the foundations of my research journey included competitive research analysis, surveys, and user interviews.
Competitive Analysis
I started with a competitive analysis of both direct and indirect competitors in the fashion retail space. Competitors mostly target the same demographics as Reflekt and have similar “styles”, so learning from their mistakes and successes would be quite valuable in building a digital space.
User Interviews
I recruited a mix of three different participants for user interviews, ranging from ages 22-59. I used a semi-scripted interview method, mainly trying to get a feel for whether they prefer shopping online or in-person, what sort of stores they shop at, and are some frustrations or benefits that come with their preferred method of shopping.
Key Findings - Goals and Needs
Most participants found fashion and their personal style to be important to them. A shopping experience that allows them to find this with a good fit and an easy process was the ideal.
Being able to see details of the clothing through images online or in real life was important to get a sense of what the clothing was like.
All participants highlighted the need to find clothing within their price range as a motivating factor on where they shop.
Current trends are somewhat important to most shoppers.
Key Findings - Motivations and Frustrations
One negative factor of shopping in-person seems to be dealing with crowds or dealing with a commute. Most participants in the survey (62.5%) stated that they prefer to shop online.
Sizing can be the main factor that motivates those to shop in-person. There was a need for more accurate sizing charts.
Younger users seem to take into account trends and style more against finding clothing for solely practical purposes.
Shopping consists mostly of browsing through clothes. Most people don’t have a strong idea of what they’re looking for.
Define
User Persona
Based on demographic research and interviews, I was able to synthesize a user persona based on one possible user Reflekt would want to reach.
Ideate
Card Sort
I used OptimalSort to create an open sort consisting of 20 cards labeled with different clothing items. I wanted an open sort to get insight into how people would organize very simple items, and to see what I could pick up on into creative ways of sorting clothing on a website.
I had a total of 4 participants, ranging in ages from 24 to 52.
Site Map
Based on analyzing competitor websites, user interviews, and card sorting, I created a site map for Reflekt. This would help to prioritize pages, build on my navigation menu, understand information hierarchy, and determine potential user flows.
Task Flow
The primary task I wanted to focus on for my flow was on finding an item and purchasing it, as this would be the standard procedure for a retail site. This task flow focuses especially on how to get through different categories and menus, though in retrospect, this example might be more detailed than was necessary.
Design
In approaching the initial design for Reflekt, I wanted something that would be simple yet expansive. The layout should seem minimal, while the user should be easily able to find almost any clothing item they want for any occasion.
Initial Low-Fidelity Sketches
While there isn’t a great deal of variation between my initial homepage sketches for Reflekt, I wanted to play around with different features that could catch interest, such as organizing clothing by trends or specific occasions, or having a feature to show users wearing clothing in their daily lives to connect better.
I ultimately went with a combination of some of these layouts.
Homepage Sketch 1
Homepage Sketch 2
Homepage Sketch 3
Mid-Fidelity Wireframes
Expanding beyond the homepage for my mid-fidelity wireframes, I chose to focus on the tasks of browsing for an item and adding it to the shopping bag. My design is based on competitor analysis as well as user research into what features are most crucial.
Homepage Wireframe
Category Page Wireframe
Product Page Wireframe
Bag Page Wireframe
Prototype and Testing
In the prototype and testing phase, I was able to expand my screens to give a more complete experience to the task of browsing and checking out a specific item. My specific design was based on a minimal and calming aesthetic, as highlighted by the lighter colors, heavy use of blue shades, and thinner lines. Below, I’ve included some samples of what frames from my initial prototype looked like. Categories are meant to be largely easy to find, while still being detailed and filterable.
High Fidelity Wireframes
Category Page
Product Page
Shopping Bag Page
For testing, I built a more fully fledged desktop prototype for the task of checking out, using Figma. My participants were three different users from the ages of 22-59, all familiar with online retail shopping. I conducted these tests both in person and through video calls, in which I observed all users navigating through the prototype, while asking them to describe their thoughts to me throughout the process. Additionally, I’ve added a link to the initial desktop prototype through the button below.
Users did not overall have too many issues with flow for finding and purchasing items
Might possibly need to work on categorization, as one user felt confused about where blouses might be
User 2 had no issues, but felt footer and some aspects of site could be smaller in scale
User 3 felt some more information could be added, such as explanations for AfterPay, more specific text, and a specific CTA button for the newsletter. Liked the aesthetics of the site.
Key Takeaways on Testing
Based off user feedback from the testing stage, I created an affinity map to see where my priority revisions were, and made updated iterations of the desktop prototype. I’ve highlighted some comparisons.
Revisions
Footer
The footer was the most noticeable change in visual design for the prototype. Per user feedback, I made the footer smaller in height, and added a more proper CTA “Sign Up” button for the mailing list.
Before
After
Thank You Page
For this page, I also added an extra CTA button for the user to sign up for newsletters or alerts.
Before
After
Checkout Page
This was a minimal adjustment, but I added explanations for Afterpay for any unfamiliar users.
Before
After
Final Thoughts
Overall, for this concept fashion retail website, I felt that the flow for filtering through products and checking out was largely successful, due to ease of navigation for users. There were some changes necessary to enhance the visual design, but the Reflekt site achieves the necessary aesthetic. If exploring this concept further, it could be interesting to build different flows, and iterate and test from there.