Coffee Crew Live!

LIVE PROTOTYPE AND REDESIGN Using Axure RP I was able to make this Coffee Crew app redesign come to life! New Icons, bold color, and a new navigation scheme were important in this redesign. Click below to see it!

Coffee Crew banner

The Problem

The Coffee Crew coffee shop requested an app that can enhance the experience of going to one of their coffee shops. The Coffee Crew app will allow you to pay for Coffee and merchandise at The Coffee Crew shop, find a Coffee Crew location, and set up Coffee Crew meet ups with your friends.

The Solution

A mobile app was created using the flat design style. I designed the app to have a large button layout which allows quick and easy navigation through the mobile application. The large coffee mug you can press to pay your coffee shop bill is featured throughout the entire app. This is intentionally placed on all the main pages so it makes it easily accessible to pay when you're ready. The application features an alert/message system that allows you to send and receive meet up messages. I deliberately left out "The Coffee Crew" drink and food menu because it's considered to be unnecessary for the mobile apps intentions, and redundant when you're at the coffee shop.

Case Study

The following information and case study was conducted for the old user interface of "Coffee Crew". Please take a look at the old UI here.


After I completed a high fidelity wireframe mock-up of all the pages the application would contain, I put together a case study. The intent of my study was to figure out if all the wording, menus, and navigation was clear for the user. Here is what I found.


explained the scenario to the user and the reason why she would seek this app out and download. I explained to the user that she would download the app after she saw signage and advertising on commercials and The Coffee Crew website.

I had her “open up” the mocked up application. I observed how she navigated through the app. She saw she could sign in, locate, refill her account, and get a summary of her account.

Before she was asked to start navigating the pages, she was asked to tell what she saw. She noticed there was a dollar amount showing under the logo on the cup. She knew that this was the amount of funds she had available to use.

Sign In - As a new user, someone will need to sign in to see their account information. She knew immediately to press the orange sign in box to sign in. When she landed on the sign in page she was unclear where to go. She was confused as to why there was a sign out button, and a sign up button. She seemed really confused with this page. She was aware the home button on the center of the app would take her back to the home page.

Locations Near You - Before she pressed the locations button on the home screen, I asked her what she would expect to see when she hit that page and she said she would expect to find locations near her. Navigation seemed pretty easy for her. She understood that if she pressed a location button, she would be given directions to the location that she chooses. She suggested a button that would give users the capability to manually enter in a city location. She said that it was easy and clear to read. She knew to press the home button when she was done with the page.

Refill Account - Before she pressed the refill button on the home screen, I asked her what she would expect to see when she hit the refill page. She said she would expect to find a page that would allow her to add funds to her account. She knew “Quick $10” meant she could hit this button and purchase $10. She knew the button “$5, $10, etc.” meant she could purchase $5, $10, or any other amount that she wished to buy. She also understood there was an option to share her funds with someone. When she was done with this page she knew to hit the home page.

Funds Available - Before she pressed the funds available page, I asked her what she would expect to see if she hit this button. She said she would expect to see how much money she had in her account. She wasn’t sure why this was necessary because the homepage already had that information for her.

Alerts- One of the very first things she noticed was that she had alerts that she needed to check. She knew to press the alerts button to see any information and messages on her account. She knew to hit the home button to go back.

Settings- She wasn’t sure what she would see on the settings page. When she hit the button, she saw that she could manage her credit cards, change password, or contact “The Coffee Crew”. She knew to hit the home button to go back.

Sign Out - She knew how to sign out on the home page.

Actions Taken

The biggest flaw in this design was the sign in page. The colors were misleading and the content was not clear. I changed the buttons to read “Sign In” (or “Sign Out” if you were already signed in). I changed the user name and password fields to one box and created another button to read “Go!”. I changed the “Sign Up!” button to read ”New User? Click Here!”. I changed the color scheme to be consistent with the rest of the application. In the locations page, I added a button that allowed the capability to manually add a location. I changed the button on the home page to read “Find a Location” instead of “Locations Near You”. Instead of having a button that reads “Funds Available”, I changed it to read ”Summary of Account”. This clearly states that you will see a summary of your account rather than a quick view of your available balance. The font was a little too playful and the color scheme did not portray a younger audience (20 to 30 year olds) of coffee drinkers.

Coffee Crew

Coffee Crew

LIVE PROTOTYPE AND REDESIGN Using Axure RP I was able to make this Coffee Crew app redesign come to life!...



This is a home page redesign project that I’ve been working on that showcases some UX tools I have learned. The project...

Journal of the Adventurer

Journal of the Adventurer

This is a story of a few friends coming together and sharing their stories of adventure...…it just turns out that the few...