WORK
PLAY
We designed peer-to-peer interactions to make lending items among a network of trusted people feel rewarding and appreciated.
JUMP TO FINAL PROTOTYPE
TEAM
Tammy Hu
Jency Clements
Emma Sadjo
DURATION
6 months
TOOls
Figma
FigJam
Miro
MY ROLE
UI/UX Designer
UX Researcher
Prototyping (Figma)
ANGELA LIU
By creating a comprehensive design system, I ensured a cohesive look and feel across the platform, supporting youbloom's mission to connect show creators, artists, and fans for live event discovery and attendance. 

I also worked with the development and business analysis team to fix UI bugs and spearhead new features.
JUMP TO FINAL PROTOTYPE
TEAM
Ally Vern
DURATION
3 months
TOOls
Figma
Wordpress
MY ROLE
UI Designer
UI/UX Bug Tester & Analyst
WHAT IS COMMUNITY GEARBOX?
Community Gearbox is a social inventory platform that supports users in sharing, co-owning, and mobilizing resources amongst groups of people they know and trust. However, despite great interest in the app, its current state suffered from engagement drop-offs and usability issues based on early pilot studies. My team was tasked with improving general usability as well as the resource/item-sharing process on the platform to be more personable and rewarding than just renting and borrowing.

This was a very overarching task - we needed to narrow down the specific parts of the process users found unfavorable or difficult to use, and why. With some help from our sponsor, we were able to collect important initial data through multiple rounds of usability testing and user interviews.
INFORMATION ARCHITECTURE
To make the user experience of the app more simple and intuitive, we reorganized the information architecture. This helped us understand what screens to build on the app and what the navigation bar experience should look like. I ended up specifically working on the profile page, so this step was crucial in understanding what the information architecture of that tab should look like.
SKETCHES
We used the method of “Crazy 8’s” to ideate low-fidelity designs for key features and screens. After each round of Crazy 8s, we explained our sketches and ideas to each other, which was then followed by a critique session in which we added comments to our sketches in FigJam, noting aspects of each design to move forward with, based on how much of an opportunity it presented in our problem space, how well it aligned with our research insights, feasibility, and more. Through the critique sessions, we were able to narrow down and identify key features to move forward with.

A notable feature that we sketched is the badge system. Here are some early stages of that system’s design along with some of the actual badge types.
DISCOVERY INTERVIEWS & USABILITY TESTS
01
Sponsor-conducted usability tests
Luckily, before our team joined the project, our sponsor had conducted a few usability tests. From this, we quickly learned many of the app’s initial usability issues.
02
Sponsor-conducted REI DISCOVERY INTERVIEWS
During our research stage, our sponsor was simultaneously conducting discovery interviews with the goals of understanding what types of sharing users are interested in and what encourages them to share. The participants were recruited through Community Gearbox’s waitlist and had prior knowledge of the startup and its mission.
03
OUR OWN user interviews
We designed and conducted another round of 4 user interviews to dive deeper into our research questions. This was done externally of the sponsor’s organization. We sought to interview people from our age group (19-25) because our sponsor had primarily spoke with people in older age ranges in previous interviews. We focused on discovery questions about current sharing opportunities, community sharing experiences, and trust.
We organized our research from the discovery interviews by affinity diagramming. We categorized all the notes we took down and pulled out a few key findings that would motivate the design features I ended up developing.
The categories and insights are as follows.
trust & motivation
  • Participants were the most motivated to lend things to others out of a desire to help them, especially if there’s a need. For example, if they knew someone’s circumstance/story, they might be more motivated to share.
ui/usability issues
  • Inconsistencies with app design.
  • Confusion on terminology used within the Community Gearbox app.
  • Make content more accessible and IA less confusing.
community building
  • Users want to see how borrowers are using their items in context (pictures of adventures, etc.).
  • Engagement within the community affects how much sharing is happening.
