I was tasked with redesigning an existing mobile app. For this project I chose the app RunPee, an app that tells you the ideal time to leave a theater to go to the bathroom without missing the best parts of the movie. I went through rounds of testing and research to improve the product from the original version. The redesigned version streamlines the navigation through the app from the initial home screen to the timer, the main component of the app. I also adjusted the colors for a more aesthetic and quick to read at a glance interface while retaining the dark mode required for movie theater settings.
RunPee is a family run business which updates weekly as new moves come out. The inspiration for RunPee came after watching the 2005 remake of King Kong which is three hours long. When they left the theater they thought they should tell the people queued up for the next showing what scene it would be best for them to go and pee during. While the app proves itself a helpful tool to movie lovers, the confusing navigation and hidden features caused many of my users in user testing unable to even find the timer page. Many of the buttons throughout the app are easy to miss and the pages are crowded with an abundance of text which is overwhelming to users.
Original Screens
As displayed in this run through of the original app there are many crowded elements. Many of the cards displayed on the pages of this app actually function as buttons but don't match with different buttons elsewhere on the app. One main change I wanted to make was to the notification option. Multiple of my user testers couldn't find where the notifications were in the app so in my redesign I decided to add them next to the Peetimes time stamp and "read synopsis" option to both cut back on screens clicked through as well as to make them hard to miss.
My Solution
Redesigned Screens
Link to Prototype
https://www.figma.com/proto/mvK1YTWv7sHHqFou5RKzK6/Riley?node-id=692-1471&t=iZTVmsO9b5BVh8zh-1&scaling=scale-down&content-scaling=fixed&page-id=414%3A119