Re-Loved
Overview.
Re-Loved is an app design born from the research that people desire to shop secondhand seamlessly, support their local communities and reduce global waste whilst extending the life of their beloved possessions.
As the lead UX/UI Designer on this project, I completed the end to end design process: I conducted user surveys; created personas; planned user journeys; turned low-fidelity paper wireframes into high-fidelity digital prototypes and finally conducted usability studies to test the product.
Want to test out the prototype first? Make an offer on the VIPER leather jacket and/or upload an item to list on your account.
1.1 & 1.2: Four high fidelity Re-Loved mockups.
User research.
The first step was to conduct a survey. This would allow me to better understand the user, their experiences with similar products, their needs and pain points. By conducting user research, I removed own perspective and focused on what the user needed based on data instead of assumptions, anchoring the project in research. Below are some of the questions and responses from the survey.
2.1 & 2.2: Survey responses
After collating all responses and reviewing them, I consolidated everything into an aggregated affinity map. Mapping out the data from the survey allowed me to clearly see emerging thoughts/ patterns and group them together. From this, I created four personas which I referenced back to during the entire end to end process.
2.3: Aggregated affinity map
2.4: Personas
Defining the problem.
Once all user research was complete, I started to define the user problem. I used user stories and created user journey maps for the personas. A story example would be: "As a secondhand app user, I want to be able to filter items by their material so that I can be more intentional with the clothes I purchase".
Next, I referred back to the survey response to establish the primary competitors for a competitive audit. Based on top responses, I would audit: Vinted, eBay, DePop, Facebook Marketplace and Oxfam.
3.1: User journey map
3.2 Competitive audit
During the competitive audit, I examined the user flows for purchasing and listing items on the competitor's websites/apps and analysed the different experiences each brand brought forth. For example, Vinted’s upload flow was surprisingly simple as users just needed input the title, description, category and price. In contrast, eBay’s upload flow included the above plus several more complex categorisation fields such as insole material for shoes so that users could find more niche/specific items through searching.
After collecting my findings from this audit, I concluded that the upload flow for Re-Loved needed to be simple enough for the persona/user that needed to re-home their items quickly but also needed to allow for more complex filtering for the persona/user that was on the hunt for more specific items.
Ideation.
As the problem was now defined, I started to work on the solution. I sketched 5 paper wireframe versions for each frame in the main user flow and then distilled the best ideas into one frame. Once the version one wireframes were created, I translated them into low fidelity digital wireframes.
4.1 & 4.2: Paper wireframes
At this stage, I conducted my first usability study to assess the main user flow of the app, and made a few changes to save myself time in the future. Next, I proceeded to create the high fidelity mockups. Below is a side by side comparison of the low-fidelity wireframe next to its high-fidelity counterpart.
Reflecting back on the app’s personas, I realised that a filtering overlay would not cover the depth that a persona/user would be looking for in order to find niche items so I overhauled the design and changed the filter overlay to a frame with its own dedicated flow.
4.3: Lo-fi & high-fi mockups of the product description page and checkout page
4.4: Lofi & high-fi mockups of the sellers page and the filtering page
Whilst working on my high fidelity mock ups, I simultaneously started creating the design system for Re-Loved to assure that the elements of the app were consistent throughout and so I could reuse recurring elements. Based on the feedback from the user research, I went ahead with UI elements such as typography or layouts that were not cluttered and colours such as deep/ rich blues that were calming according to colour psychology. These choices allowed the items that users would upload to the app to speak for themselves and stand out while the app’s UI played a supporting role by being clear, intuitive and reducing distractions.
4.5 & 4.6: Re-Loved's design system
Prototyping.
Want to try the prototype? Make an offer on the VIPER leather jacket and/or upload an item to list on your account.
After the high-fidelity mockups were complete, it was time to prototype Re-Loved. I used advanced variables to give testers a more natural experience moving through the app without having to create several slightly varying frames. Some examples included: being able to buy the VIPER leather jacket outright or make an offer for a discounted price; at checkout, testers could choose their preferred delivery options/ payment type and finally, creating mandatory fields and error states if fields were left blank. In this last case, if the disabled button was clicked, the mandatory fields would change to their error states and become red as this colour grabs the user’s attention according to colour psychology. Once all mandatory fields were filled in, the button would enable itself and the tester would be able to proceed to the following frame due to the right conditions being met.
5.1: Make an offer overlay & order confirmed frame
5.2: Checkout frame error states & default My account page
Usability testing.
After the prototyping was finalised, I conducted another unmoderated usability test. I asked participants to test the flow of buying an item, uploading their own item to sell and finally, leaving a seller review for a previously purchased item. After reviewing all tests, I organised emerging patterns/ problems into high and medium priority issues based on how much the user flow / task completion was impacted. For example, there was an error in which the navigation bar would disappear, this prevented most users from being able to intuitively navigate through the app so this was priority 0 to be fixed.
Issues that were priority 1 were the fact that 75% of participants expressed difficulty in finding their order history “It was quite challenging to be honest. I expected my orders to be somewhere on the account’s page” and that 50% of participants assumed that when uploading an item, the category and condition field would be dropdown menus instead of plain fields. Below showcases the changes made post usability test.
6.1: Before & after changing the category and condition fields
6.2: Before and after changing the location of "My orders"
Reflections.
If I were to work on this project again, I would like to conduct a wider mix of user research such as interviewing the user base or conducting a moderated usability test so that I can step in if the prototype goes awry.
In terms of prototyping, I would create several separate flows to save time and avoid issues arising from an overly interconnected singular flow. I would also work on creating smaller motion design animations to bring life to the app without distracting the user.
Testimonial.
The app looks like a great idea. Definitely something that should be built.
Otse Obande
Senior Software Engineer
