Swapsies

UI/UX Case Study 2022

The perfect app for college students that is designed to encourage them to barter their unused items with their peers in a safe and secure manner.

Team: Thomas Htet, Huimeng Lu, Shihan Gong, and Rajvir Logani
My role: User Research, Usability Testing, & Wireframes/ Prototyping
Key Methods: Design Systems, Rapid Prototyping, Usability Testing, & Visual Design
Duration: October 2022 - Dec 2022

Overview

In April, I teamed up with three other UX design students from UC San Diego to develop a platform that fosters human connection and promotes item conservation through possession trading. As part of this initiative, I led the design of an innovative and interactive mobile information system prototype using Figma. This involved conducting user research, identifying key pain points, generating and iterating on design concepts, and ensuring our mobile application aligned with user needs. Through our prototype, we were able to demonstrate how the platform's features and functionality effectively address user requirements and support our mission.

01. Define - The Problem

College students are not effectively utilizing their unused items, failing to find practical ways to repurpose them...

College students, especially UC San Diego students, face difficulties in obtaining necessary resources and disposing of unused items. They also have concerns regarding security and safety while using online marketplace platforms. This creates a gap in both the access to resources and a secure and safe platform for buying and selling goods.

02. Define - The Solution

Our goal was to provide college students with a secure and cost-effective second-hand platform, empowering them to transact with ease and peace of mind...

Our aim is to provide college students with a secure and cost-effective platform for accessing the second-hand items they need.
We prioritize their safety and convenience by addressing their concerns related to security and affordability. By doing so, we empower them to obtain the necessary resources without incurring any unnecessary expenses.

03. User Research - Interviews

To gain a better understanding of students' struggles and how we can help them better repurpose their unused items, we conducted both user interviews and user surveys.

We reached out to 20 (8 males & 12 females) UC San Diego students to participate in one-on-one interviews...

Some of the questions we asked them included:

Key Insights Derived

From these one-on-one interviews, we learned that UC San Diego students experience and need:

User Research - Surveys

To further validate our findings, we conducted a user research survey with 38 UC San Diego students in which we received...

Final Findings

Based on all of our user findings, most of our interviewees expressed two main challenges and concerns they have while using second-hand marketplaces which are...

04. Empathize - Personas

To better comprehend our users' pain points and frustrations, we developed two user personas (one primary and one secondary). These personas enable us to concentrate on our users' requirements and devise solutions to address their issues.

Primary Persona

Meet Jake, a budget-conscious student who seeks a platform that is accessible and provides necessary resources. He values convenience and efficiency, and wants a secure environment for exchanging second-hand items.

Secondary Persona

Meet Maria, a full time student who seeks a user-friendly and secure platform that offers high-quality second-hand items, designed with eco-friendliness in mind.

Empathy Map

By creating an empathy map, we were able to better understand our target audience by encouraging us to view our users needs, challenges, and motivations through their perspective, which led us to gain insights that inform the development of an effective solution.

Competitive Analysis

To gain insight into our competitors and identify areas for improvement, we conducted a competitive analysis of three leading second-hand market companies: Facebook, Depop, and Etsy.

After analyzing the top 3 popular apps related to our project idea, we discovered a gap in their safety measures during transactions, providing an opportunity for our platform to prioritize safety and security.

05. Paper & Low Fidelity Wireframes

To jumpstart our design process, we began by sketching out a few paper wireframes before moving onto low-fi and high-fi prototypes. This approach allowed us to capture our initial ideas quickly and visually communicate them to others. By starting with paper wireframes, we were able to experiment with different layouts and iterate on our concepts without committing to more time-consuming and detailed designs. This approach gave us the freedom to test out multiple solutions and refine our ideas before investing more resources into the design process. Overall, paper wireframes provided an effective and efficient way to ideate and collaborate as a team, enabling us to create better designs in less time.

Low Fidelity Wireframes

In Figma, we produced low-fidelity prototypes that facilitated rapid and cost-effective testing of our concepts and ideas. These prototypes aided in conveying the fundamental functionality and design of the product, without requiring a completely polished, finalized product. This approach allowed us to receive early feedback from users and make necessary changes before committing significant resources to high-fidelity development.

Low Fidelity Usability Testing

By leveraging low-fidelity prototypes in Figma, we were able to efficiently and cost-effectively test our product ideas and concepts. This allowed us to communicate the fundamental functionality and design of our product without investing significant resources in high-fidelity development. After conducting usability testing on 20 individuals at UC San Diego, we found that this user flow was the most effective for our participants.

In addition to being the most effective, our participants also found this information architecture to be intuitive and easy to use. We observed that they were able to complete tasks efficiently and without confusion, which indicates that the design is user-friendly. Furthermore, the feedback we received from the testing allowed us to iterate and improve on the design before investing resources in high-fidelity development. Overall, the low-fi prototypes were a valuable tool in validating our design decisions and ensuring a successful product.

During our low-fidelity usability testing, we found that participants struggled with finding profiles' ratings and reviews. As a result, we made sure to address this issue in our high-fidelity prototypes to improve the overall user experience.

07. High Fidelity Wireframes

Style Guide

Visual Design

08. Reflection

Working on this project as part of my team was an exceptional experience. I gained valuable insights as a product designer, honing my Figma skills while prioritizing the needs of our users. I came to understand the significance of user feedback and the need for iterative testing in the design process. Ultimately, our role as designers is to prioritize user satisfaction.

Key Takeaways:
Embrace change. This project emphasized the importance of change and being open to new ideas. Initially, my focus was solely on creating a useful tool for UCSD students, but it was through embracing changes along the way that we were able to bring the vision to life.
User-centric approach. I learned the importance of designing with the end-user in mind and taking their feedback into consideration. User feedback is a crucial aspect in the design process, and it is essential to make necessary improvements based on their insights.

The End. Thanks!