Role:
UI/UX Design
Web Development
Timeline:
Jan - Mar 2020
Context:
Web Development Project at UC San Diego in COGS 120: Interaction Design
Introduction
​
In this project, I worked in a team of three to develop a mobile web application. Even though we divided the work evenly, I was accountable for user research, user testing, wireframes, and designing the user interface. Furthermore, I helped with coding the app based on our prototypes.
Problem
​
Sometimes you get invited to a last minute Halloween party. However, you might not have the correct apparel that completes your outfit to pertain to the theme. You don't have time to go shopping and if you buy something online, it might not come in on time. Also, you need to save money and you don't want to waste it on clothes that you're only going to wear for one night. Individuals who are looking to spice up their wardrobe or complete their outfit need a low cost way to achieve their goal.
"When you don't have time or money to buy a new outfit, just borrow them."
Inspiration/Need Finding
​
After interviewing people, we found a need for a cheap way to get specific pieces of clothing. Some people that we interviewed said that they only needed certain items for certain situations. For instance, one needed khaki pants for a group photo, while another needed a red shirt for Halloween. These individuals found that they were only going to wear these items a few times, or even only once, because it doesn't match with the clothes that they already have.
Storyboard
Iterations
​
Wireframes
For our original wireframes, our goal was to make our app simple and to not have as many features as possible.
Home Page
Profile Page
Prototypes
When creating the app, we were trying to figure out where the placement of features best aligned with our user's mental model. Specifically, we focused on the placement of the Borrow and Lend tabs. From heuristic evaluations, we found that most people expected them to be in the Notifications tab rather than in the Closet tab, like in our wireframes.
Home Page
Notification Page
User Testing
​
After conducting A/B testing using Google Analytics, we found that the Navigation bar hid the different features, such as the Borrow and Lend tab. this led to less clicks on those tabs from users. we also received user feedback on how users liked the separation between the tabs (ex. having a side bar), but they also noted that it made it difficult to find the tabs. Given this user feedback, we changed the layout of the Navigation bar to a horizontal one at the top of the screen. This bar separated the Borrow, Lend, and Request tabs, which were easily visible. We also added a horizontal Navigation bar on the Home page to make the different clothing categories more visible, allowing users to see the different categories without scrolling.
Before
After
Final Designs
​
Borrow 'n Go is an app that allows individuals to lend or borrow their clothing items. Individuals who intend to lend an item of clothing can post their item to their closet by uploading a picture of the item. Once items are posted into their closet, other users who intend to borrow an item can request to borrow it. The owner can either accept or decline the request. If the owner accepts, the two individuals can message each other to meet up. There is also a point system to encourage users to allow others to lend their clothes.
​
Through our design process, we made sure to keep the user interface simple and clear. We changed the aesthetics to appeal to our target audience and resemble other clothing apps for familiarity. Also for our final design, we kept in mind the feedback that we collected from user testing.
Reflection
As a team, we were able to evenly distribute the work and everyone did their part. If we did this all again, I would want to start with this idea from the beginning. Our original idea was taboo, so we had to change our project topic in between deadlines. Because we were short on time, we didn't do a thorough evaluation for need finding, paper prototypes, and heuristic evaluations. So if we had a chance to do this again, I would want us to do those evaluations in order to get more feedback on our app. Despite this minor setback, we were still able to work together and complete each part before each deadline.
​
Personally, I learned a lot about coding, specifically in HTML, CSS, and Javascript. Even though I focused mostly on designing the prototypes with Figma and Adobe XD, I was still able to contribute to the coding aspects of this project.