PROBLEM STATEMENTS
01
How might we design a peer-to-peer interactions that will make lenders* feel more appreciated and comfortable when sharing their items?
02
How might we improve the information architecture of the Community Gearbox application to allow users to easily post/find items and engage with their community?
USER JOURNEY MAPS
We created user journey maps mainly so that our team could synchronize and have a complete understanding on what steps users will take when using the application. We extracted pain points from each steps and ideated opportune solutions that could arise from those pain points.
Something significant that we ideated during this phase was the idea of creating a “badge system,” which exists to build trust and make exchanges more delightful. Initially, we thought of having a rating system [similar to that used in Uber], but we did not want there to be a toxic social hierarchy system within an app that was about building the community. Especially since our target users are groups of people who already know each other, we thought a more fun and subjective system would be more useful and act as a micro-interaction to make exchanges satisfying and joyful.
INFORMATION ARCHITECTURE
To make the user experience of the app more simple and intuitive, we reorganized the information architecture. This helped us understand what screens to build on the app and what the navigation bar experience should look like. I ended up specifically working on the profile page, so this step was crucial in understanding what the information architecture of that tab should look like.
Sketches
We used the method of “Crazy 8’s” to ideate low-fidelity designs for key features and screens. After each round of Crazy 8s, we explained our sketches and ideas to each other, which was then followed by a critique session in which we added comments to our sketches in FigJam, noting aspects of each design to move forward with, based on how much of an opportunity it presented in our problem space, how well it aligned with our research insights, feasibility, and more. Through the critique sessions, we were able to narrow down and identify key features to move forward with.

We also sketched the badge system we ideated from our user journey mapping. Here are some early stages of that system’s design along with some of the actual badge types.
MID-FIDELITY PROTOTYPE
Here are summaries of the features I worked on.
01
badges
Badges are a newly designed system to act in place of a rating system to establish greater trust without creating a social hierarchy based on rating. Users can award the other party badges to highlight the positive traits of their exchange*.

*exchange: an interaction where one user offers up one of their items to be borrowed and another user borrows it free of charge for a limited duration of time
These are also a few of the early iterations of badge ideas. We chose these labels based on the research insights of what users consider to be bad vs. good lending, as well as what motivates users to share their items with others. For instance, because users were worried that their items would be damaged in an exchange, we included the badge of “pristine condition” as an indicator of a borrower returning the item in great condition.
02
PROFILE PAGE
Screenshot of old profile page. There is little information architecture on this page (only profile picture, statistics on the number of friends and items, and a bit list of all the user's items).
Profile IA - Before
Screenshot of mid-fidelity profile page with improved information architecture and an added menu that includes the user's posted items, saved items, posts, and badges.
Profile IA - After
Based on the information architecture we made beforehand, we redesigned the profile page to contain a submenu. From the profile page, users can see the number of items and the number of communities they’ve shared with. They can also view the specific items they’ve shared with their communities, items they’ve saved, posts they’ve created, and badges they’ve been awarded.
We framed users’ profile images with a Community Gearbox shaped-gear filled with badges to make the badges easily viewable and identifiable within the profile page.
We also redesigned the profile page to include information that users may want to know about themselves and their usage of the app.
03
THANK YOU MESSAGE
Based on our research insights that a) users want to see how borrowers are using their items in context and b) if users knew someone’s circumstance/story, they might be more motivated to share, we created an appreciation message feature. This allows lenders to get to know their borrower on a more personal level, leading to future exchanges between the two users.
usability testing
Our team conducted a total of 6 usability tests with 15 main tasks with the following goals:
  • How easily can users complete different key actions within the app, including across the community, exchanges, unlisted requests, and profile pages?
  • In general, what was confusing for users?
  • Does the hierarchy of content make sense?
  • How useful and relevant do users perceive the information we chose to display throughout the app?
