ITERATIVE DESIGN


Role:
Group Project

Strategies:
Visual Design, User-Testing, Wireframing & Prototyping

Tools:
Figma, HTML/CSS/Bootstrap, Balsamiq Wireframes

Timeline:
2 weeks


The Project


Alongside a small team , I helped design an interactive interface based on the problem that the emerging startup has. Re-mint was a startup that we worked with, an official secondhand marketplace for fashion brands. We went through the full process of mocking up a solution to the startup’s concept: (1) sketching ideas of the interface, (2) creating an interactive, high-fidelity prototype, (3) conducting user testing on a final, revised prototype, and (4) contacting the start-up.


Project Scope


Re-mint lets fashion brands set up official secondhand marketplaces so their customers can buy and sell directly with each other. The startup help brands monetize their resale market. Re-mint offers revenue share on transaction fees and uses the transaction data to drive new sales. How the interface of the startup will be a space for all brands, sellers, and customers to interact with one another is a point of difference that we haven’t seen from other companies and intrigued us to concoct an interface for their particular needs.


Question

How can we solve the issues that Re-mint is currently dealing with?


PROCESS

Problems


  1. Lack of personalization. On current brand websites, there is little direct interaction with customers during the shopping process to guide them to their ideal products.
  2. Lack of brand presence in the resale market. On current secondhand sites, brands aren’t tied to sellers and don’t rely on sellers to market their items.
  3. Lack of user engagement. On current brand websites, there is little contact with customers after they purchase their products.

Our goal is to curate a mockup that solves these 3 problems, providing all types of users a common space to navigate the different features of the website easily and efficiently.


PROCESS

Users


Because Re-mint website will be the middle-ground for all interactions between buyers, sellers, and brands, we decided to design a desktop interface. It will be much easier for buyers and brands to conduct their business and work transactions in a desktop screen resolution. In addition, adapting our interface as a desktop version will provide consumers the comfort to navigate the website with much more product choices and features displayed due to the larger screen size. Users who are interested in fashion, second-hand clothing, ustainability, and prefer the structure of an online shopping app would be greatly impacted by our interface. These users would most likely be in their teens and 20s, and be either consumer or buyer users. We expect a lot of overlap between users of Patagonia, Poshmark, and Depop. However, our app is intuitive for all ages.


PROCESS

Low-Fidelty Prototypes


Each group member mocked up rough, different possible designs for Re-mint interface. We wanted to let the creativity flow, and come up with a final set of wireframes that aligned with the goals of Re-mint.

3 to 5 wireframes that each person mocked up

3 to 5 wireframes that each person mocked up

3 to 5 wireframes that each person mocked up

3 to 5 wireframes that each person mocked up


PROCESS

Final Low-Fidelty WireFrames


After iterations of conversations and feedback, a collective set of 10 wireframes was mocked up. Through our wireframes, the features of our app ensure that brands, sellers, and customers have a presence in the resale market.


first set of final wireframes second set of final wireframes third set of final wireframes fourth set of final wireframes fifth set of final wireframes


PROCESS

High-Fidelity Prototypes


After mocking up low fidelity prototypes, we shifted to mocking up high-fidelity prototypes in Figma. The prototype went through a few iterations of trial and error and critiques. Below, there will be the first version of my group’s high-fidelity prototypes.



PROCESS

Final High-Fidelity Prototypes


My teammates and I attended a studio lab where other students critiqued our designs. Below is feedback from our peers that we incorporated into our prototype. Click the prototype to explore our design choices and features of the website!

Annotations/Suggestions

  • Make the entire navbar buttons clickable, not just the words.
  • Differentiate clothing items by labeling them with descriptions (not solely with the photo items) on the selling page.
  • Quiz page should have a footer with more padding and a different color to seperate it from the rest of the page.
  • Use an off-white or lighter color background and have shadow for the cards so they stand out in the Lululemon brand page.
  • Make the "add to cart" button stand out more.
  • Use bolder font for title header to show hierarchy.
  • Get rid of the unnecessary white space and add dimensions to your interface.
  • The positioning of the skip for now button is slightly unintuitive.


PROCESS

User Testing


Having test users try out an interface is an important part of testing and a valuable source of feedback. Thus, my teammates and I conducted our own usability test through a remote user testing service, using our newly created interactive high-fidelity prototype.

Users were provided with instructions and questions to guide them through the process of navigating our interactive mockup.

Instructions

Re-mint is a secondhand buying and selling website, and you are a new customer doing both of these tasks. Our outlined task for you is to create a new account and heart different favorite brands (hover only for now due to Figma limitations), and then submit to begin shopping. We then want you to shop specifically for Lululemon clothes and checkout, and then finally sell your old Zara clothes. Currently, we are in an interactive mockup stage, and we are designing in Figma with limited functionality, so please assume that information is pre-filled for you and that some things are only hoverable (limited amount of clicks per page). However, please attempt to use our website as realistically as possible, click through the different pages, and think aloud. Thank you!


Post-Questions

  • Were there any subtasks that were difficult to complete?
  • How easy or difficult was the prototype to navigate? Overall, how was your experience of using the prototype to complete the given task?
  • What are your thoughts on the design and layout? Any comments on the components?
  • How long did it take you to complete the given task?
  • What did you like most and least about this prototype?
  • On a scale from 1 to 5. how likely would you be to use this website to buy and sell products? Why?


User Testing Videos

Below are the videos of 3 users that completed this task from UserTesting.com. Click on the icons to watch the videos !



PROCESS

Revisions


After watching each user browse our prototype, we implemented the changes that they suggested to us!

  • Unrecognizable logo. We changed the font and the color of the logo.
  • Confusing selling page. We added a description for each of the items. We included "step" bubbles that labels the flow of the page. We also included a quesion icon to help the user better understand the function of the clothing generator.
  • Inconsistency. We made sure that the buttons, color, fonts, spacing, alignment were consistent throughout.

Final Prototype





Figma Video





Additional Ideas for Re-mint Interface


At the end of the project, my team connected with Re-mint and sent an email with our work. As of now, we are currently waiting fot their response!

If we had additional time for the project, these would be the other features we would have amended into Re-mint interface:

  • Re-mint hosting online contests for the best customized brand item which is chosen by the brand. Afterwards, the brand sells the winning item and the revenue is divided between the designer and the brand.
  • A point rewards system to encourage sellers to continue selling items on the website.
  • Re-mint providers users a platform to post outfit suggestions from their closet. Brands would the select the best outfit post. The winning post would have links to the brand website. Afterwards, if other customers are encouraged to purchase the clothing item because of the outfut posts, both the brand and the user who made that outfit suggestions would profit from it.

Rectrospective


What I would do differently next time?
  1. Iteration is a long but important process. With each feedback my team receieved, we went through iterations of refining the design of our interface. I didn't realized the importance of it till the end of our project, but iterating help with finding out the small but key issues that are otherwise missed.
  2. Communication is the key to a great design. Through this project, I realized the importance of communicating with your team members. Communicating with your team drastically prevents with repeated decision making & misunderstandings and helps with expanding on each other ideas. Without my teammates, I wouldn't have improved in some areas of my communication (i.e not feeling like I'm a burden to my teammates when I ask clarifying questions).