ComfortConnect

September 2023

1 Week

Roles

Online commerce platform where users can purchase event tickets and meet new friends

Project Type

Individual student project at Springboard

Problem

The ComfortConnect business team has discovered that on average, only 20% of people who say they are going, actually attend the event. They believe that users may not be getting effective communication about upcoming events, as well as, users needing an incentive to attend events.

The ComfortConnect business team has discovered that on average, only 20% of people who say they are going, actually attend the event. They believe that users may not be getting effective communication about upcoming events, as well as, users needing an incentive to attend events.

Background

A startup company launched a product that helps people meet new friends. The goal of the application is to help users step out of their comfort zone and meet new people while doing in-person activities.

A startup company launched a product that helps people meet new friends. The goal of the application is to help users step out of their comfort zone and meet new people while doing in-person activities.

Design Process

Discover

Competitive Analysis

Competitive Analysis

User Interviews

User Interviews

Persona Building

Persona Building

Design

User Flows

User Flows

Low Fidelity Wireframes

Low Fidelity Wireframes

Prototyping

Prototyping

Validation

Interviews

Interviews

User Testing

User Testing

Discover

Competitive Analysis

In the first stage of the design process, we begin with the discovery phase. We start this phase with a competitive analysis, identifying our biggest competitors in the market: Meetup, Groupon, and Eventbrite. As part of this competitive analysis, we will conduct a SWOT analysis to evaluate the strengths and weaknesses of each competitor and identify potential opportunities for our application. This will help us understand the competitive landscape and uncover areas where we can differentiate and excel.

In the first stage of the design process, we begin with the discovery phase. We start this phase with a competitive analysis, identifying our biggest competitors in the market: Meetup, Groupon, and Eventbrite. As part of this competitive analysis, we will conduct a SWOT analysis to evaluate the strengths and weaknesses of each competitor and identify potential opportunities for our application. This will help us understand the competitive landscape and uncover areas where we can differentiate and excel.

User Interviews

In the next part of the discovery phase, we conducted user interviews to determine which features would benefit our users the most. We interviewed five individuals and focused on three main topics:

  1. Friendship and Social Anxiety: We aimed to understand how people make friends and whether social anxiety affects their ability to form new connections.

  2. Impact of the Pandemic: Given the recent pandemic, we explored how it has impacted people's social skills and their willingness to attend events.

  3. Event Preferences: We inquired about the types of events and activities the interviewees enjoy, and whether the possibility of winning monetary prizes would influence their participation.

After gathering all the responses, we analyzed the data to draw valuable insights.

Kevin Yang

Kevin Yang

Vivian Wang

Vivian Wang

Matthew Liew

Matthew Liew

Vincent Huang

Vincent Huang

Emily Stroudsman

Emily Stroudsman

Insights (from the interviews)

Pandemic Affect Social Skills

For most of the participants, they described how the pandemic affected their communication skills.

Group Settings Help Socialize

Some participants prefer being in a group setting when meeting new people.

Friends Invite to Events

Usually friends invite participants to events or other activities.

Monetary Value Motivation

Many participants are willing to accept monetary value to attend events and activities.

Making Friends in Person

Most of the participants prefer making friends in person and getting to know them through mutuals.

Meeting New People

Most participants met new friends when going out or traveling.

Personas

After the user interviews, we created user personas for Vincent Stanley and Allie Thorton. These two personas were created based on the responses we have received from the user interviews. Vincent Stanley is more of an introvert that enjoys being at home and talking to his friends online. He wants to socialize and be outside more. As for Allie Thorton, she is very career orientated and finds it difficult to make friends due to scheduling and interests. These two personas give us an idea of what the average user might want in the application.

User Flows

The next step after gathering information from the user interviews , we move onto the next part of the information architect and create some user flows. These user flows represent the red routes that we think users will most likely use and are the most important when using ComfortConnect.

The next step after gathering information from the user interviews , we move onto the next part of the information architect and create some user flows. These user flows represent the red routes that we think users will most likely use and are the most important when using ComfortConnect.

Homepage

Habit Tracker

Start

End

Homepage

Event Page

Checkout

Choose Date

Do I want to attend an event?

Yes

No

Attending an event

Habit Tracker

Profile

Start

End

Homepage

Pull up Tracker

Click on Profile

Click on Tracker

Look at weekly/monthly goals and incentatives

Start

End

Event Page

