Overview
In Fall 2020, I worked with a team of three other students to complete an instance of the User-Centered Design process to identify, investigate, and create a carefully-designed product for a current problem space and specific group of users. At all steps of the process, we focused on the usability and interaction between the human and the computer. After several months of contributing to this project, we finished with a mid-to high-fidelity prototype of a product we designed named Cornell Borrow, an item sharing and selling marketplace for Cornell students.
Team: Rylee Hickman, Erika Hauschild, Meredith Levy, and Jason Huang
Role: Each team member held an equal role as User Interface and Experience Designer through the User-Centered Design Process.
Duration: 4 Months
Skills: User Centered Design Process, User Research, Iterative Product Design, Low- to High-Fidelity Interactive Prototyping, and User Testing
Tools: Figma
To begin this process, we chose Cornell undergraduate students as our primary user group. We decided on this group not only because of our abundant access to members of this group, but also because we understood that this group has a plethora of problems that uniquely, but often commonly, experience as newly-emerging adults in a new phase of their lives.
We defined the problem space of our project to be the necessity of people within our user group to need many items during this time in their life but have less access to acquire them than they are used to. Students often need new clothes, textbooks, electronics, and more, but lack the funds or access to buy these goods. Although there is the option to borrow certain items from a library or a friend, or purchase items online at a discounted price, these methods can be time-consuming and frustrating. Additionally, many students enjoy fashion or may need new clothes for changing seasons. Unfortunately, this desire or need for clothes can drain students' funds and contribute to fast fashion if searching for a bargain. As students gravitate towards affordable but poorly made clothes, they help feed a wasteful and environmentally damaging industry. We want to propose a solution to this problem that could improve the lives of those going through the same struggles. We would like to find a way for students to expand their networks and freely exchange clothing, textbooks, or other specialty items. This product would improve student finances, reduce environmental waste, and give students access to a larger pool of physical resources.
Our goal entering our first round of user interviews was to better understand people's opinions on borrowing and sharing items, their current practices, and any other experiences or desires regarding this topic. For these preliminary interviews, we recruited four potential end users from the population of Cornell undergraduate students. Since we completed this project during the height of the pandemic, these interviews and others later in the project allowed us to gain experience and knowledge about digital interviewing practices and protocol. We utilized Zoom for these interviews and recorded the session, visually and auditorily, with consent from participants. To receive informed consent, we sent this Google form to participants before the scheduled interview, read the content aloud at the start, and had participants complete the online form if they wished to continue. Our team created an interview protocol for all of us to follow ahead of any interviews. This protocol allowed us to follow ethical standards of research interviews and to maintain consistency to acquire thoughtful answers across sessions. I have embedded a document that details this interview protocol below.
After completing our interview sessions, we individually compiled notes and reconvened to discuss the results as a group. Together we wrote activity notes and sorted them into an affinity diagram to identify common responses across the interviews. From this affinity diagram, we extracted insights from the information we learned. We completed both of these practices on a Figma file, which I have embedded below.
.png)
Next, my group developed a persona based on the traits and experiences of our four interviewees.
Julie is a 21-year-old senior studying computer science at Cornell University, similarly to two of our four interviewees, with a minor in art history. Julia has a wide social circle but a tight-knit group of close friends. She lives with three other roommates in a Collegetown apartment, the same location in Ithaca as three of our interviewees. Julie believes "sharing is caring", but isn't always comfortable asking to borrow. Julie is always mindful of the needs of those around her and acts carefully to maintain her relationships. These traits are an amalgamation of features from all four of our interviewees.
Julie most values her money, the environment, and her close relationships. She prefers buying secondhand items over brand-new items, such as a secondhand electric scooter or hand mixer. For Julie, trustworthiness is an essential quality in a friend. She feels comfortable sharing things like food and clothing with her friends but is more protective of sentimental or expensive items. Acts of sharing and borrowing have helped strengthen (or weaken) her relationships over time.
In the long term, Julie hopes to solve environmental and sustainability problems. Maintaining a frugal, sustainable lifestyle is essential to her. Right now, like many college students and especially our interviewees, Julie wishes to spend as little money as possible on items that she does not need. Since she is passionate about the environment, she also wants to prevent waste from unnecessary purchases. As someone in her final year of college and about to enter the workforce, though, she often finds herself needing items that she does not have - clothes for various events, textbooks for her final classes, supplies for her new apartment, and more.
She also hopes to only spend more money on items that are of high quality. Julie wants to feel that she has done her part in conserving the environment by living sustainably; however, Julie also wants to enjoy the items she owns.
Julie casually and frequently asks her network of close friends, including her housemates, to borrow items from them. She typically asks her housemates to browse their items, such as clothes or books, and if she finds an item that fits her description, she asks to borrow it. She always takes excellent care of her friends' belongings and expects them to do the same when they borrow hers. She feels that it is always necessary to ask to borrow items before using them and to return them on time to maintain the trust she and her friends have built. If she cannot find a friend's item that is close enough to her desired item, she then evaluates whether she genuinely needs it or not. If she decides she needs it, she begins to consider purchasing the item for a reasonable price.
Julie has had many successes regarding buying, borrowing, and lending. Julie frequently borrows items like cleaning supplies, writing utensils, and clothes from her friends or roommates, just like our interviewees. She is satisfied and happy after using these products. This way, she avoids spending too much on items like a vacuum or mop and can save waste by using products that her peers already own. Yet, Julie has also had several frustrating experiences related to borrowing and lending. Julie sometimes regrets her purchases, especially when they are unusable for a situation and nonrefundable.
We developed a list of requirements for our product design from the affinity diagram and the main insights we identified.
Functional Requirements
Contextual Requirements
At the beginning of the design process, each team member explored the already-existing solution space for the problem, noting any help elements, aspects missing, etc. Then, each member brainstormed a set of new design solutions, both digital, theoretical, or physical, ranging from impractical to implementable. Upon returning to the group, we each discussed the range of design solutions we explored and narrowed our group design to a combination of the best aspects of each other's designs.
We ultimately chose to design a responsive website. We pulled ideas from our mobile and website application sketches, non-technological solutions, persona requirements, and user insights. We listed our ideas by similarity and hierarchy and began to develop a structure for our solutions. We continuously sketched and resketched, narrowing in on our final design.
The website has three main components. The first component is a student-to-student item sharing page, which lists student-owned items available for borrowing and their images. The student-to-student sharing tab is called "Student Share."
The second component is a student-run thrift/borrow marketplace called "Borrow Shop." While the page for the Borrow Shop is visually similar to the Student Share page, with well-organized lists of available items, the critical distinction is in the underlying organizational model. With the Borrow Shop, students borrow items from an organization with an inventory of previously donated items. Users can borrow items or purchase them forever from the store at a discounted price. The Borrow Shop allows students to borrow without straining individual ties while still being economically and environmentally responsible and having a wide variety of items to choose from.
The last component is the user's personal page. This page allows the user to track the items they've borrowed or bought in the past, review upcoming return deadlines, view all their items, and reflect on their purchasing habits. All users have a rating based on their responsibility with their items and previously borrowed items, so users can also see any compliments or complaints they may have received from other users on this page. Users can also come to their profile when they need help deciding whether to buy an item when borrowing is impossible. Users can enter information about the potential purchase, and the shopping counselor will provide environmental and financial facts about whether or not the user should make the purchase.
In preparation for designing our product's interface, we determined a set of four tasks that the website would allow users to complete. This set of tasks reminded us of the product's larger purpose, to keep us focused on the true goals at hand.
Each group member took responsibility for further developing the ideas of one task listed above. I chose to work with the second task regarding the digital shopping counselor functionality. Below is a hand-drawn storyboard of a user completing this task and a hand-drawn sketch of the user interface elements involved.
Below, I have embedded a video demonstrating the completion of each previously mentioned task using a paper prototype I created. The prototype mainly filters out content and appearance and filters in features/functionality and interactivity. I chose this method of prototype implementation because the content does not affect the user's ability to complete tasks, but the organization of the website architecture and basic design choices of formatting does.
Using my paper prototype, I recruited a potential end user to participate in a user testing session. I instructed her to complete each task that the prototype allowed for but made sure not to reveal how to complete the tasks. While she attempted to complete each task, I observed and recorded the features and methods she used.
I learned that this product has several features whose location and functionality can be more clear. For example, my participant expressed a lot of confusion regarding where to find the product's shopping counselor feature and only found it through the process of elimination. This observation indicated that this feature needed to be more visible to the user for them to know it is there. Additionally, she did not initially understand the meaning of the Student Share and Borrow Shop tabs, which I assume most users also wouldn't initially understand. This confusion means that my group and I can better make the functionality of this site's features more known.
These interactions with the paper prototype allowed me to make notes about the design's current functionality, which I brought to my team to inform us of any changes we would need to make.
With the four necessary tasks and feedback from user testing sessions in mind, my team moved forward with the design process to make a digital prototype. We utilized Figma to produce a mid-to-high-fidelity interactive prototype.
Our final design built and improved on previous iterations. We made several fundamental changes to our first design while preserving the features that met our users' needs. We based all design decisions on the feedback we received from users on the paper prototype, as well as our user requirements and persona. We initially split our design into Cornell Borrow and Borrow Shop. Many users did not understand the difference between the sections, which made it difficult for them to complete tasks. To fix this, we combined Cornell Borrow and Borrow Shop into one page. On the home page, we added a brief description of the site to improve understanding for users. This choice was directly based on the advice of one user, who was initially confused about the website's purpose. We replaced the previous design with neatly organized individual pages, each devoted to a type of item. The second design improved visibility and error recovery, two essential usability guidelines. One of the biggest problems for users was finding the shopping counselor button. To fix this, we put a link to the shopping counselor directly on the navigation. We also added a "Discover" link and a shopping bag in the upper right corner. When a user clicks the "Discover" link, they get a drop-down menu of all the categories of items they can browse. The discovery link and shopping bag icon directly reflected typical designs used by online stores, following the UX principle of standardization. Finally, we kept the same search, notification, and personal page icons. Searching was still a powerful tool that met the user requirement for efficiency, and the notification system was vital in maintaining open communication between users, another user requirement. Beyond these changes, many of our design choices stayed the same. The importance and ubiquity of photos, the use of user ratings and private versus public items, and the notification system all remained. All of these choices closely matched our initial persona and user requirements.
Our final prototype primarily focused on filtering in the attributes of appearance, features, functionality, and interactivity while filtering out most content. We placed a high level of importance on the prototype's appearance, selecting colors, fonts, shapes, and positioning, which we hoped would elicit a positive emotional response in users. We also used these visuals, especially in the cases of color and shape/shape positioning, to indicate to the user the functionality of items that are similar in appearance and the grouping of related items.
As for features/functionality, we designed our prototype for both depth and breadth, and much of its design has T-shaped functionality. In terms of the high-level functionality, every item in the navigation bar directs to a page. Not all page features function at a high level because of a cost-value tradeoff. However, the features we decided to implement on each page were those most important to user goals and tasks. Since these features allow users to achieve their top goals, and any extra implementation would be too high of a cost for a low payoff of user importance, we carefully decided which functions to include. Similar to features/functionality, we implemented the interactivity at high levels where it allows the user to complete their primary goals. Finally, content is the dimension least filtered into this prototype. The few instances of content, such as images, user inputs, item descriptions, etc., are only implemented where necessary. The photos appear as animated versions of real pictures that could be on the site. Any text emulated an example input/message/description that a user could potentially write in a later prototype or product.
The resolution of this prototype is relatively high fidelity. The appearance is highly implemented, the features/functionality and interactivity are relatively highly implemented, and the content, although not implemented fully, is still high enough to create a sophisticated and accurate prototype for this product.
Once we had finished a draft of the final design in the form of the Figma prototype, our team conducted the last round of usability testing sessions to determine how well our product would perform for our users. With consent, we screen-recorded every testing session to allow us to best conduct usability analysis later. Below, I have embedded a document that details the testing session protocol that all team members followed.
We analyzed the main issues we observed in the usability testing sessions by identifying UX problem instances (UPIs) and then investigating the underlying design problems (UPDs) that caused them. Our team made a spreadsheet for each of these metrics, which I have embedded below.
From this analysis of our users' difficulties with the interface, we identified the three largest yet fixable design problems to implement into our final prototype.
I have embedded a video demonstrating how to complete each task on the prototype and the live Figma file for any extra details.
Be sure to reach out if you would like to work with me!
.png)
© Rylee Hickman 2022
Icons from Flaticon
