Peeps Case Study

This is part of Sayra’s portfolio. Click on this LINK to see more work.

Prototype LINK

This capstone project focuses on hitting deadlines and choosing strategic decisions to meet business goals and constraints. We were given five scenarios to choose from. Each had context about the company’s business goal, target user, brand information, among other details. For this project, I focused on a mobile platform for an industry I would consider working for. As an experienced hostess and event coordinator, the social product scenario for events caught my attention right away. I sympathized with the app further when I knew it was meant for foreigners that want to meet new friends. I’ve been the new girl several times in my life and finding the right people to click and share similar interests with can be a struggle. Peeps app helps users go out and do activities in person to meet new friends with similar interests.

My Role

For this app, my role was to think up a project plan, where I would decide which methods to use for low and high-fidelity design and testing. All while keeping in mind the time-frame I would give myself to carry out the project.

My goal for this project was to finish it within two months. In the photo above I created the project plan for one month, keeping the flexibility of stretching it a few weeks without hitting the two-month mark.

The project took a total amount of time of a month and a half from start to finish. During this time, I utilized the following methods:

• Competitive research to see what other products offer and lack. Thus getting inspired on possible solutions and features of value.
• Secondary research instead of note-taking. This method would allow more in-depth notes of the pain points and needs of users.
• Affinity Map to cluster ideas and choose which points to focus on.
• Findings summary
• User flows with red routes. I decided to create the flows through red routes to understand step by step the elements the user would interact with through a task.
• Sketches. I created these by hand for time efficiency.
• Wireframes. I iterated on the sketch design and added more features and screens.
• Usability test script.
• Conduct Guerilla Usability Tests (5). Here, the wireframes were put to the test with five users.
• Find and modify a UI Kit for the high fidelity design.
• Conduct remote usability tests (5)
• Iterate on the final design.

The tools I used for this project were: Figma, Illustrator, and the E-commerce application UI Kit by Fively.

PHASE 1 DISCOVERY — Understand / Map

What’s the problem?

Moving to a new city or town can be intimidating. Making new friends can be a challenging task when fear and anxiety overwhelm you. Peeps App encourages people to step out and make new friends through events. However, the business team identified a problem in that the number of people who say they are going to an event is significantly higher than the number of people who attend. The data shows that, on average, 20% of people who say they’re going end up attending. The goal is to implement features that more closely align these numbers by increasing the conversion of accepted invites to event attendees.

To design a solution, the following information had to be contemplated:

1. Important Information from the Product Manager

• Users may not be getting effective communication about the upcoming events (ex. Emails, reminders, etc.)
• Possibly users need an incentive to attend but this incentive would need to be cost-effective for the company

2. Examples from the Industry

• MeetUp
• Facebook
• Eventbrite

3. Target User

• 32–55 years old
• The user base is an equal split between men and women
• Use phones and desktop applications equally
• Middle class
• Recently relocated to a new city

4. Information about the company’s brand

• Brand personality — a trusted friend that cares about helping people and making a difference in the world
• Brand attributes: Caring, Familiar, Humorous, Optimistic

The Solution

Through design thinking methodology, I was able to empathize, define, ideate, prototype, and test a solution to create a mobile app. I decided to implement an app with features on personalized reminders, cost-effective incentives, reviews, among other features that can boost show rates. I also included an “Interested” feature that can differentiate the maybes from people attending.

Secondary and Competitive Research

To formulate my solution, I kept the following questions in mind while conducting my research:

1. What makes people engaged/want to attend an event?
2. What makes users miss an event?
3. How can users get reminded to attend an event?

I started the secondary research by looking up articles, blogs, videos, and forums to find why people attend events. I also searched for methods, types of reminders, and the best ways to increase overall attendance. In my findings, I noticed most people attend events to connect with others. Some others like to go for the food and fun of it. In terms of reminders, most people need more than one reminder method to prevent forgetting something. This information, along with my personal experience reminding customers about their appointment let me conclude that timing and customization of reminders are essential. When it comes to grabbing people’s attention, one method may be more effective on one person than the other, therefore having the flexibility to choose is imperative. Timing also takes an important role since they need to be enforced starting a few days before the event, giving the user enough time to plan and prepare accordingly.

