Iterative Design
Project Introduction
Iterative design is an assignment in Brown University's CSCI 1300 in which people form groups to design an interactive interface based on the problem that the emerging startup has. The group will go through the full process of mocking up a solution to the startup's concept. For this project, my group chose the startup called re-mint. We chose re-mint because we were passionate about their mission. After reading their mission description, we could immediately picture how the website designs would look like.
Background
RE-MINT MISSION STATEMENT
Re-mint lets fashion brands set up official secondhand marketplaces so their customers can buy and sell directly with each other. We help brands monetize their resale market. We offer revenue share on transaction fees and use the transaction data to drive new sales. For example, if an Everlane customer sells her jeans because they are too small, we retarget her to purchase the larger size from Everlane's main e-commerce website.
PROBLEMS TO SOLVE
- Lack of personalization: on current brand websites, there is little direct interaction with customers during the shopping process to guide them to ideal products
- Lack of brand presence in the resale market: on current secondhand sites, brands aren't tied to sellers and rely on sellers to market their items
- Lack of user engagement: on current brand websites, there is little contact with customers after they buy their products
TARGET USERS
- Old/returning users of the featured brands
- New users who can casually scroll through the website
- Users who don’t want to spend too much money on clothing and would buy secondhand
- Users who want to earn extra money by selling their old clothes
- Users who don’t have the time to go to or who get overwhelmed by thrift stores or secondhand stores that are not organized by brand
- Users who would prefer to online shop on desktop and like to have more choices on their screens at once
- Users with disabilities or visual impairments who prefer using computers to online shop or do online tasks
- Users in need of outfits for special occasions but who are not able to travel to a specific store due to location/transportation issues
- Users who have physical disabilities that make it difficult to travel to a physical store
Low-Fidelity Wireframes
Interface Decision
- We chose desktop because it will allow more features to be displayed on the website and make features on the website more accessible due to the larger screen size. Also, it would help users feel more comfortable making online purchases as we learned through our user interviews that people feel more confident making online purchases through desktop. Overall, we felt the most confident designing re-mint for desktop devices because we feel that it can benefit the most amount of users.
- However, we do recognize the limitations of choosing desktop: users who do not have computers may not have access, casual/frequent users may prefer using phones for a convenient and fast shopping experience, and sellers could have a difficult time uploading photos on desktop
Individual Sketches
Final Wireframes
- Solution: Our application ensures that brands have a presence in the resale market. Brands are able to verify that items being sold are legit based on the data produced by the clothing generator and from the sale of items. In addition, our application increass user engagement and user personalization.
Features
- Feature that lets users sell clothes - helps consumers feel more connected to the platform and benefit from making money from unused clothing.
- We host brands where users can buy secondhand clothing items that have been verified and marked down from their original price - increases consumer engagement and trust while also supporting brands hosted on the platform
- When users first sign up, they are directed to pages that will help the user filter the products that are shown to them - helps users have a personalized shopping experience since they are only shown products they want.
- Brands and consumers can directly talk to each other (with the intention of the consumer being directed to the actual brand site to complete another purchase) - increases engagement and personalization and builds relationships between brands and customers
- A quiz section where users are able to find out their style preferences and the website will generate recommendations for the users - increases user personalization.
High-Fidelity Prototypes
Before Design Critique
Suggestions Given By Peers
- Make entire navbar buttons clickable, not just words
- On the log in page, add a log in header
- The clothes, price range, etc. page is a little crowded and the positioning of the skip for now button is slightly unintuitive
- On the selling page, differentiate clothing items by labeling them with descriptions (not just photo items)
- Quiz page should have footer with more padding and color to separate it from the rest of the page
- On the Lululemon brand page, use an off-white or lighter color background and have shadow for cards so they stand out
- Make the "add to cart" button stand out more
- Use bolder font for title header to show hierarchy
- Looks mid-fi and not high-fi because too much white space and dimensionless
After Design Critique
User Testing
Instructions Provided to Users
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-Test 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 Video Analysis
- Our best user in terms of following instructions! Navigated from account creation page to selecting favorite brands to shopping for Lululemon clothes and then finally selling their old clothes.
- Liked the colors and large and spacious components, saying that the Figma is easy to navigate.
- Thought that it was cool that users can pay with different options (said that cart is straightforward).
- Correctly understood the clothing generator.
- Only suggestion was to use a different font on the re-mint logo.
- Overall, this user was very fast at navigating the site and gave very kind feedback.
- Out of 5, gave the website a 4. Sees website as a good option to sell and buy clothes. Likes how straightforward the website is.
- Liked the appbar at the top of the website because it makes navigating the website more convenient
- For the most part, thought that the design fit the website. Did not understand what the 'feed' was for.
- Did not see the clothing generator nor did they navigate to the cart page
- Overall, this user was very fast at navigating the website, but encountered some moments of confusion as she navigated.
- Out of 5, they gave the website a 3.5
- Thought that our website design was standard for e-commerce
- Liked that they could see on what step they were in the cart
- In the sell page they did not understand the purpose of "recently sold brands". Suggested to add a mini description or picture to clarify the meaning of each quality option.
- Thought that our prototype was low-fi or mid-fi quality
- They liked the least the sell page because they perceived the design to be old style. They also described their experience selling clothes as being odd.
- Overall, this user gave lots of quality feedback and commented that many of the issues they found were probably due to the limitations provided by the lack of interactions in the prototype. They felt that the actual website would be better.
Revisions
Interface Changes
- Unrecognizable logo: Changed the font and color of the logo.
- Selling page: Added a description for each of the items description. We also included "step" bubbles that labels the flow of the page. We also included a question icon to help better understand the function of the clothing generator.
- Standardization: Ensured that our buttons, colors, fonts were standard and that there was not much variety. Ensured that the spacing and alignment was consistent throughout the website.
Figma
Email to Re-mint
Hi Jeevika and Sam,
Hope you are doing well! Our names are (name), (name), (name), and (name), and we are all Brown University undergraduates taking a class called “User Interfaces and User Experiences.” For one of our projects, we were tasked with choosing a startup and mocking up a solution to the startup’s concept.
We were very interested in your startup with the goal of creating a secondhand marketplace with increased user engagement and connection with brands. We have created a ten page prototype using Figma with many different features, including a home page, quiz page, shop page, sell page, feed page, and more!
Aligning with your startup’s goal, we wanted to target two groups of users: sellers and buyers. Thus, we hoped to create a seamless buying experience for customers looking to buy secondhand items from brands they already love or help them explore different brands too. On the flip side, we aimed for buyers to be able to have a convenient experience of selling their items. Specifically, we integrated this feature where buyers who are looking to sell their clothes but want that item in a different type (color, size, etc), our user-centered prototype will redirect them to the brand’s site so they’ll be able to make that purchase. Also, we wanted to make this experience very personalized for the user through a chat feature (called feed), allowing users to favorite brands, and a quiz to match users with clothes that fit their style.
Please check out the link to our Figma!: link
We would love to hear your thoughts about our mockup! We really appreciate your time reading this email and looking through our Figma. Hope to hear from you soon!
Thank you!
(name), (name), (name), and (name)
Other Features We Would've Added if Space Allowed
- Re-mint hosts 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 brand.
- A point rewards system to encourage sellers to continue selling items on the website
- Re-mint provides users a platform to post outfit suggestions from their closet. Brands would then select the best outfit post. The winning post would have links to the brand website. Afterwards if other customers are encourgaed to purchase the clothing items because of the outfit posts, both the brand and the user who made the outfit suggestions would benefit.
Project Conclusion
In this project we gained insights into the design process - from sketching, to creating low-fi wireframes and high-fi wireframes, and how user critique influences designs.