Tradesies — A Clothing Swap App

A case study for an effective UI design on mobile app platform

Summary

Tradesies is a platform similar to Craigslist where users post items of clothing that they no longer want. However instead of earning money on sold items, the users’ payment is the form of credits. Credits are used on the platform only and are redeemed on other products posted for sale.

The Opportunity

In order to grow, we need to change — the same goes for our wardrobe. We all feel better, happier, and more confident when we revamp our closet. It’s refreshing. But who can afford to purchase clothes every time they need to feel revitalized? Vancouver is one of the most expensive cities in the world and purchasing clothes is a luxury that not everyone can afford.

Tradesies identifies that the target user’s wardrobe closet is filled with articles of clothing they no longer wear and could be revamped with almost new clothing.

Team

Ben Frey and Mark Collins, UI Design
Lindsay Hogan and Maheen Kamani, UX Design

Task

To create a mobile app with a team of UX and UI Designers by compiling research from the target audience and turning into an impactful, well-constructed interface design that operates fluidly. I was responsible for co-developing two distinct moods and styles with my UI partner, Mark, and turning development into a great interface design. This is the first project at RED Academy that the students work with a client.

Tools

Thumbnail sketches, post-it ideation, Photoshop, Illustrator, Sketch, inVision, Keynote

Overview

  1. Brief
  2. Primary Research: Interviews & Surveys
  3. Research Synthesis
  4. Ideation
  5. Visual Identity
  6. Outcome

Brief

Tradesies is an online platform that allows users to trade almost-new clothing for credit. The mobile app goals are to increase engagement with the service by making it easy to take photos of clothing and uploading on the app. The target demographic is women between the ages of 19–35 who have a lot of excess clothing in their closet that would benefit from recycling items for newer ones.

Primary Research: Interviews & Surveys

We conducted interviews with 10 women that fell into our target audience and asked a series of questions based on online shopping, purchasing motivations, feelings associated with shopping, and rating similar experiences. From the responses, we created an affinity diagram in order to help guide us towards what our users’ ideal experience on Tradesies would be.

Creating an affinity board

Research Synthesis

The responses that we received from our potential users and the affinity board helped us shape the inception of our design ideas. A lot of key words from responses surfaced on many occasions: rejuvenating, satisfying, fun, casual, simple, and stylish were among the most popular key words.

We also found that they were most interested in geometric shapes, whites, and smooth and clean textures such as silk and velvet.

Mark and I then created a motive for the interface design mood and style: “To rejuvenate your wardrobe by not spending money.”

Ideation

We wanted to create two separate moods to give our client various options to consider. I wanted to create a visual identity that would not have any influence by of Mark’s choices and we created them singularly and presented them to each other upon completion.

The mood that I wanted to convey was a design that was stylish, sharp and casual. I wanted it to look contemporary with a lot of white space, very user-friendly. With nice aesthetic and organized.

Mood Board

Our client, Danielle Lussier, had told us in our initial meeting that she favoured the colour blue. To her, blue conveyed elegance which is what she envisioned to a colour to represent the company. I looked for blues that were bright and poppy, yet elegant. I also looked for strong, contrasting colours like yellow and orange, to consider for a call-to-action buttons in the interface design.

Style Tile

Visual Identity

I further began to work with icons that could help with the functionality of the app design, including ones that associate with clothing imagery as well as standard icons that users understand when navigating through a mobile app. The oranges and yellows that I originally found in my mood board is tested with button and iconography colours.

Original Tradesies logo
Thumbnail sketches

Although the client already has a logo for the Tradesies brand, I challenged myself to fit my vision while remaining true to hers — culmination of elegance and rejuvenation. I tried various ideas during the thumbnailing stage; looking for ways to include a coathanger, or an article of clothing.

Tradesies logo redesign

What I arrived at was a logo that stayed true to the script format, but updating the style to be a little more contemporary. The T was created to show a flow or a cycle that represents the trading of clothing infinitely and the T being a script style.

Style guide

The UI team arrived at definitive style by combining elements in both art directions that really stood out most to the client and also conveyed our intended design motive — elegant and contemporary.

Our colour system used two classic blues throughout the entire interface design. We wanted to keep the colour palette minimal as the interface would get very busy with the posted items integrated.

Our iconography design is intended to be bold in order for the user to navigate easily by the use of recognizable icons.

As mentioned before, my motives behind the use of yellow CTAs was to be somewhat complimentary with the blue palette of the interface design. Unpressed state buttons are an orangey-yellow, which fits better rather than an orange hue.

Outcome

Our final composition of the Tradesies interface integrates a modernity and elegance, white space with boldness; and sharp and soft tones.

The UI design benefits the user experience of navigating seamlessly through the app by the use of bold iconography, dynamic fonts, and the prominence of posted images.

The logo redesign works especially well in the small format of a mobile app. The wordmark remains fashionable and graceful within the context of the interface design, and stands up greatly with the app’s iconography and colour palette.

Conclusion

A platform that allows users to “trade” clothing without the use of monetary payment is a brilliant concept, so our challenge was to create an experience that lets users access and navigate through the app as easy as possible. Our biggest help was the information gathered from our potential user interviews. A lot of key points and issues based on similar apps or trading services were brought forth, including the mood and feeling of trading and obtaining new clothing. We addressed the users’ concerns and constructive feedback with our design and usability in the mobile app.