Click ‘Verify’

Take Picture

Camera

Verifying Attendance

End

View Practices

Practice Socializing

Habit Tracker

Start

Homepage

Pull up Tracker

Action

Page

Decision

Question

Start/End

Creating an UI Kit

Before moving on to the design phase, we create a UI design kit. In the UI kit, we created buttons, icons, input fields, and etc. We also included the typography and colors that were going to be used in the project. The design elements used in the design kit were influenced by competitors and other websites that are similar in function. This design kit will be used in the wireframes and will be used universally throughout the project, so it is crucial that we get the colors, text, and icon to be as readable as possible.

Before moving on to the design phase, we create a UI design kit. In the UI kit, we created buttons, icons, input fields, and etc. We also included the typography and colors that were going to be used in the project. The design elements used in the design kit were influenced by competitors and other websites that are similar in function. This design kit will be used in the wireframes and will be used universally throughout the project, so it is crucial that we get the colors, text, and icon to be as readable as possible.

Desktop

Mobile

Design

Low Fidelity Wireframes

After gathering all the information we need, we start working on the low fidelity wireframes for the application. For this step, we create a basic foundation, a skeleton of what we would like on the website and application. We added features that we think are important and the basic features. This low fidelity does not contain any images or colors, it is just to show where features are located and gives us a basic layout of the pages. Below are examples of the pages we created in the low fidelity wireframes. We have the homepage, information or event page, and the Thrivetracker.

After gathering all the information we need, we start working on the low fidelity wireframes for the application. For this step, we create a basic foundation, a skeleton of what we would like on the website and application. We added features that we think are important and the basic features. This low fidelity does not contain any images or colors, it is just to show where features are located and gives us a basic layout of the pages. Below are examples of the pages we created in the low fidelity wireframes. We have the homepage, information or event page, and the Thrivetracker.

Updating Design Kit

After creating the low fidelity wireframes, we used our design kit to implement all the changes to the project. The next step was for us to add the colors, images, and different designs to give a better understanding of the project and to prepare it for user testing.

User Testing

After the low fidelity wireframes and updating the project with the design kit, we are able to move onto user testing. For the user testing, we used the same five people we used for the user interviews in the beginning. We had some tasks for the users and overall wanted to see how they navigated and what UI elements were confusing to the users. This user testing allows us to incorporate more changes into the high fidelity wireframes. Here are the top changes we needed to make based on the reactions and feedback of the users.

Buttons were not uniform

There were some sections where the buttons were different, leading to confusion. Size and color need to match throughout the application.

Progress tracker was hard to see

We could include a slide-up tab for the progress tracker with a nice distinguishable background.

Website lacks 'personality'

There is a lack of illustrations and diverse colors, very bland with a white background.

Text difficult to read

In some sections, the text is difficult to read because it is too light, there is some hierarchy in the text, but there are some sections where the hierarchy is not prevalent.

High Fidelity Wireframes

After receiving feedback from the user testing, we implement the changes to the wireframes. Some of the changes we made were adding a background gradient to ensure that it is not too boring and give the project life. Other changes we made were to the ThriveTracker and buttons where the colors were changed to ensure a better user experience. In the end, there is a difference between the low fidelity wireframes and low fidelity wireframes, but we also want to make sure that there are not many big changes where the whole application looks different.

Validation

Reflection

This project was a great experience to be apart of. It has taught me that throughout the project, even though a designer might think they are very aware of the different design elements, there are many element mistakes that might slip under the designer. I went back and forth many times throughout the project working on only one design element, but focusing on perfecting it as much as possible. For the project, I also realized how important user experience is and how seamless it should be to navigate throughout the page and to always be mindful of not adding something to slow down the navigation of users and add new steps in certain user flows.

Takeaways

  • Perfection isn't always attainable within the constraints of time and deadlines.

  • If we become too fixated on refining a particular feature or aspect, we risk missing the overall project deadline, which could disrupt the entire design process.

  • The necessity of always keeping our business objectives at the forefront of our efforts.

  • Ultimately, our goal was not only to create a product that consumers would enjoy but also to develop a product capable of generating substantial revenue for the company.

Next Steps

  • Improve communication for upcoming events with maybe pop up notifications or alerts.

  • Add more in-depth description for the events.

  • Maybe add a page where users can answer some questions about the event to see if they would actually enjoy it.

Project

Brand Guidelines

Presentation