“I set phone alarms to go off 15 mins before every meeting / call etc.”

— Reddit user (2017)

For the competitive research, I looked up the main competitors: Facebook, Eventbrite, and Meetups. I studied and took notes on the features I liked and considered added to the effectiveness of their product. I particularly liked the way Facebook splits attendance between going and interested. I believe this distinction will help reflect a more accurate number of attendees by separating those who are unsure, and less likely to attend right off the bat.

Affinity Map

I organized the findings of my secondary research into five categories: Increase interest, reminders, belonging/bond, incentives, and personalization. I chose these categories based on key findings that would allow me to find 1. What makes people want to attend an event, 2. What makes them feel a connection to the brand, and 3. Ways to remind people to attend an event.

In the first category, Increase Interest, I included information like event details, reviews, lists of who’s going or interested to grab people’s attention and encourage them to attend the event. The Incentives section also adds interest by offering prizes, food, coupons, and the opportunity to increase your network. In the Reminders section, I included ways in which a participant could get notified about the event so they don’t forget to go. In the Belonging/Bond section, I included ways to engage participants even further by establishing a connection between them and the brand. By using event hashtags, and ice-breaker dynamics, a personal bond is formed before the event. This can be done through discussion sections or polls in the event.

To increase the show-up rate of participants, I focused on reminders and ways to boost participant interest in the event through Incentives, providing the right event information, and creating a sense of community.

Persona

PHASE 2 DESIGN — IA and Low-fidelity Designs

Red Route User Flows

I created a red route for each flow, which represents the actions and navigation we want the user to take: 1. Attend an event the user is interested in. 2. Customize their reminder method. 3. Engage the user in an icebreaker activity to connect with the brand and win a price (incentives.). This allows us to test all four of our main targets (interest, reminders, bond to the brand & incentives) to increase attendance.

Sketches

To visualize the pages and features of the app, I sketched screens on mobile device templates. Due to time constraints, I decided to sketch by hand and focus only on mobile devices as the main platform. Here, I included only the login page, the dashboard, which would be the MY EVENTS page. On this page, I wanted to feature the upcoming event at the top as a reminder, and have a couple of lists of events to invite the user to attend an event. This page is then followed by the SAVED EVENTS page, which displays all the events the user is interested in. Then we have the EVENT PAGE, which is one of the most important screens of the app. Here we convince the user to attend, by providing the right information and features to increase interest. And finally, the ATTENDING screen, which displays the notifications options the user can choose from to get reminders.

Wireframes

While elaborating on the wireframes, I noticed that I needed to incorporate few changes:

1. I added an extra screen to remind users about the raffle.
2. I included small avatars on every featured event to create more interest to see who’s going.
3. I created an alternate dashboard and event page, for users that are attending the event. The event screen unlocks the ability to see and post comments.
4. Instead of sharing the event, I reworded “invite a friend” and included an add friend icon.

PHASE 3 VALIDATE — Guerilla Usability Test

Guerilla Test

Using the wireframe design above, I conducted a Guerilla usability test on five people. Before getting into the tasks the user had to carry out, I started the test by asking them a few interview questions about their use of events. I decided there was not enough time to apply entire interviews, so having the user’s attention, I grabbed more information before giving the following tasks:

1. Find their saved events.
2. Attend a saved event and choose the method they would like to get reminded about the event.
3. Become engaged with their community. (Participate in the raffle)

I recruited participants by asking friends and family members that fit the target user.

Findings:

1. Mini Interview

• 4 out of 5 users have only used Facebook events, which positions Facebook as Peeps’ main competitor. This also suggests that users are familiar with Facebook’s interface design, which should be taken into account when designing for this type of user.
• Users tend to miss events due to forgetting or something else that comes up. This indicates that reminders are not very successful, and the event does not capture their interest enough to attend.
• There is also a pattern of users struggling to keep up with FB notifications. This may be a big reason why they miss their Facebook event notifications. For peeps, this indicates an advantage since it will not compete with complex app notifications.

