E-commerce web application
My role:
UI Designer
Tools:
Figma
Responsibilities:
Branding & Visual direction
UI design
Usability testing
Prototyping
De Baarsjes is a women-tailored e-commerce shop, with an established brand, that sells the “street style meets luxury” concept.
View PrototypeIdeation
Building
Testing
Iterating
.png)
.png)
.png)
Creating brand guidelines
User stories
User flows
Design system
Wireframes
Prototyping
Usability testing
& synthesising results
Additional A/B test
Feedback-based iteration
Final mobile screens
Responsive design
Week 1
Week 1-2
Week 2
Week 2
Create a set of brand guidelines based on a given design brief: logo, colours, typography, imagery, etc
Design a responsive e-commerce website that is aesthetically pleasing and which easily allows users to browse, save and shop items.
Brand identity created based on the client's brief.
Fully responsive prototype for desktop & iOS.
Positive response from user testing.
01.
The client provided me with a brief, which already included:
Brand description
Target audience insights
User stories
Using the brief, I used the 5Ws exercise — Who, What, Where, When, Why — to get first clarity over the scope of the project.
.png)
Then, I essentially translated the 5Ws into specific takeaways regarding the design goals:
Clean, sleek, modern, dynamic UI
Easy navigation, simple filtering
Clear comms on policies
Responsive design
In addition, I also developed a brand mission and key design principles, to guide me throughout the design process:
— De Baarsjes is a story about a woman that takes space with confidence and transforms herself and her surroundings with equal power. It is a story of female confidence, effortlessness, and the comfort of being in your own skin. An affordable luxury clothing brand, De Baarsjes is here to to assist women making an empowered fashion choices that are all about comfort and effortless chic.
Simple.
Uncomplicated, straight to the point, and easy to understand. Clear and impactful layout. Consistent touch-points.
Familiar.
De Baarsjes is forward-looking but it makes women feel comfortable and enough. Wearing De Baarsjes feels as familiar as being in your own skin.
Modern.
Contemporary design to support women in the modern world.
Keywords:
modern, sleek, efficient, contemporary, edgy, understated, enough, chic, comfort.
Consulting the many user stories that were provided in the project brief, I’ve personally prioritised them in terms of what seemed like a “must-have” and a “want”. I chose 4 user stories and defined product requirements for each accordingly.
Based on the stories, an overall user flow was defined:
02.
At this stage, I started building a brand kit, as well as a design system to ensure UI consistency across screens and adherence to the design principles that were outlined above.
.png)
.png)
.png)
.png)
Then, based on the user flow, I created the first mid-fidelity wireframes on Figma. Below are the initial screens for Home, Product, Menu, and Cart screens.
.png)
03.
Having added the necessary level of polish to my high-fidelity wireframes, I’ve created the first prototype in Figma to test the key user flow on mobile.
Overall, I’ve interviewed 4 people (remotely) and provided a task scenario.
With this test, I wanted to see if users would have any problem saving the items in two different ways and understanding clearly that the items have been saved successfully.
Generally, people liked the app. They particularly commented on the overall style (“It’s looking really good!”; “Looks beautiful!”), icons (“I love the icons”) and didn’t really have big issues with the key flow.
Below are some task-only reported issues and some other ones reported by the testers:
Scenario:
You’re checking out a new dress collection at ‘De Baarsjes’ and you want to save two dresses for later: dress ULA and dress ALYA.
04.
Having received the useful feedback from the testers, next step was to implement it.
Before I did, I wanted to re-test one particular issue identified that was not related to the flow in particular, but it was an interesting one: that some users didn’t understand the Home Page was scrollable. Potentially, it’s quite a severe one since it affects discoverability and user experience overall. So I had to come up with a design solution that would solve the problem, which involved playing around with the layout and imagery.
I then recruited 13 testers for an A/B test via UsabilityHub and asked them which screen feels more ‘scrollable’.
67% of participants preferred the second screen, as they “could already see what’s coming”: “it’s just more obvious, but still looks good”, according to one tester.
Having updated the Home Screen, which seemed crucial to me, I then proceeded making other iterations based on feedback I received.
.png)
.png)
.png)
.png)
I also designed an additional desktop breakpoint for my app, choosing to do a homepage of a website from where users could potentially click into product categories right away.
I loved designing this project! I learned there's power in keeping things minimal and functional — an approach that comes with a great deal of aesthetics, uses powerful product imagery as a centerpiece, and allows product to shine and speak for itself.
This was a student project tasked by CareerFoundry, who also provided a brand brief. In real life, I would love to test on a real mobile and desktop/tablet devices, not just a prototype, to identify potential issues and get feedback on potential future features — something that's useful for product development overall.
More case studies: