pocket_points_banner_1500.jpg

Pocket Points Redesign

 
 

Mobile App Redesign: Pocket Points

For an upper division class in my major, I was tasked with redesigning a mobile application of my choice, so I chose a popular app on Cal Poly's campus called Pocket Points. Pocket Points is a mobile app that rewards students with points for not checking their phone while in class. The longer a student goes without unlocking their phone, the more points they accrue. Points can then be redeemed for discounts at restaurants and stores. 

Below is a set of screenshots of the original app design. I ended up doing two rounds of revisions with the application in efforts to freshen it up and improve its aesthetic and usability.

 
 
 
 Screenshots of the original Pocket Points app

Screenshots of the original Pocket Points app

 
 
 

Revision 1

The screenshots below represent an initial redesign for an upper division class I was in. I simply wanted to lighten up the app and make some minor improvements, such as removing the hamburger menu and creating a fixed menu at the bottom of the screen. 

 
 
 
 Screenshots of the first round of revisions

Screenshots of the first round of revisions

 
 
 

Revision 2

Coming back to this project months later, I realized that I had left much room for improvement. During those months, I had learned a lot more about UI design, and I wanted to make further improvements. 

I set out to freshen up and clarify the app. I went for an orange color palette that feels energetic, stimulating, and focused, which fits in perfectly with the app's mission of encouraging students to not check their phone in classes. Overall, I wanted the redesign to help the app be seen as a tool for success and productivity among students.

 
 
 
 Most recent revision of the home and profile screens

Most recent revision of the home and profile screens

 
 
 

Home Screen & Profile Screen

The screens above represent the home screen and the profile screen. On the home screen, I added a button to "lock" the phone. In the original app, it was hard to know if the app was running when a user wanted to lock their phone. Sometimes a blue bar would show up indicating it was running, and sometimes nothing showed up. I figured a clear action to "lock" the phone would be more helpful to users. I also included a circle timer that would show the current rate at which points were being accrued and how much progress the user had made in earning a point. 

In the original app, there was no real "profile" screen. The user would tap on the hamburger menu and see their stats when the menu would slide out. It was rather clunky, and I felt that a users rankings and progress should be more accessible and prominent in app that centers around earning points. I created a profile screen that showed your rankings and points earned. I also redesigned the timer that shows how close a user is to the next level. 

 
 
 
 Most recent revisions of the deals screens

Most recent revisions of the deals screens

 
 
 

Deals Screens

The next two screens focus on the deals that are available to the user. Students can redeem deals by paying with the points they've earned, and there are several categories of deals on the app. In the original app, the deals would be accessed through the menu or through tapping the "points earned" icon in the top right corner. It was difficult to tap and not intuitive. I created a new, cleaner deals screen by eliminating busy imagery and updating the icons. The original app had a scrolling experience that was not smooth and it made it difficult for a user to select each deals, so I created sections of information that were similar to cards. A user could then tap the "card" for more info about the deal and retailer. 

Tools Used: Sketch, Adobe Illustrator
October 2015, 2016