Note: If you would like to skip to our final prototype, you can go to HERE.

WHAT IS RELAYPLAY?

RelayPlay is a platform that provides users with their top five personalized experiences each weekend created for them by local experts, as well as extra generalized experiences in the area.

PROJECT OVERVIEW

Date: April 2021 to June 2021

Collaborators: Haeun (Madison) Kim, Vanessa (Nessi) Komar, Jessie Lin, and Lu Zhang

Focus: UX/UI Design, Visual Design

Tools: Figma

USER RESEARCH

We created our own survey to send out but we were also able to see some feedback from previous user research that RelayPlay conducted. Thus, these are what we found out:

1. Too much scrolling wthin one page

2. Too much information about experience coordinator

3. Not being able to save/look back at old experiences

4. Lack of clarity at how to sign up for the events

As we can see the original screen, there is too much information on one page. It has many sections including "experience coordinator", "weekend request", "top 5 experiences", and "how to navigate". So, it is challenging for people to navigate and utilize the features that RelayPlay offers.

PROBLEM STATEMENT

How might we design a mobile/home page that is more informative and user friendly?

USER PERSONAS

persona-1

Amy Potter (21)

Wants/Needs

Wants to find places to have fun with her friends.

Can’t spend too much time on researching so she uses an app/website to search for experiences.

Frustrations

RelayPlay’s layout of experiences confuses her and is often hard to approach due to the website’s disorganization.

persona-2

Nathan Greer (32)

Wants/Needs

Wishes to find new places to have fun in with his co-workers and friends.

Wants to find events that fit his interests and likes. He wished he had recommendations from people who are knowledgeable with this area.

Frustrations

RelayPlay’s current “how to navigate” page is hard to find and the personalized page is confusing due to the expert’s profile page.

COMPETITIVE AUDIT

While RelayPlay has similar features to other competitors, what makes it unique is that users can request experiences based on their preferences. However, it needs to be more simple and easy for users to navigate and use.

competitive-audit

INITIAL WIREFRAMES

In order to have different possibilities for layouts, each member of our team created the wireframes separately.

My Wireframes

As I mentioned above, there is too much scrolling on one page. Thus, I separated it into different pages. I also added dropdown sections, so people can see more details when necessary.

wireframe-1 wireframe-2 wireframe-3

Other Wireframes

There are also wireframes from my teammates that you can see below.

other-frame-1 other-frame-2 other-frame-3
other-frame-4 other-frame-5 other-frame-6

FINAL WIREFRAMES

After creating different screens by individuals, we discussed with each other to see the best layouts that we had. Then, we combined the features that we had as you can see the final wireframes below. We will get more details about the features when we go through the high fidelity prototype.

final-frame-1 final-frame-2 final-frame-3
final-frame-4 final-frame-5 final-frame-6

HI-FI MOCKUPS (INITIAL)

With the branding colors and pictures from the website, we built on our hi-fi prototype after the wireframes. This prototype would allow us to create a realistic experience encouraging helpful feedback from usability testing.

As I mentioned above, there is too much information on one page. Therefore, our team separated the sections "experience coordinator", "weekend request", "top 5 experiences", and "how to navigate" into different pages.

coordinator-hifi request-hifi how-to-hifi

We also adjusted the "top 5 experiences" page to make it more accessible, as you can see the 2 gifs below.

save-event

Save Events

Users can save events by clicking on the save button in each event card. Then, if they want to take a look at the events they saved earlier, they can simply go to the "Saved" section for these saved events.

event-details

Event Details

When users click on an event, it drops down and shows a few details about the event. It also has a "See More" button allowing them to go to a separate page for that event with all details.

USABILITY TESTING

We conducted usability testing with 10 participants to identify where we could improve our prototypes.

9/10

said that the prototype was good overall

6/10

thought that the prototype was easy to navigate

4/10

got confused when trying to save an event

7/10

got confused when accessing the “How to navigate your weekend” section

ITERATIONS

Events

events-bna

"How to Navigate Your Weekend" Page

how-to-bna

Other Iterations

menu-navigation

Menu Navigation

We added the menu navigation for the iteration, and this is where users go between different sections.

saved-events

Saved Events

Instead of the switch button on the "Personalized Experiences" page, users can go and check these saved events through the menu navigation. Moreover, we slightly adjusted the "Saved Events" page by adding search bar and filtering function.

weekend-requests

Weekend Requests

This is where users can request additional experiences to fit their needs and preferences. Also, this page has bigger font size for better accessibility compared to the last design.

experience-coordinator

Experience Coordinator

Since some participants let us know that the "Experience Coordinator" was not really important, we decided to put it in a section on an event page ("Drinking Bar", for example) instead of having a whole separate page for convenience.

FINAL DELIVERABLE

Here is our design after the iterations. Enjoy exploring around the prototype! :)

NEXT STEPS

If we continue this project, we would like to have more usability tests and user research. So, we would be able to further iterate the platform. We also would like to collaborate with developers when they work on implementing our design.

LEARNINGS

1. Feedback matters

No matter how experienced we are, there are always aspects and details to improve, which we might not notice. This is why it’s always good to have usability tests for feedback and iterations.

2. Prioritize collaborating more

We didn't have enough opportunity to collaborate with co-founders and developers due to time limit and scheduling conflicts. Thus, we learn that we would prioritize it for our next projects, so we can communicate, learn from different perspectives, and know more details about what to improve.

If you're interested in, feel free to check out one of my other projects below: