E-commerce web application

De Baarsjes

My role:
UI Designer

Tools:
Figma

Responsibilities:
Branding & Visual direction
UI design
Usability testing
Prototyping

This project is a responsive web app based on a brief provided by a client. I designed a fictitious online store called De Baarsjes — named after a hip area in the city of Amsterdam.

De Baarsjes is a women-tailored e-commerce shop, with an established brand, that sells the “street style meets luxury” concept.

View Prototype

Design process

Ideation

Building

Testing

Iterating

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

The challenge

  • 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.

The results

  • Brand identity created based on the client's brief.

  • Fully responsive prototype for desktop & iOS.

  • Positive response from user testing.

01.

Ideation

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.

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:

Brand mission

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.

Key design principles

  • 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.

User stories

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.

        User flow

        Based on the stories, an overall user flow was defined:

        02.

        Building the UI

        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.

        Mid-fidelity screens

        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.

        High-fidelity screens

        03.

        Usability testing

        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.

        Usability testing results:

        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.

        Feedback-based iteration

        A/B testing

        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.

        Other iterations

        Having updated the Home Screen, which seemed crucial to me, I then proceeded making other iterations based on feedback I received.

        Final mobile screens

        Responsive design

        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.

        Learnings from the project

        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.


        Things I would have done differently

        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:

        Mobile food delivery app