Home
A comprehensive case study on revamping the online shopping experience for a Virginia-based fashion startup, focusing on mobile optimization, brand identity, and user-centric design.
Working in close collaboration with the Alas Eius team, I refined the brand's visual identity, crafting strategic content, selecting impactful imagery and branding that authentically represents their unique style. My design process focused on creating an online experience that not only mirrors the in-store ambiance but enhances it, offering customers a cohesive brand journey across all touch-points.
July 2024
UX Designer & Researcher, Brand Designer
Alas Eius (Client) & I
Figma
Maze
Bookshare, IOS Application
June 2024
UX Designer & Researcher
Project Manager, UX Academy Group Crit Members
Project Manager, UX Academy Group Crit Members
85% of website traffic comes from mobile devices, but these visits rarely convert to online sales.
The current website has some usability challenges that impact user satisfaction and trust. Visitors may find difficult to locate important information, such as store hours and addresses, which can be frustrating. Additionally, some areas could benefit from improvements, including navigation clarity, information hierarchy, image quality, and the inclusion of product reviews. Addressing these areas would help create a more cohesive user experience, making it easier for potential customers to find what they need and make informed purchase decisions, ultimately supporting online conversions.
👉 Design a responsive website optimized for mobile use that allows users to shop products, understand basic policies, and find vital information.
Using various research methods to understand and empathize with the user's needs, frustrations, and goals.
To gain insights into Alas Eius's position in the online fashion retail landscape, I conducted a comprehensive competitor analysis. This involved examining websites of similar vendors, identifying common features, and assessing strengths and weaknesses across the market.
To gain deeper insights into online shopping behavior and pain points, I conducted a two-pronged approach:
These provided valuable information about women's preferences and behaviors in the e-commerce space. I analyzed and mapped the recurring themes, which informed subsequent design decisions.
Users said things like:
"Women's sizing is so unpredictable. You never know what size you'll be from one brand to another. It's frustrating and makes online shopping a real challenge."
"Shopping can be overwhelming. Not only do I struggle with finding the right fit, but I also find it difficult to know how to style different pieces together. It's like solving a puzzle every time I want to update my wardrobe."
Next, users interacted with the existing Alas Eius website, allowing me to identify specific usability issues which I recorded observations and mapped common themes.
Users said things like:
"I really like the colors and fonts. Looks nice, but when I try to use it, it's not nice. I probably would not trust this brand based on the website not working right, and would ultimately decide not to buy anything."
"I really like the colors and fonts. Looks nice, but when I try to use it, it's not nice. I probably would not trust this brand based on the website not working right, and would ultimately decide not to buy anything."
Synthesize insights from previous research to establish high-level objectives and develop a strategic plan for the Alas Eius website redesign.
⚙️ How?
Based on user interviews, client collaboration, and Shopify business data analysis, I developed two distinct user personas representing the Alas Eius clientele.
After identifying the target users and their objectives, I developed a feature prioritization roadmap. This roadmap focused on implementing the most crucial features first, considering factors such as feasibility, alignment with user personas' needs, and consistency with the overall project goals.
While many potential features were appealing, I concentrated on those that would be most essential and impactful for the initial implementation.
After addressing the crucial questions of who I'm designing for, roughly what I'm designing, and why. I proceeded to determine how this vision could be brought to life.
The first step in addressing the website's usability issues was a complete overhaul of the information architecture. The existing site suffered from unclear labeling and poor organization, leading to user confusion, particularly with navigation copywriting. By restructuring the information hierarchy and improving navigation labels, we aimed to create a more intuitive and user-friendly browsing experience.
After establishing the website's structure, I prioritized key user tasks. While the checkout process is crucial, Alas Eius uses Shopify, which provides a seamless integration. Therefore, I focused on other vital tasks that lead to sales or address customer inquiries.
I began by sketching various layout concepts. In collaboration with the client, we decided to incorporate motion/video elements in the hero on the website to enhance visual appeal. Layout 3 emerged as the preferred option due to its ability to showcase multiple focal points in the hero section, accommodating both a static image and a video element.
I developed low fidelity mockups focusing on mobile design, given that smartphones account for the majority of website traffic. Testing was conducted using Maze, with audio and video recordings of testers for later analysis. Users were asked to rate usability and provide direct feedback. This phase specifically targeted the evaluation of information architecture and layout, without incorporating visual elements or branding.
Design considerations included:
After sketching out the basic structure and my low fidelity wireframes were validated with users, I shifted focus to the overall branding and visual identity.
⚙️ How?
In close collaboration with the client, we established the foundational elements of Alas Eius's brand identity:
Colors: Incorporated client & user-preferred beige and green hues. Added a lighter black for cohesion with in-store aesthetics, and a yellow accent color inspired by a distinctive store chair for highlighting key elements.
Typography: Retained Avenir for its clean appearance. Expanded usage of Avenir with multiple weights to improve readability. Paired with League Spartan for a modern and bolder complement for headings to improve hierarchy.
Logo design: Alas Eius means “her wings” in latin. The existing logo was an abstract wing, but the client wanted to change it up slightly from the traditional version. I took inspiration from Loewes logo, incorporating an a+e to look like a pair of abstract wings.
Imagery and overall feel: Aimed to capture the store's earthy, light ambiance while balancing the moody, dark elements of the clothing. Overlays of the black color, at 40% opacity was added to convey moodiness, as well as lots of imagery and photography with motion, taking lot’s of inspiration from ready-to-wear brands like The Row.
After finalizing the design colors and branding elements, I moved straight to high-fidelity wireframes for both Desktop & Mobile.
With the high-fidelity wireframes prepared, the next step was to validate my assumptions regarding the task flows. I used Figma to craft a click-through prototype featuring basic interactions and animations (I tested mobile version).
5 participants were recruited for remote testing sessions via Zoom, where they shared their screens and I recorded them for later analysis.
As they performed key tasks, I collected quantitative metrics such as Average Time on Task, (ToT), success rate, error count, and overall usability rating from the user. (1 being hard to use, 10 being easy to use) Additionally, I gathered feedback on each task to gain deeper insights into the user experience! :)
Shop by the Designer Alas Eius
Locate the Perfect Sweatshirt in Cream (Bestseller)
View Return/Refund Policy
View Address & Store Hours
User tasks received near-perfect usability ratings (approximately 3/4 tasks received a 9/10 out of a possible 10/10) for all tasks users appreciated the clean design and ease of use. The earthy color scheme and straightforward buttons created a positive first impression. Users felt comfortable and secure shopping online due to clear store location and hours information!
While users easily identified the site as a women's fashion retailer, they struggled to recognize Alas Eius's unique offerings (own label, pre-loved luxury items, other designers). They also noted that the reviews didn’t seem to have enough imagery/information.
With all of this usability testing data and user feedback, it was time to think of ways to alter the design to better fit the needs of users.
Added a pre-loved section to the homepage, along with a larger and more prominent card for the Alas Eius Label, making the brand's identity clearer at first glance.
Implemented a user-driven sizing guide: includes measurements in product reviews. This approach, inspired by successful rental clothing companies like Rent the Runway and Nuuly, helps address the complexities of women's sizing - a common concern raised in initial user interviews. Users can optionally provide this information when reviewing items, enhancing the value of reviews without storing personal data in user accounts. (Further testing is planned to gauge user comfort with this feature, and also integration in an input setting)
Added luxury designers within the Shop By Designer page, with the indication that the stock of that given brand is pre-loved through overline text.
.png)
.png)
The project was incredibly rewarding. The result is a significantly improved e-commerce platform that not only showcases Alas Eius's unique offerings but also provides a delightful and efficient shopping experience for their customers.
The process of balancing the client's vision with user feedback while employing creative problem-solving techniques was particularly fulfilling and also challenging and made me learn and grow a lot as a designer!
Post-launch plans include ongoing refinements and implementing the next features on the roadmap to enhance user experience. Key focus areas are:
Thank you for reviewing this case study! For questions, discussions about my work, or suggestions, please email me at hi@kenziefitzpatrick.com.
