Boost Mobile Ordering App Redesign
UX/UI DESIGN, UX RESEARCH, USER-TESTING, PROTOTYPING, MARKETING, GRAPHIC DESIGN
BRIEF / PROMPT
Create a solution for a problem at Northeastern University that relates to accessibility to information. Identify a target audience and conduct research to identify a core problem your target audience is experiencing, then design a solution and get feedback to improve and create a final solution that is backed by research, user-testing, and iteration.
OUR WORK
In this group project, we first started by identifying a target audience, which was first-year students at Northeastern University, who are required to have a meal plan and on-campus housing. After conducting several interviews with members of this target audience and conducting other research, we identified the common problem of a lack of accessibility to on and off campus dining options and information. We then decided to redesign the Boost Mobile Ordering app, which is a popular mobile ordering app for some of Northeastern University's dining options among students. We added new useful features and redesigned parts to improve the user experience for the Northeastern University community.
The goal of the project was to create a more intuitive and user-friendly app that would make it easier for Northeastern students and faculty to access on and off campus dining options and information with ease.
MY ROLE
I contributed to this project as a UX/UI designer and researcher. I conducted user interviews with several students and user-testing with 30+ people both on my own and with the help of project team members. Nandini and I worked on the UI designs together and I created all the prototypes in Adobe XD. I also added more on my own to the project afterwards, such as creating the marketing material and mock-ups.
WHEN
December 2021
TOOLS
Illustrator
Adobe XD
Procreate
Photoshop
RESEARCH
We interviewed 8+ first-year students to find out what problems they had related to accessibility at Northeastern University and asked them specific questions related to how accessible the dining hall information and resources are. We also conducted online research on the topic by finding posts about Northeastern's dining services online and navigating the currently available resources ourselves.
The general feedback we got was:
-
There are too many different places to access different information regarding dining services at Northeastern University (e.g. Boost Mobile app, DineOnCampus app, newsletters, Husky Card Services, NUdining.com, NU dining social media accounts, signs throughout campus, etc.)
-
Long waiting times and not enough seating are a daily problem at the dining halls and Outtakes (a to-go dining hall option). Students report having to wait for seating, not wanting to enter a dining hall after seeing how crowded it is, and sometimes waiting 30+ minutes for Outtakes. These waiting times and lack of seating only worsen during special events at the dining halls.
-
The operating hours of dining options are unclear as the hours vary throughout the week and may change for different events or times of the year. Many students complained they had gone to the dining halls only to realize they were closed.
-
It is inconvenient and time-consuming to check how many meal swipes and dining dollars a student has left as they must log into the student hub and check in Husky Card Services. There is also no way to see how many meal exchanges a student has left for the week, so students must remember themselves or look at their transaction history on Husky Card Services.
PROPOSED SOLUTION
Modifying the pre-existing Boost Mobile app by adding new useful features for Northeastern University students. Most students already use this app regularly as it offers mobile ordering for the most popular fast food dining options at Northeastern University, so it makes sense to make this app the unified place to find all information relating to Northeastern University dining.
Possible new features include:
-
Section to find on-campus dining information (e.g. dining hall hours, menus).
-
Section to find off-campus dining information (e.g. which places accept Northeastern University's dining dollars, operating hours, menus).
-
Ability to check how many dining dollars a user has left.
-
Ability to check how many meal-swipes a user has left for that week.
Original Boost Mobile Ordering app screens (Before Redesign):
BRANDING + FINAL PRODUCT
The final result is a redesigned app that is not only visually appealing (building upon the pre-existing Boost Mobile branding) but also easy to use with new features made specifically with common Northeastern University problems in mind. The redesign makes it easier for Northeastern students and faculty to access on and off campus dining options and information with ease.
In addition to redesigning the app user interface and features, I also designed advertisements and marketing material aimed to help educate the Northeastern University community of the app's redesign and to increase adoption and engagement of the app.
FIRST PROTOTYPE
Using information and ideas we gathered from the research phase, we designed and created a prototype in Adobe XD that added onto Boost Mobile's existing app features. This prototype was used during user-testing where we collected data on what could be improved and implemented in the second prototype.
During user-testing with the first prototype, users were asked to:
-
Find where to access dining hall information.
-
Find additional information for the Stetson East dining hall (e.g. hours, menu).
-
Find where to access off-campus dining information (which places accept Northeastern Dining Dollars).
-
Find where to check how many Dining Dollars or meal swipes they had left.
USER-TESTING RESULTS
We conducted user-testing with our first prototype with 30+ first-year students, Mariana Ramirez (a lecturer at Northeastern University for design courses), Daniel Han (a Teacher Assistant), and Ming Liu (a software engineer). User-testing was conducted on an iPhone that had the prototype downloaded via the Adobe XD app.
The general feedback we got was:
-
The concept of modifying the pre-existing Boost Mobile app is interesting and smart as students already use it, so there won't be a need to convince students to download or use another new resource.
-
Remove the banner as it takes up a lot of space without providing many benefits.
-
Add a way to check meal exchange information.
-
Add more information to off-campus options.
-
Add more contrast to the user interface design, specifically for the navigation bar that doesn't really stand out.
-
Some users find it difficult to tap on the navigation bar menu items as the "touch areas" are too small.
-
Perhaps implement a way to check when Outtakes or other dining halls are busy.
-
Some users took longer than expected when trying to get back to the home page from the account page since there is no back button and the user must use the home button instead.
SECOND PROTOTYPE
Using the feedback and ideas we received from user-testing with the first prototype, we designed and created a improved prototype in Adobe XD with modifications to improve the user experience.
Improvements include:
-
Removing the banner to make room for more information, features, and increase the scroll/view area.
-
Changing how the navigation bar looked to make it more intuitive and have better contrast.
-
Increasing the "touch areas" on the navigation bar buttons to make it easier to tap and use.
-
Adding the Outtakes page with a new feature that allows users to view "busy times."
-
Adding the ability to check how many meal exchanges a user has left for the week.
-
Adding the "Wings Over Boston" information page in the "Off Campus" dining section.
-
Adding a back button from the account page (so that users do not need to use the home button, which is less intuitive).
USER-TESTING RESULTS
Students enjoyed the improvements we made from the first prototype and believe the new features and enhanced user experience are good improvements. Students especially enjoyed the features where they can check how many dining dollars and meal swipes they have left (including when they expire), and being able to view the graph showing typical busy times at specific dining locations since overcrowding is a recurring problem for students.