Here are our main findings:
01
participants had split reactions to the usefulness of some details included on the profile page.
Participants were particularly divided with the "Shared with __ people" and "Shared with __ communities" statistics. We decided to revisit these details to see if more impactful data could replace it.
02
participants felt there were too many fields to be filled out, especially post-exchange.
Participants were particularly divided with the "Shared with __ people" and "Shared with __ communities" statistics. We decided to revisit these details to see if more impactful data could replace it.
Final Prototype
BADGES
BEFORE
/
AFTER
PROFILE (USER ITEMS)
BEFORE
/
AFTER
PROFILE (APPRECIATION MESSAGE)
BEFORE
/
AFTER
PROFILE (HEADER)
BEFORE
/
AFTER
PROFILE (SAVED ITEMS)
BEFORE
/
AFTER
WORK
PLAY
ANGELA LIU
By creating a comprehensive design system, I ensured a cohesive look and feel across the platform, supporting youbloom's mission to connect show creators, artists, and fans for live event discovery and attendance. 

I also worked with the development and business analysis team to fix UI bugs and spearhead new features.
TEAM
Ally Vern
DURATION
3 months
TOOls
Figma
Wordpress
MY ROLE
UI Designer
UI/UX Bug Tester & Analyst
ANGELA LIU
By creating a comprehensive design system, I ensured a cohesive look and feel across the platform, supporting youbloom's mission to connect show creators, artists, and fans for live event discovery and attendance. 

I also worked with the development and business analysis team to fix UI bugs and spearhead new features.
TEAM
Ally Vern
DURATION
3 months
TOOls
Figma
Wordpress
MY ROLE
UI Designer
UI/UX Bug Tester & Analyst
Noticing that the previous website’s design was highly inconsistent and contained little traces of a design system, I set out to create one. This system would help guide the UX and development team during my time at youbloom and would stay even after I left.
Here is the new design system implemented into various pages of the website.
Shows Page
BEFORE
/
AFTER
ARTIST PAGE
BEFORE
/
AFTER
event ticket
BEFORE
/
AFTER
SURVEY
BEFORE
/
AFTER
project outline
what is community gearbox?
discovery interviews
problem statements [my role]
user journey maps
information architecture
sketches
mid-fidelity prototype
usability testing
final prototype
personal takeaways
Community gearbox
Designing peer-to-peer interactions to make lending items among a network of trusted people feel rewarding and appreciated.
team
Angela Liu
Tammy Hu
Emma Sadjo
Jency Clements
duration
6 months
tools
Figma
FigJam
Miro
my role
UI/UX Designer
UX Researcher
Prototyping (Figma)
project outline
what is community gearbox?
discovery interviews
problem statements [my role]
user journey maps
information architecture
sketches
mid-fidelity prototype
usability testing
final prototype
personal takeaways
WORK
PLAY
what is community gearbox?
Community Gearbox is a social inventory platform that supports users in sharing, co-owning, and mobilizing resources amongst groups of people they know and trust. However, despite great interest in the app, its current state suffered from engagement drop-offs and usability issues based on early pilot studies. My team was tasked with improving general usability as well as the resource/item-sharing process on the platform to be more personable and rewarding than just renting and borrowing.

This was a very overarching task - we needed to narrow down the specific parts of the process users found unfavorable or difficult to use, and why. With some help from our sponsor, we were able to collect important initial data through multiple rounds of usability testing and user interviews.
Discovery interviews & usability tests
01
Sponsor-conducted usability tests
Our sponsor and founder of Community Gearbox conducting usability tests in the early stages of app development.
Luckily, before our team joined the project, our sponsor had conducted a few usability tests. From this, we quickly learned many of the app’s initial usability issues.
02
Sponsor-conducted REI DISCOVERY INTERVIEWS
Screenshot of Zoom meeting attended by me, my groupmate, our sponsor and our participant.
During our research stage, our sponsor was simultaneously conducting discovery interviews with the goals of understanding what types of sharing users are interested in and what encourages them to share. The participants were recruited through Community Gearbox’s waitlist and had prior knowledge of the startup and its mission.
Discovery interviews & usability tests
03
OUR OWN user interviews
Screenshot of Zoom meeting attended by me, my groupmate, our sponsor and our participant.
We designed and conducted another round of 4 user interviews to dive deeper into our research questions. This was done externally of the sponsor’s organization. We sought to interview people from our age group (19-25) because our sponsor had primarily spoke with people in older age ranges in previous interviews. We focused on discovery questions about current sharing opportunities, community sharing experiences, and trust.
We organized our research from the discovery interviews by affinity diagramming. We categorized all the notes we took down and pulled out a few key findings that would motivate the design features I ended up developing.
The categories and insights are as follows.
trust & motivation
  • Participants were the most motivated to lend things to others out of a desire to help them, especially if there’s a need. For example, if they knew someone’s circumstance/story, they might be more motivated to share.
ui/usability issues
  • Inconsistencies with app design.
  • Confusion on terminology used within the Community Gearbox app.
  • Make content more accessible and IA less confusing.
community building
  • Users want to see how borrowers are using their items in context (pictures of adventures, etc.).
  • Engagement within the community affects how much sharing is happening.
Once we established these findings, I was able to break down the initial project goal into more specific problems. These are parts of the project that I worked the most on.
problem statements [my role]
01
How might we design a peer-to-peer interactions that will make lenders* feel more appreciated and comfortable when sharing their items?
02
How might we improve the information architecture of the Community Gearbox application to allow users to easily post/find items and engage with their community?
*lenders: a key target user, since without people willing to lend out their items, a community cannot be formed based around those items.
*lenders: a key target user, since without people willing to lend out their items, a community cannot be formed based around those items.
USER JOURNEY MAPS
We created user journey maps mainly so that our team could synchronize and have a complete understanding on what steps users will take when using the application. We extracted pain points from each steps and ideated opportune solutions that could arise from those pain points.
Something significant that we ideated during this phase was the idea of creating a “badge system,” which exists to build trust and make exchanges more delightful. Initially, we thought of having a rating system [similar to that used in Uber], but we did not want there to be a toxic social hierarchy system within an app that was about building the community. Especially since our target users are groups of people who already know each other, we thought a more fun and subjective system would be more useful and act as a micro-interaction to make exchanges satisfying and joyful.
INFORMATION ARCHITECTURE
To make the user experience of the app more simple and intuitive, we reorganized the information architecture. This helped us understand what screens to build on the app and what the navigation bar experience should look like. I ended up specifically working on the profile page, so this step was crucial in understanding what the information architecture of that tab should look like.
SKETCHES
We used the method of “Crazy 8’s” to ideate low-fidelity designs for key features and screens. After each round of Crazy 8s, we explained our sketches and ideas to each other, which was then followed by a critique session in which we added comments to our sketches in FigJam, noting aspects of each design to move forward with, based on how much of an opportunity it presented in our problem space, how well it aligned with our research insights, feasibility, and more. Through the critique sessions, we were able to narrow down and identify key features to move forward with.

A notable feature that we sketched is the badge system. Here are some early stages of that system’s design along with some of the actual badge types.
Sketches from all four teammates during "Crazy Eights" ideation session.
Initial drawings of different badges and their labels. Included badges are "item condition," "timeliness," "community building," and more.
MID-FIDELITY PROTOTYPE
Here are summaries of the features I worked on.
01
Badges
01
Badges
Badges are a newly designed system to act in place of a rating system to establish greater trust without creating a social hierarchy based on rating. Users can award the other party badges to highlight the positive traits of their exchange*.

*exchange: an interaction where one user offers up one of their items to be borrowed and another user borrows it free of charge for a limited duration of time
These are also a few of the early iterations of badge ideas. We chose these labels based on the research insights of what users consider to be bad vs. good lending, as well as what motivates users to share their items with others. For instance, because users were worried that their items would be damaged in an exchange, we included the badge of “pristine condition” as an indicator of a borrower returning the item in great condition.
02
profile page
02
profile page
Screenshot of old profile page. There is little information architecture on this page (only profile picture, statistics on the number of friends and items, and a bit list of all the user's items).
Profile IA - Before
Screenshot of mid-fidelity profile page with improved information architecture and an added menu that includes the user's posted items, saved items, posts, and badges.
Profile IA - After
Based on the information architecture we made beforehand, we redesigned the profile page to contain additional tabs.

From the profile page, users can see the number of items and the number of communities they’ve shared with. They can also view the specific items they’ve shared with their communities, items they’ve saved, posts they’ve created, and badges they’ve been awarded.
We framed users’ profile images with a Community Gearbox shaped-gear filled with badges to make the badges easily viewable and identifiable within the profile page.
Header portion of new profile page that includes new profile picture UI and user statistics.
We framed users’ profile images with a Community Gearbox shaped-gear filled with badges to make the badges easily viewable and identifiable within the profile page.
We also redesigned the profile page to include information that users may want to know about themselves and their usage of the app.
03
thank you message
03
thank you message
Screenshot of mid-fidelity profile page with improved information architecture and an added menu that includes the user's posted items, saved items, posts, and badges.
Based on our research insights that a) users want to see how borrowers are using their items in context and b) if users knew someone’s circumstance/story, they might be more motivated to share, we created an appreciation message feature. This allows lenders to get to know their borrower on a more personal level, leading to future exchanges between the two users.
usability testing
Our team conducted a total of 6 usability tests with 15 main tasks with the following goals:
  • How easily can users complete different key actions within the app, including across the community, exchanges, unlisted requests, and profile pages?
  • In general, what was confusing for users?
  • Does the hierarchy of content make sense?
  • How useful and relevant do users perceive the information we chose to display throughout the app?
Here are our main findings:
01
participants had split reactions to the usefulness of some details included on the profile page.
02
participants felt there were too many fields to be filled out, especially post-exchange.
They felt that having to write an appreciation message in addition to the badges was excessive. They mentioned just adding an option for users to skip giving badges or an appreciation message.

However, after we showed the badge system to our sponsor, he mentioned that while we had the badge system to develop trust and show appreciation after the exchange, there was no interaction that occurred during the exchange. This inspired us to keep the appreciation message, but adjust where it would show up in the app and to make it a more fluid/simple interaction. The result of this change will be shown in the “Final Prototype” section.
final prototype
BADGES
BEFORE
/
AFTER
PROFILE (USER ITEMS)
BEFORE
/
AFTER
PROFILE (APPRECIATION MESSAGE)
BEFORE
/
AFTER
PROFILE (HEADER)
BEFORE
/
AFTER
PROFILE (SAVED ITEMS)
BEFORE
/
AFTER
personal takeaways
Being able to work on this project was really a once-in-a-lifetime experience. I learned a lot from my sponsor and was deeply inspired by the way my teammates think and work.

A challenge I had while doing this project was exploring a completely new space/industry and not knowing how the typical user flows look like. Since it was a project that was already well underway, it already had a large number of pages and assets. It was overwhelming to sort out and reorganize so many tabs, menus, and flows. When creating my own prototypes, trying to pick out the information that was most important to the user was especially challenging since the data in this app is not found in most apps.

Another challenge was making sure not to veer off from what was most important to our sponsor - we had so many great ideas coming into the project that sometimes we got a bit carried away. At times, we needed re-focus and think - at the core of our solution are we helping our sponsor with what he initially wanted?

All in all, I really appreciate Community Gearbox and our sponsor, Dante, for being so patient and helpful throughout this whole process. I also could not have put out the work that I did had it not been for the work of my teammates and our ability to make the project unique by working together.

Lastly, thank YOU for taking a look at my project!