“If I don’t attend an event it’s usually because I forgot, I didn’t get a notification, or I found something more interesting to do.” — Alejandra (2021)

2. Task 1 Results (Finding their saved events)

• Two users expected to see saved events under my events page. This suggests that the placement of the saved events could be flawed. However, the saved events tab is under the bottom menu bar that experiences visibility issues. For the first round of the design testing, we tested if adding design takes care of this issue.

3. Task 2 Results (Attending saved event/choosing notification method):

• Most want text notifications. Adding an option to choose how to receive a reminder will improve attendance since most users said app notifications don’t have much weight compared to a text or an email reminder.

4. Task 3 Results (Engaging with the community through the raffle)

• The majority of users didn’t read the event description and missed the raffle information. Adding a bold card exclusively for the raffle information could solve this problem.

PHASE 4 DESIGN — Modifications / High-Fidelity Design

Branding

Having the app’s skeleton ready, it was now time to decide the look and feel of Peeps. Based on the information provided by the company’s brand, the personality should reflect “a trusted friend that cares about helping people and making a difference in the world”. This means having caring, familiar, humorous, and optimistic attributes.

Color Palette

I associate the caring and optimistic personality with orange and yellow hues. Orange is known to stand for friendliness, sociability, adventure, and fun. Therefore, I knew this would be the main color of the brand. As a secondary color, I decided yellow would be a great fit due to its relation to optimism, warmth, and positivity. Shown below is the brand’s main color palette.

Logo

For the name of the Peeps app, I wanted it to speak unity, belonging, and friendship. A word that could be related to the word pals or friends. For the isotype, I decided to go more literal.

UI Kit

For this project, I was asked to find and modify an existing UI Kit to save time. I found it difficult to find a kit that had the design I had envisioned, in the program I chose to use: Figma. After researching, I found the E-commerce application by Fively UI Kit. This kit had many of the elements I wanted to incorporate into the design. Below is a capture of two screens from the Fively UI Kit:

High-Fidelity Design with Modifications

High-fidelity Design and Prototype

After many UI tweaks, I was able to design the final design for testing. The major changes include the roundness of the buttons and boxes, spacing of elements, alignment, and general design consistency of colors and drop-shadows. This gave the design a more professional look.

Prototype LINK

PHASE 5 VALIDATE — Usability Test

Remote Usability Test

For the last round of testing, two of the most confused users from the guerilla test were tested again to find if the confusion was solved. Three new users also joined the usability test for a total of 5 user tests. Only the new users were asked the interview questions before the tasks.

Findings

“I would still like to see if anyone I know is also going.”

- Eli (2021)

1. All users commented they enjoyed the logo. This created a pleasant first reaction that indicates their initial engagement to the brand.
2. The raffle card caught all user’s attention. This means that creating a separate section increased visibility and interest in the users.
3. I noticed that a couple of users would like to know if someone they know/invited is attending the event. This could mean adding a text line on the event page saying x friend and x number of people are also going.
4. Overall, implementation of design solved visibility issues found on first user testing.

PHASE 6 DESIGN — Final Design

Due to the clarity shown in accomplishing the usability test tasks, there was only one modification applied to the final design. Users still seemed to demonstrate social anxiety, wanting to know who else will attend. This led to the addition of an extra line to let users know which of their friends they’ve interacted with before are also going.

Iterations

Before

After

During this phase, I also decided to include an extra screen of how an app reminder would look like. Below we see how a personalized notification is shown. It displays important information, such as who, what, and when along with a call to action to entice users to participate.

New notification screen:

Final Design

Below is the final prototype with the change and the new screen applied.

Prototype LINK

WHAT I LEARNED

As the first time working with UI kits, I found myself struggling to find the perfect one. However, I learned that finding UI kits is not about finding the one with every single element you’re looking for, but rather finding one with helpful elements that can be tweaked to fit a company’s needs.

After testing my design with users, I noticed how much the app is driven by friends. I was surprised to find that most users cared about knowing who would attend the event. Which became one of the most critical factors to ease social anxiety, drive interest and increase attendance.

CHECK OUT MY PORTFOLIO SITE OR SEE BELOW FOR MORE CASE STUDIES.