End to End Application
Wulfka
Project Overview
Understanding E-commerce Shopping Habits
Duration
Four weeks
Tools
Figma, Parrot AI, Maze
Deliverables
Research, product design, UX/UI design, concept, prototype, and testing
Problem
Designing, owning, and operating a small sustainable fashion business presents a number of challenges, particularly when engaging with customers who have been trained to expect the quality and price points of fast fashion produced by slave labor. From the customer standpoint, it can be very difficult to shop online with a clear understanding of what the clothing will look like on an extremely wide variety of body types.
Solution
Wulfka is a well-established Chicago sustainable fashion brand owned and operated by Kate VanAsten. The hypothetical Wulfka app was designed with owner and customer needs prioritized featuring elements such as detailed filtering options, and detailed model measurements and size charts. By promoting sustainable, long-lasting garments designed for sizes XS-4XL, Wulfka can increase sales and repeat happy customers.
Understand
User interviews
Affinity mapping
Personas
Define
Competitor analysis
Problem statement
Feature roadmap
Ideate
Site map
User flows
Low-fidelity wireframes
Composition exploration
Design
Style guide
High-fidelity wireframes
Prototyping
User Testing
Research plan
Insight indentification
Ideate
Finalize design
One of Wulfka’s greatest assets is its commitment to sustainable, comfortable, and size inclusive fashion. By examining the offerings and practices of fellow sustainable fashion brands, it was possible to put together a comprehensive analysis of common strengths and user frustrations.
Competitor Analysis
Market Analysis E-commerce Sustainable and Extended Size Fashion
Big Bud Press
Has an app
Extended-size inclusive
Handmade
All natural fibers
Large inventory
Sustainable
Anna Brown
Has an app
Sustainable
Handmade
All natural fibers
Large inventory
Extended-size inclusive
Eloquii
Has an app
Sustainable
Handmade
All natural fibers
Large inventory
Extended-size inclusive
Altar PDX
Has an app
Sustainable
Handmade
All natural fibers
Large inventory
Extended-size inclusive
Following a preliminary interview with Wulfka’s owner, and 6 interviews with sustainable fashion shoppers, it became clear that there was a lot of overlap in shared values and goals. Every shopper interviewed indicated that shopping small was an important value, they prioritized the importance of filtering options, and shared that a smaller inventory was an asset, not a hindrance.
User Interviews
Understanding Patient and Provider Needs and Frustrations
50% of shoppers interviewed said that being able to filter for specific details and/or styles was very important
5 of 6 shoppers said they wanted judicious notifications. The type and frequency desired varied by person
Seeing clothing on various body types is extremely important to both shoppers and Wulfka’s owner
A common problem is knowing whether or not out of stock clothing is available for one-off purchasing
01
02
03
04
By distilling the specific needs of users into personas that focus on the target demographics, essential features come into focus, such as easy scheduling, inclusive language and filtering, and doing research to find a provider that’s a good math for individual needs.
Target Personas
Connecting Holistic Healthcare Patients and Providers
Human body types and shopping habits vary so wildly, it was vital to focus on the shared wants, needs, and frustrations. By centering user empathy, the commonalities became the foundation of design definition.
Research Synthesis
Transforming Common Challenges into Thoughtful Opportunities
POV
POV
I’d like to explore efficient and intuitive ways to personalize filters and notifications to encourage users with varied needs to download and return to an app for a specific, individual small business.
How Might We
make searching and filtering as simple, straightforward, and seamless as possible?
I’d like to create an e-commerce that is beautiful and easy-to-use in order to make garment shopping easy, fun, and enjoyable for the user because it is difficult to find unique, comfortable, beautiful clothing that the user is confident will look good on them before purchasing.
How Might We
offer personalized styling options that show users what garments look like on similar body shapes?
POV
POV
I’d like to find ways to make finding wanted information clear, direct, and upfront so users don’t feel frustrated and can easily find answers as the questions come up.
How Might We
communicate unknown information as efficiently and clearly as possible to avoid frustration and “make the implicit explicit?”
After gaining important insight from the interviews, the most important features of the app started to come into focus. By prioritizing inclusivity, customization, and company story growing the Wulfka brand into an app would be a lucrative and fun opportunity for
Feature Roadmap
Defining Priorities and Roadmapping User Focused Solutions
Nice to Haves (Batched Release)
Hemming services
Collab w/ local or AI stylist(s)
Upload 1-3 garments from closet to be styled with Wulfka garment(s)
Must Haves (MVP)
Specific filtered searches
Customer reviews
Customizable notification options
Very clear sizing chart
Personalized account
Input body measurements and see clothing on similarly proportions models/bodies
Can Come Later (Elevated Features)
Privately scheduled studio shopping appts
Points/rewards system for downloading and shopping through app
1.
2.
3.
1.
2.
3.
4.
5.
6.
1.
2.
Sitemap
Developing Intuitive Navigation for Personalized Healthcare Experiences
Because Wulfka is an e-commerce app, it’s important to ensure that the navigation is intuitive, straightforward, and clear. In addition to the standard shopping experience, incorporating personalized styling options as well as fashion education and history is vital to Wulfka’s mission.
User Flows
Fulfilling User Expectation and Instinct
E-commerce is so prevalent, that abiding by the established norms and intuitiveness is non-negotiable. In order to keep users on and engaged with the app, the main priority was to design the task flow to fulfill user expectations and be easy to complete.
Low and Mid Fidelity Wireframes
Ideating and Early Stages of Design
In figuring out the basic layout, it was extremely important to prioritize the variety and personalization of users’ healthcare journeys. This necessity required wireframes that focused on simple navigation and robust filtering, while maintaining easy and intuitive flows.
Shop
Filter
Moodboarding
Design Influence and Inspiration
During the preliminary interview with Wulfka, one of the questions asked was about other companies’ inspirational branding and design. Based on owner feedback, a colorful, fizzy, playful moodboard was put together as a foundation to the overall visual design and branding.
Visual Design
Brand Identity and Visual Language
Throughtful consideration was given to the visual design and branding for the Wulfka app. Shopping should be a fun, fulfilling experience that invokes joy, satisfaction, and delight in the user, thus resulting in playful, colorful, and joyous brand identity.
Home Page
Finalized Designs for Mobile
The newly designed landing offers clean, playful, intuitive components designed to evoke delight and satisfaction from Wuflka customers. Users can easily and intuitively choose to browse, filter, or search in order to find the exact item they desire.
Filtering
Clear, Easy, Customizable
A vital feature indicated during user interviews was the ability to filter garments. When users were asked what generally frustrated them with specific brand apps they had downloaded in the past, they responded with negative or non-existent filtering experiences. While Wulfka has a small, curated inventory, being able to search and filter for specific items is a very necessary feature.
Usability Testing
Minor Modifications
After testing the shopping flow on eleven participants, the main piece of feedback was in response to the visibility of the placeholder text in the quantity dropdown of the product profile page. When a quantity was suggested, users experienced confusion and frustration in (re)choosing their desired quantity. Attempting to lighten the color failed accessibility testing, so the suggested quantity was changed to zero to indicate that users needed to make a selection.
Before
After
Reflection
Looking Back and Moving Forward
Key Takeaways
Coming from a sustainable fashion background, I found it fascinating and engaging to talk with users about their overall shopping habits. I learned a tremendous amount interviewing Kate VanAsten, and worked very hard to balance Wulfka’s mission and values with users’ stated shopping wants and needs. One of the biggest surprises was in response to whether or not a smaller inventory was a problem- 100% of those interviewed said that a smaller inventory was a positive, that it “shows that they’re not just trying to produce for production sake” and that the user is “more likely to buy something knowing fewer items are being produced.”
Additionally, while I knew from personal experience that finding clothing depicted on diverse body types is a serious problem, it was fascinating to talk with people about not only how widespread the problem is, but how much nuance and range of difficulty people encounter. I believe Wulfka does a fantastic job at inclusivity, and I’m very much looking forward to see what they have in store next.
Next Steps
If there were no major time or budget deadlines, there are a variety of features that would be fun to design and build- particularly around the personalized styling features. Inspired by Cher’s styling software in the movie Clueless, users expressed excitement at the possibility of personalized styling features within the app. To start, users would be able to receive personalized suggestions based on their measurements and style preferences. Eventually, it would be amazing to be able to incorporate a feature where users could upload 1-3 garments from their own closets to then be paired or styled with Wulfka garments.