Overview Discover Define Develop Figma Prototype Reflection

Overview

Client

The Clothing Club

Time

June 2023

6 weeks

Team

4 people

Focus area

Responsive web design

Key methods

Design thinking, double diamond, semi-structured interviews, audience segmentation, user persona, hmw, 2x2 matrix, wireframing, think alound testing, guerrilla testing, prototyping

Background

The Clothing Club (TCC) is a non-profit, volunteer based organization in Aarhus, which works as a clothing library, where for a set price, its members can rent up to 3 pieces of clothing per month. They has existed for 5 years, but they only means of communication with the target audience were Instagram and Facebook posts. Recently, they decided to rebrand their digital presence and invest in a website.

The initial goal of the website was to promote The Clothing Club and sustainable fashion; give users information about the collection, events and the client; encourage visitors to join them as members and/or volunteers as well as provide a system to manage rentals for TCC’s members and volunteers.

Problem statement

We want to increase the awareness of The Clothing Club among their potential customers and develop their digital presence.

Discover

Interviews

We wanted to understand how TCC’s members and potential customers feel about the concept, what are their reasons for joining and how would they describe the organization’s aesthetic. Additionally, TCC was discussing adding a catalogue on their website, so we wanted to learn the opinion of the target audience about it.

The examples of questions were:

  • Why have you started using their service?
  • How would you describe their aesthetic/branding?
  • What do you think can be improved?
  • What might be a leaning argument for you to sign up? (for the potential customers)

Define

Target Audience Segmentation

Based on desk research and interview with our client we segmented our audience, to navigate their needs better. We decided that our main target group is going to be millennial women, living in Aarhus, who are open to thrift shopping and at least one of their interests is:

  • saving money
  • living sustainably
  • fashion and experimenting with their style

However, TCC wants to expend in the future their offer to man and non-binary people. Therefore, it was requested that the design doesn’t appear too feminine, which could discourage their potential future customers.

User Persona

Based on desk research and the interviews we created 2 user personas:

  • Sarah Jakobsen - a Danish student, who wants to save money and the planet at the same time.
  • Anna Müller - an international member of The Clothing Club, who wants to become a bigger part of the community, while learning new skills.

Both of them like to thrift and experiment with fashion. It helped us define our target group better and always remember their needs.

How Might We

We formed How Might We questions to ideate on the potential solutions for the problems our users might face while using the website. First, we took our long-term and short-term goals for the solution from our previous research, in spirit of:

  • Promoting sustainability
  • Attracting new members
  • Creating an open and supportive community

We voted for the most important and achievable outcomes

Later we took those challenges and we asked ourselves how might we solve them. That way we ended up with potential solutions to the problems.

Again, we voted for those that we thought were applicable to our users’ needs. As a result, we gathered:

  • a lookbook
  • a reminder of the return date for rentals
  • good SEO words
  • highlighting events on the front page

2x2 Matrix

After the entire process of HMW we picked some ideas from it and put them into a 2x2 Matrix to prioritize them by the impact on users and the effort they require. That helped us decide which features we should work on and which ones we can postpone.

At that point, we decided not to pursue the catalogue with clothes and the back system to manage the membership. Instead, we prioritized making a lookbook and a front page with an original design that will attract new members.

Develop

At that stage we started working on the visual part of the solution. Because of a short deadline, we decided to design mobile version of the website first - primarily to ensure that we will not overcomplicate the design in a way that later would be hard to translate to other devices.

Low-fi Wireframes

First, we sketched using crazy 8 method to generate many ideas in short amount of time. After voting on elements that we liked, we move on to Figma, to create low fidelity wireframes and focus on on the functionalities rather than the design. At that stage we concentrated on following hierarchy rules and application of the F scanning pattern to ease the users’ reading.

High-fi Wireframes

For the high fidelity we implemented the feedback from testing and focused more on the UI of the solution. At this stage, not only we added colors and content such as photos and illustrations, but we also focused more on design principles.

Testing

We tested the usability of the project in 2 testing sessions (low-fi and high-fi) on 10 people total, by observing how users interact with it during guerilla tests and think aloud tests. We sumed-up the process and the results in the video.

Desktop Version

After implementing feedback on mobile high-fi, we created the desktop version of the webpage.

The biggest challenge we faced during desktop was the hero section on the landing page. We had trouble with the layout of "our values" section and we have also realised that the photo doesn’t represent TCC’s message, so we decided to change it to the one that show their values such as community.

Final Figma Prototype

After testing and finishing the desktop version, we needed to update the mobile to the new design. That way we finally reached our final prototype for both mobile and desktop. Click the button to view the Figma of it.

Reflection