Overview

Gallery improvements for browsing by feature, show apps that support single sign on. Show some ways of featuring “newly added”, or “Recently updated” apps on the landing page. Also design a way to show groups of our partnerships with Oracle and SAP, cloud platforms.

Duration
October

Individual project

Role
UX Designer

Deliverables
High fidelity mock ups (Adobe XD)

Problem

From reviewing the user reviews in the app store, I noticed there were areas of improvement for the mobile application. The app has some inconveniences particularly related to selecting location, ordering, and reloading amount to Starbucks card.

Solution

My goal was identify the most common problems that users were having with the application and to solve those inconveniences by improving the experiences them for better usability.

Key Quotes

The top 3 most complaints were of location, ordering process, and reloading. I gathered all the important quotes from the complaints and gathered them.

Persona 1
Sharon

Likes being in comfort zones.

Goes to the same locations most of the times.
Does not like paying for something in advance.
Usually gets the same drink most of the times.

Scenario

(Assumed already logged in) She goes to her usual Starbucks location and orders the same beverage that she normally orders. She has to add money to her card to check out.

Persona 2
Kevin

Does his work at many different Starbucks locations.
Likes to adventure new drinks and customize new drinks.

Scenario

(Assumed already logged in)
He goes to a new area and wants to find a Starbucks location in the area, and wants to order a customized beverage.

Problem

App automatically defaults to previous location, which makes it difficult for people who want to order at different locations.

Solution

Provide an easy, clear way to select location so it doesn’t require special attention from the users, and lessen the possibility of ordering from the wrong store. While still providing an easy way for regular customers to select from their favorite stores.

Kevin’s scenario

The location may be pre selected to the previous store he ordered from.
- Requires more attention from the user to be conscious of the pre selected store and change it
- In case it is not consciously re-selected, it can cause users to order from the wrong location. Especially, when there is no cancel button for mis placed orders, this is crucial that it shouldn’t happen

Check with the users

So I thought the first step to improving this design was to think about in which step to place the location selecting experience. Whether it should come before the user starts to order and check out, or order and checkout first, then select location last. Currently, the the order can change depending on the users situation

Current Design
Select order, select location, then checkout
Select location, select order, checkout

I asked users to put these three items in order, and majority of the users answered order, and checkout to come in the specific order without being interrupted. I decided to put the location selection experience first, because I wanted checkout to come at the end as it is the completion of a checkout experience.

Current UX

Since location is already selected in the new design, the location UI on the bottom was not needed, therefore I had the option to change or move the shopping cart also needed some modifications

Design option 1

My first exploration was to place the shopping cart on the top right corner of the screen and get rid of the bottom pop up. Because the standard of shopping cart locations are usually on the right top corner.

Pros

• Users are used to having shopping carts on the top right for e commerce platforms, because it is a commonly used patter

• More area to use for the browsing experience, and can be less distracted to other call to action. We can have the users better focus on the browsing experience

Cons

• May be less discoverable to the users

• We are changing the behavior pattern of users that have been using the mobile application, so the users would have to be “re-trained” with this new interaction

• Question of “Can we put cart icon where the coffee photo is?” In my opinion I thought that might be hard to find with the picture in the background, or we would have to make bigger design changes so we can avoid layering the shopping cart on top of the photo. Maybe can be a change later to come.

Design option 2 - selected

Used the same interaction used for when the location ui existed on the bottom, and changed the color of it to green to clearly show that it is a tappable area since all the tappable, or tapped areas are in green on the application, I wanted to make it consistent. also the cart bar doesn’t have to show if the user hasn’t yet added any items, as it is pretty prominent once they add an item.

Pros

• Keeping the shopping cart where it is in the current design so users can find it where they are used to

• It can be visually be more noticeable

Potential research question: Will this design cause the users to checkout too quickly and add less items?

Usability wise, I think it’s pretty prominent and noticeable for users, however, I think this will be more about the browsing experience in relation to making more business for us.

Cons

• This is an unusual area for shopping carts for e commerce platforms (although I have been noticing more, on ordering platforms)

• Takes up more real estate from the screen, taking away space that we could be using for better browsing experience

• Also can be distracting by adding more call to action on the screen, while already having a lot of areas for users to select and make choices

Problem

No easy way for usual customers to order usual drink at usual stores.

Solution

Create an easier way to order the usual customized drink.
(‘quick order’)

To lessen the number of taps for usual customers, I thought of a new category called “Quick order”. The reason why I thought of a new category Instead of having the favorites be the priority was because I thought people may have multiple favorites, but they may only have a few go to orders that they’d normally like to order. For example, the user may have a favorite for each kind of drinks of hot coffee, iced coffee, hot tea, iced tea, however, would only have an Americano as their usual go to drink.

Sharon pain point

Has to tap through too many screens to order her usual customized drink at her usual location.

 Final Design

• Only focused on add to favorites function to keep it simple

• If adding “Quick order” option to this page, the quick order would be possible to add from drinks customization pages, and also from the favorites page.

• I thought it was a cleaner, and more simple UX for the users to think all the “Quick order” drinks were all added from “Favorites” so they can do all of their managing of their favorite drinks from that page.

• Also adding a drink to “Quick order” isn’t going to be a frequently used function that is worthy of putting on the drink customization page.

• Thought putting an icon next to “Add to favorites” could differentiate from “Reset recipe”, however, didn’t think it was consistent with the whole design, so decided to not add an icon.

Current design

• The users are defaulted with $25 and are unable to notice that they were being charged for that much.

• They want a way to be able to pay the exact amount, rather than be charged for more than the total amount.

Explorations

• I had to explore different ways to incorporate the total amount as a selection.

• Initially thought of maintaining original design and having the first option be the total amount, however, it seemed a bit awkward when with larger amount.

• Input box was another option but it didn’t clearly show how much the reload amount was, especially with the total amount show on bottom.

• Created a horizontal design which I liked the most and wanted to clearly show the amount selected in the signature green, however, also considered another similar design with only the outline, ad I thought it may be a bit distracting from the reload main button.