An introduction to social fashion: Working with the team at COMB App

Holly Hamlett
Aug 22, 2017 · 10 min read

Social fashion mobile app WLTM similar website design for future endeavours.

COMB is a mobile social fashion app, which was looking to create a website that would include many of the features that the current users of the app enjoy, but with easier visibility and customisation. The predominant user base is 13–19 year old girls, who are fairly active on social media, and familiar with other apps which have both a app and web presence. Through through user research, we were able to understand the main motivations of this user group and adapt our designs accordingly. The final design encompassed the key features of the app in a format that is familiar and easy for the user to switch between devices.


Project Planning

We were given the brief on a friday afternoon and so had a few hours to begin to plan our approach to the project. As a team we created a project canvas to map out any concerns and assumptions, as well as a timeline since the sprint was only 2 weeks. From the brief, we knew that the key user demographic would be hard to get interviews for due to their age. We were also wary of the scope of the project for this sprint due to the time limitations. However, we had confidence that the existing app was a strong product with a simple design aesthetic which could be conceivably be designed for web within this time.

Competitor Analysis

The team spent the weekend looking at competitors in preparations for the stakeholder meeting the following week. In total we looked at 8 competitors, ranging from e-commerce websites which are popular with the user group (such as ASOS and BooHoo) to other social fashion sites such as 21 Buttons, Polyvore and Lyst. The e-commerce websites offer the user an aspirational view of the clothing, but didn’t really have any interaction between users and/or the website, with the exception of ASOS which offers the #AsSeenOnMe, where users are able to show the company how they wear their clothes. The social fashion websites, on the other hand, were very encouraging of interactions between users. They also encourage users to create their own content to be shared in the form of boards or collections, and to follow bloggers/influencers and brands.

Stakeholder Meeting

Prior to starting any further research we met with the clients to find out further information from what was in the brief. It was a great opportunity to get to know the clients a little better and understand the journey of COMB in their own words. COMB was founded by 2 guys who met at university, with the idea of being able to follow your favourite bloggers, celebrities or even your friends, and receive recommendations based on the things they like. A great selling point of the app was the image search, which allows users to find similar items based on something they have seen online simply by using a screen shot.

User Research & Interviews

Being aware that it is difficult to interview minors, we knew we wouldn’t get those through a screener survey. However we broadened the age range to 13–25 year olds, as our conversation with the stakeholders had revealed that this was the core age range of their users. This also enabled us to have a wider interview and testing base. Having posted the screener survey, we also looked at relatives and close friends who were of the appropriate age or had children the appropriate age and were successful in interviewing 5 individuals who were under 18 and therefore fell into the key demographic (with parental permission, of course). In total we interviewed 15 people about their habits when browsing on social media and their motivations when doing so. I also took the initiative to do a bit of ‘guerilla’ interviewing, by going to Topshop Oxford Circus to find 18+ people to interview. This was highly useful as it gave me an insight into that age group where all the previous interviewees had been slightly older (I also learned it is REALLY hard to tell people’s ages just from looking).

Key Themes

Once the interviews were completed, we took some time to collate and discuss the interview findings. From this we felt it was useful to do some affinity mapping, so we had a clear sense of the users we would be designing for.

The screener survey had already delivered some interesting results. While almost all the people who responded used Instagram on a regular basis, only a third of them said they posted regularly. The respondents were also happy to do an online search when they saw something on a celebrity or blogger that they followed, although the second highest group said they would ask a friend. A high proportion of the respondents also used social media for their fashion inspiration.

The key themes we found from the affinity mapping were Needing Reassurance, Wanting to Grow Up, and Interactions with Online Spaces. Needing reassurance was users having a real fear of being judged and seeking validation from others — seeking to define their identity as they approached adulthood. Following on from that was this desire to grow up, or appear ‘grown up’; users had a definite aspirational identity that they projected online, and often admitted to window shopping for things they couldn’t afford by saving items or putting them in their basket but not checking out. Lastly, the users were comfortable in their interactions with online spaces, happy to switch between devices depending on what the activity was. They were also very aware of marketing by brands but almost passively allowed it to influence their choices.

Personas & Scenarios

With a good understanding of our user base, we created 2 proto-personas.

The first was Abbie — 18 years old, and about to start university. She will scroll on Instagram, liking posts by friends and celebrities, but will only post every few weeks. She is fashion conscious as she likes to know what is on trend, but isn’t led by it. Finally, she is cautious about what she shares online as she doesn’t want to be judged by her friends.

The second persona was Eryn, who is 15. She loves emoji’s and animations like she can get on Snapchat. She always wants to be ahead of the curve and her aim is to be a fashion influencer. However, she gets anxious when she doesn’t get immediate ‘likes’ on social media, and will delete posts if they don’t get enough likes or she feels she looks bad.

We decided to use Abbie as our primary persona as she fitted both the apps user base and was more closely aligned with the bulk of our interviewees.

From here, we envisaged 2 scenarios for the persona which we would like to take into the upcoming design studio:

1) Abbie is going on holiday and needs a swimming costume to wear. She’s wants a couple of options to choose from and buy. She’s trying to find out which swimming costumes are cool, as she wants her decision to be validated and appreciated by her peers.

2)Eryn is imagining what dress she might wear to her leavers ball in a 6 months time. She doesn’t know anything about formal dresses and styles look that good. She wants something individual, but wants to share her options with friends to hear their opinions.

Assessing the Current Features

In the course of mapping the existing users journey to identify any point points, we also looked at the key features and content in both the existing COMB app and the MVP website that was already in place. Using the MOSCOW method, we prioritised the features and content. The key/must items were core to the app’s function and included the search function (both text & user), being able to create collections of items, an account and profile picture and the COMB function as it existed, to find other items. As far as content, the main content of the app is user generated, with a ‘feed’ of items that are liked by people the user follows, and this was essential to the appeal and function of the website.

Design Studio

The design studio was a chance for us to present the research we had completed to the client and get their input into the design process. They were impressed with the amount of research that had been completed in such a short space of time (4 days), and that it confirmed the behaviours that they understood about their users.

While it was a slow start as the clients hadn’t done a design studio before, it was worthwhile to see their thinking and directions they might want to pursue.

There were some interesting idea generated in the design studio such as group collections for special events such as proms, polls for your friend to vote on which item was best, special feeds based on popular instagram posts or items seen on celebrities and a reward system for regular users and to encourage less regular users. Ultimately the idea that felt strongest fell in with user research — a way for users to curate collections before they are made public.

Paper Prototype & Usability Testing

We met that weekend to continue our work, reviewing the design studio outcomes to refine the idea further and establishing the user flow for the design solution. I sketched the wireflow as we talked, making sure that the user journey was logical, and we began user testing.

We were fortunate to be able to test with the younger users we had interviewed, but wanted to save that until we were sure that initial usability kinks had been worked out (plus the short time scale for prototyping meant they wouldn’t be available until later in the week).

The general feedback was good. A couple of users concurred that the placement of the ‘comb’ button in the top right corner was a little confusing as they said that is where they would expect to see a ‘close’ button. Others also commented on wanting verification that something had been added to a collection. There were a few other tweaks to be made, but we were confident enough to move into digital prototyping.

Iterations & Further Prototyping

It was really satisfying to move into digital with a strong design solution, however it brought up some other issues. Wile users we happy with the design, it was the communication of some of the new features that wasn’t clear. Users were unclear about the difference between a public and private collection, with one commenting

“It’s not clear that the ‘Save for Later’ collection is something that can’t be seen by other people.” (Tim)

Other users commented on the new function of being able to ‘like’ an item without it being automatically added to a collection, something that had come from our user research. When talking about liked items, the user said

“I would like to see all the things I had liked in one place, in case I want to add it to a collection later.” (Frankie)

and

“I would like to be able to find the items I‘ve liked later, like if they get added to a board.” (Olivia)

Almost all the users who tested commented on the layout of the pages, where some of the notifications and options appeared below the fold and this was taken into account during the next round of iterations.

Moving into mid-fidelity, we began to consider the design language, which was strongly led by the existing branding. The COMB branding is very simple, with a clean and uncluttered aesthetic. The primary colours used are black and white, with green as a primary call to action colour, buttons are rounded and icons are simple. While moving into digital, we checked these colour choices in line with accessibility best practices, and unfortunately the green didn’t pass a AAA rating. When we consulted with the tutor, she agreed that it was best to continue to use the colour that appears on the app for the sake of consistency, but that we would be able to make recommendations in the specification document, which we did.

The next round of testing revealed some further changes needed in terms of how clear the process of adding items to collections was. Users were still also unsure what the COMB button did, as they were unfamiliar with the app, which in some ways was useful. We changed the banner on the front page to make it more clear what the difference between the ‘COMB-it’ button that the company created for their online users and the ‘comb’ button that was the key feature of the app and website. Instead, the COMB-it button was a pop-up for first time users and available to install in the footer, and a banner at the top of the comb feed informed users of the ‘comb’ button.

Presentation & Specification Document

When we presented to the clients, they were incredibly happy with the work we had delivered. While it reinforced their own research, it also gave them a solid design solution which would hopefully allow users to seamlessly shift between the app and the web.

For this project we also produced a specification document, with the recommendations on colour to meet accessibility guidelines, annotated wireframes and a summary of the research we had completed during the project.

)

Holly Hamlett

Written by

Junior UX Designer, based in London

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade