An Overhaul of Team OpZone
Taking over the Team OpZone messenger system and bringing it new life.
Team OpZone is a new and exciting start up out of Boise, Idaho, focusing on helping the coaches of athletic teams ease their minds when it comes to the stressfulness of providing food for their enormous player base and staff. The creator, Julia Fishman, a previous Director of Operations for Boise State women's basketball, is looking to expand and become the one-stop-shop for all athletic operations.
This case study will cover the overhaul process that first began with meeting Julia and listening to her ideas for the future of Team OpZone, and ending with the final presentation of the newly designed Team OpZone website.
Project Information
Employer: Team OpZone
Project Type: Student Project
Role: UX Designer, Usability Tester
Project Date: March – May 2022
The Work
This project was done in collaboration with the College of Innovation and Design, Boise State University, and Team OpZone. Product Design Manager, Melissa Thompson, was at the helm of our UX design studio team, connecting us with Julia Fishman. As soon as we met with Julia, it was clear she was deeply passionate about improving her company website and offering the best possible experience for her users.
At the time of the publishing of this article, the main goal of Team OpZone is to connect coaches of collegiate athletic teams with restaurants in cities they frequently visit for games and tournaments. It can already be difficult ordering food for a family of five, now image trying to order for a team of 20 or more. Team OpZone aims to eliminate the burden of difficult ordering and improve the quality of life for its teams and restaurants alike, giving them direct access to each other.
Our Role as a UX Design Studio
At the start of this project, the Team OpZone website was a mostly-functional, high fidelity prototype that was only accessible to admins and a couple test-users. From the first review of the website, it was obvious that Team OpZone had a strong base, but was in dire need of a fresh appearance and rebuilt user experience. Gaining access as administrators and attempting to move through the user flow only furthered this take. From the landing page, to the user profile, and everywhere in between, it was the job of our UX design studio to bring new life to the Team OpZone experience.
My Role as a UX Designer
Our team consisted of nine UX designers, each focusing on a different aspect of the Team OpZone website. My specific role took aim at refreshing the Team OpZone messenger system. Julia made clear that the idea behind the messenger system was so that users could connect in regard to a certain review of a restaurant. This would allow coaches to hear from other coaches whether certain restaurants were helpful in their accommodations for large teams, or if it were best to try elsewhere. Julia asked that I take a look at adjusting the messenger from within the settings of Team OpZone, and make the ability to message users from their reviews more clear.
The Problem
At the time of first working through the Team OpZone website and attempting to locate the messenger system, I didn’t think it existed. It took me much longer than I would like to admit that there was in fact a working messenger system already in place. The problem started after logging in as a user of Team OpZone.
This image is the first page a user sees after logging in. To find an establishment, rather than typing in a desired search result and receiving information from that search, a user would first need to click on the search button with a clear search field. If a user began a search by typing a desired result in, no action would occur. Once done correctly, the map would fill with the participating restaurants. From there, a user can then type their food preference into the search bar and begin searching.
After an establishment has been decided upon by a coach, a card with information about the restaurant pops up. Here a user can see the restaurant's address, contact information, and some of its features through tags. At this point in the user flow, my role as a UX designer begins to show clearly. Below the tags are three buttons, “Show Comments,” “Add a Comment,” and “Reservation Request.” The “comment” aspect of these buttons lead to reviews left by previous users, and I was immediately confused by the idea of calling reviews “comments.” While it may make sense in retrospect, for me to be unsure meant another user may be unsure.
Once I read a review, the email of the reviewer was beneath, and signified as clickable. After clicking on the email, a new form showed up, allowing me to type and send a message to the user whose review I had just read. The messenger system not only existed, but it was fully functioning! I was thoroughly impressed by Julia’s current system and found it to be awesome that she had created this.
However, while the system was functional, there were still clear issues with its current form.
- The appearance was bleak and outdated.
- The process of finding reviews was difficult due to wordage.
- The process of creating a new message in response to a review was longer than necessary.
- There was no message center to be found after sending a message.
The Solution
If I were to simplify my goals of overhauling the Team OpZone website into one sentence, that sentence would be: “I want to make the process of creating and viewing messages easier.”
I wanted the user flow to be so simple and clear that my five-year niece could figure it out. For my first low-fidelity prototype, I created a three-page process where a user would find their desired restaurant, view the reviews of that restaurant, and then ultimately choose to contact a specific reviewer in regard to their experience.
The feedback on this prototype was excellent, except for one thing. Interestingly, our team leader, Melissa Thompson, was unsure if this was the actual goal of my roles' assignment. She thought I should include the ability to contact the restaurant directly as well. While I knew I was already on the right path, and the feedback from my team was solid, I figured this would be a great addition to the messenger system that I had not considered.
From this suggestion, I created a higher fidelity prototype featuring a specific restaurant's homepage with two major interactable buttons, the “contact” button, and the “reviews” button. Interacting with the contact button would lead to an overlay featuring a contact form to contact the chosen restaurant directly in regard to questions or concerns. While the reviews button would lead to a page similar to the original low-fidelity prototype featuring reviews of the restaurant, where reviewers can be contacted.
The next step of the flow included what would happen once a reviewer or restaurant was contacted by the user. After a message has been sent to either, the user would receive feedback that their message was sent successfully and be prompted with two options, view the message in their profile, or go back to the original restaurant homepage.
Here is where the challenge of creating an improved profile page came into play. I wanted the new profile to be a place where coaches could both easily access their previous messages and create new ones. At the same time also a place to view their own history and experiences on Team OpZone.
This profile page featured all the key components a profile page of Team OpZone should include. First, the abilities to return to the Team OpZone homepage, to contact Team OpZone directly, and to logout of their account. Then, the choices to explore previous and future cities, a log of their previously visited restaurants and reviews, and then of course their messages.
My goal with the message center was to make it as clear as the rest of the user flow. With this in mind, I chose to separate messages into two categories, those between coaches, and those between coaches and restaurants. I believed this separation would allow a user to maintain organization, and easily access their desired chats. From the message center, a coach could create a new message to either another coach or restaurant, view and respond to existing messages, and delete messages that are no longer relevant.
Here are three examples of the descriptions above:
Creating a new message.
Viewing and respond to existing messages.
Delete old messages.
Ultimately, this was the end of my solution design for the overhaul of Team OpZone’s website, where I was tasked with focusing on the messenger system. During my final presentation to Julia Fishman, I showed the entirety of the three main flows.
The first being moving from the landing page to the desired restaurant, where I then wished to read through the reviews, at which point I found one that was relatable to my situation and contacted that reviewer through the message center.
The next flow shown was when I found the restaurant I thought I would order from, but wanted to reassure myself of a few things. For this, I contacted the restaurant directly, with the “contact” button present on their page. A contact form appeared, and I was able to send the restaurant a message directly.
The last flow involved working my way to my user profile, where I then viewed the two messages I had previously sent. After viewing those, I realized I could delete one of the messages as it was no longer needed. I then created a new message to a different user from scratch. Each available option and path were shown without issue.
Here is on overview of the entire prototype!
If you’re interested in trying the prototype, here is the fully functioning prototype.
Team and User Testing
There were many changes made to my design and flows throughout the seven weeks, many thanks to my team and user testing, all of them for the better. The most critical takes of my original designs included adding hover states to all functional buttons and adding more options to various entities.
When it comes to the multiple overlays of my design, none featured a physical “cancel” or “opt out” button. This was due to the idea I had that users would simply click out of the overlay to close it. However, during user testing this proved to provide enough information to the users, many of which felt stuck once at an overlay. The additon of an ‘X’ icon as a path to “opt out” of an overlay increased the success of certain paths immensely. A similar story could be told about the message center. Once featuring an ‘X’ icon to delete old messages, one specific test user mentioned I should change the ‘X’ to a trash can, as the trash icon would be a much better signifier.
Summary
This project took the entirety of it’s seven week schedule. From start to finish, this flow of my own path was stressful and quite tiring. However, looking at the final product now, I am proud to say that I worked on revamping the Team OpZone website. I believe that this project was a great success and a step in the right direction for my career as a UX/UI designer and am incredibly excited about my next UX design challenge. Last but certainly not least, I am incredibly thankful for the oppurtunity to work with Julia Fishman and her company Team OpZone, and my UX design team and our lead, Melissa Thompson.
