Duration 10 weeks
Team 4 designers
Role User Research, Low-Fidelity Wireframe Design, Usability Testing, Design Iteration
Tools Figma
PeterMeeter is a mobile app that connects UC Irvine students to clubs and events based on their interests. It solves challenges faced by students who use multiple mediums to discover, join, and stay up to date with clubs.
Our team's design won 1st place in Design at UCI's 2020 Project Teams Program.
Students don't have a common platform for finding events and clubs on campus. Methods for finding events and clubs depend on an individual's personality and lifestyle.
During our team's first meeting, each member shared how we discovered Design at UCI. When I said I found the club on Facebook, Kayla, a freshman, remarked, "Who still uses Facebook, anyways?" A quick survey revealed the different ways we discovered clubs and events - Reddit posts, physical flyers, word of mouth... the list went on and on.
With so many platforms, information was bound to be lost. For example, if the Astronomy club only advertises on Facebook, but Jane, a Physics student interested in stars, only browses Reddit, there would be no opportunity for Jane to discover the Astronomy club.
How might we make a common platform to help students quickly find, explore, and share events happening at UC Irvine?
Students can explore a diverse set of categories. Selecting a category, such as Creative Arts, shows all clubs and events within it. For efficient navigation, users can further filter and search.
Students can learn about an event's location, date, and the club hosting it through event pages. They can join, leave, share, and upvote events.
After viewing an event, if students aren't sure whether they want to go, they can star the event. This allows them to revisit the event later in their Profile and decide.
The goal of this research was to identify and understand existing problems students faced when looking for clubs and events to join on campus. Our research revealed that the existence of multiple platforms suggested an opportunity for a common platform encompassing all information regarding clubs and events.
RESEARCH
We created a brief survey to determine the platforms students use to discover clubs and events. We received 20 responses from 1st - 4th year students at UCI. The results supported our hypothesis - different people have different methods of club and event discovery.
Fig 1. Underclassmen had 5 methods to find clubs/events, compared to 3 methods for upperclassmen. Only 27% of underclassmen used Facebook to find events compared to 50% of upperclassmen.
RESEARCH
We conducted user interviews with 8 students of varying majors and years (3 freshmen, 1 sophomore, 3 juniors, 1 senior). We used a card sorting exercise to organize the qualitative data.
Fig 2. Card sorting exercise!
Fig 3. Our digitized affinity diagram.
RESEARCH
To wrap up our research, we looked at potential competitors to our app's idea. We studied UCI Now, an app showcasing events occurring at UCI's Student Center, Meetup, an app used to organize groups based on interests, and Facebook Groups, a Facebook feature used to discover and engage with communities.
Though many UCI clubs advertised on Facebook, the likelihood of their posts showing up on a person's feed depended on the amount of post interaction (larger club = usually more interactions). Thus, clubs with fewer amounts of people had a smaller chance of reaching new members.
UCI Now
Strengths
-Takes user to event location.
-Access to all clubs in Student Center.
Weaknesses
-No club/event recommendations.
-No live updates if event changes.
MeetUp
Strengths
-Explore based on interests.
-Save events to revisit.
Weaknesses
-Not limited to only UCI clubs/events.
-Limited sharing of events.
Facebook Groups
Strengths
-Notifications for upcoming events.
-Users know if friends are going.
Weaknesses
-Reach of club depends on club size.
-No filters within group, only search.
Fig 4. Competitive Analysis between UCI Now, Meetup, and Facebook Groups.
RESEARCH
Through our research, we determined the following 3 insights. These 3 insights directly influenced our design decisions of what features the app should have.
50% of interviewed students searched passively ("I'll wait until a club approaches me or I see something on my feed!"). The remaining 50% stated that they searched based on interests.
25% of interviewed students reported that they attended involvement fairs hosted by their school departments, while 12.5% were members of major-only Facebook groups.
37.5% of interviewed students revealed that when they discovered events, they would screenshot the event or mark themselves as "Interested" instead of "Going" on Facebook. Reasons for this included a fear of the post disappearing, uncertainty of their decision, and being too busy to decide in the moment.
RESEARCH
We created 3 personas, each representing a different use case of our app. Their needs and frustrations were based on findings from our user interviews.
Fig 5. User Personas for 3 Student Types
DESIGN
We sketched ideas individually and combined them through a collaborative whiteboarding exercise.
Fig 6. A few of the many sketches done on paper, and some collaborating on the trusty ol' whiteboard.
DESIGN
Once we came to a consensus on the screen layouts, we created our wireframes in Figma.
Fig 7. Our ideas coming to life!
TEST
We tested low- and mid-fidelity prototypes with 4 college students and iterated the design of PeterMeeter. From the user testing results, we were able to catch 3 main issues between the user's mental model of the app and the actual model, shown below.
Feedback: 100% of tested users misunderstood the pin function. 3 users understood that the "Pin" icon was supposed to represent saving an event, but didn't understand why it was a pin instead of a bookmark or other icon. 1 user thought "Pin" meant pinning the event as a banner on the screen.
Solution: We replaced the "Pin" icon with a more familiar "Star" to eliminate confusion.
Feedback: 1 user expected to see a search bar on the Home page, instead of clicking on the Search navigation icon to search and explore events.
Solution: We separated the Search function from the Explore function by introducing a search bar on the home page and an Explore page denoted by a compass icon in the navigation bar.
Feedback: On the newly added Explore page, 2 users mistook the upvote button as an expand/collapse button.
Solution: We changed the upvote button to an upvote arrow, included upvote counts, and kept the original expand/collapse button.
DESIGN
We focused on the Home, Explore, and Profile pages for our high fidelity mockups.
Fig 8. Frames from our Hi-Fidelity prototype.
Sophia, Kayla, and I pitched our design to the Design at UCI club and received 1st place out of 4 teams. We were each awarded a Design at UCI t-shirt and gift card as a reward! Giving the presentation was the cherry on top to a fun, challenging, and rewarding first UX project.
Fig 9. Me, presenting our pitch to Design at UCI!
Fig 10. Showing off our prizes!
Edge case users can provide valuable insights
We interviewed 1 student with an international background. She helped provide a new perspective we hadn't considered - when looking for clubs, she looks for people who speak the same native language. Ultimately, we included an ability to filter by language.
My engineering experience benefits me as a designer
Coming into this project, I was unsure if my passion and efforts would translate into results. I leveraged my ability to break down issues in order to synthesize information into design insights and decisions. I also pushed myself to explore different facets of the design process and become comfortable with being uncomfortable.
Keep the users in mind
Whenever we caught ourselves thinking, "Oh, this could be cool!", we had to remind ourselves, "Is this function what our users need?" Although we began with research and finished with design, I learned that good design should reflect research every step of the way.
Seek feedback early and often
During our usability testing sessions, we realized our design intentions didn't always translate clearly to the user. Furthermore, changing higher fidelity prototypes was much more work than changing lower fidelity prototypes! If I could go back in time, I would have advocated for more testing, earlier than later.
Collaborating with my team
There were so many fun moments that I won't forget - from feeling like we hit a mental wall during card sorting, to excitedly pitching our ideas to each other, to fervidly tweaking our designs. I always loved seeing the gears turning in everyone's brains and the collaborative environment we upheld.
Talking to users
I also enjoyed talking to users during usability testing. It was interesting to hear everyone's perspectives, discover their issues, and resolve them through a design change.