Shop Your Way app

Shop Your Way app

Company: Sears Israel

Role: Lead iOS Designer

Background

Shop your way app is a social and e-commerce application which allows users to purchase affiliates products and connect or ask people for any question or advice about the proposed products.

I took part designing the main app flows and use cases such as:
1. Reward screen
2. Filter behaviour
3. Activity center
4. Cart flow

Challenge

There are some aspects to take into consideration, from a product perspective, when we want to create any change in the application: We have the e-commerce point of view, where we can increase the number of purchases, make it easy to do and allow users to use there reward points. In the other hand, there are the physical Sears stores that integrated with the app and the user profile, mainly relevant for the loyalty program.

Pause For a Minute - Let's Ask 

In all the four case studies above we found that users are not always understanding the meaning of the loyalty program. It means that they earn reward points but don't know how to use them in the search results and cart purchasing flow.

Each change we made affected on another flow, and to make it all connected we had to change a small thing in each flow, to create the same coherent experience in the application.

First Use Case / Reward Screen

In the Reward screen, there are two interesting aspects: this screen is the only one that combines online and offline purchasing. As you can see below, this screen includes the users' barcode which will be scanned by the cashier in the local store. By scanning it, users could earn or redeem their points. This barcode is personal for each user, it identifies users while they are in the local store.

The problem: The barcode is hidden from users and it is hard to use it while it appears inside an automatic carousel component. While users use the barcode in a store and want to be identified while paying, they will need to put their phone close to the barcode scanner next to the cashier, only when the automatic carousel shows it. Using this component, made users to try several times, until the barcode appears. Very frustrating.

The solution: We found that removing the carousel component is only part of the solution. The Reward page is crowded with data and numbers. Therefore, changes in the UI needed, in addition to different content hierarchy. You can see below the new design:

One of the most unclear issues is that on the Profile page users could find their points balance and some options how to earn more points. While, on the Rewards screen, which I worked to improve, users can see how to redeem their points, and how to earn more points, but not to see what is the point balance. Meaning, not all the content appears in one organized place. Below is a wireframe of how the screens looked like before the change:

Below is the final interface. At this point, users could see their points balance and options to earn more points or redeem points. All in one place. The barcode which appears on the top allows users to scan it while they are in the physical store. The main second change on this screen is that the barcode, membership, and pin codes, are not in a carousel automatic component (as you can see in the wireframes above), to make the scanning action much easier.

Second Use Case / Filter Behaviour

One of the most important things in the e-commerce app is the option to find easier and faster the items you are looking for. From a benchmark we made, it is clear that in e-commerce and social applications it is easy to find the filter feature. Making this filter button prominent, allows users to take an active action to match the search results to their needs.

There are common patterns for filters, such as divisions for categories, colors, product types, etc. There are also common actions for these filter screen and flow, for example, the reset button or an option to remove only a specific filter category.

The problem: There is no indication which category appears in each section until users clicks on it.  While the users get into a category to filter, it is not feasible to multi-select per category.

The solution: Mobile users are much more like to reach relevant actions from the hand thumb reaching area. To make it easier for users we relocated the filter at the bottom of the page and identified the most popular filters which will appear on top. We also added multi selection functionality, e.g. filtering shirts which are both red and purple. The next elements we improved is to help users take quick actions, reduce cognitive load. For example, instead of a list of colors (red, green, blue...) the UI includes squares of colors. It is much easier to identify a color in a list instead of reading it.
These changes made the experience of filtering in the application much easier.

Third Use Case / Activity Social Center

Since Shop Your Way is a social e-commerce application, the activity center is the one that allows users to be updated with new actions of their friends. For example, if a friend of mine asked a question about an electric drill and wanted to be sure this specific drill is good, I, as a friend of him, will get a notification in the Activity Canter about this question. I would be able to answer the question or to offer products that may fit my friend's description.

The problem: Users don't fully understand which activities appear in this activity center, they get a lot of notification and most of them are not relevant for them, or too general.

The solution: Make an order and change the content hierarchy of the content in this page. Users will be able to see friend's questions on top, and will be able to see content they follow right after.
We added functionality, to allow users to perform quick actions from this page. For example, if my friend added a product to his catalog, then I will see this action in my activity center, and by clicking on the notification, I will be able to go to see my friend's catalog.

Fourth Use Case / Cart Flow

It is clear that the cart flow is the most important flow for an e-commerce products. The small details and the right flow give the ability to let the user be sure what is the current step and what will be next. 

The problem: Cart flow includes a lot of fields, details, disclaimers, and actions to do. All of. these appear in one long page and it is easy to get lost in it. Also, it is not clear how the users can use their Reward points as a discount in this step.

The solution: From a benchmark of another cart flows in other applications and websites, it seems that the common pattern for this flow is by splitting it to steps. We removed unnecessary field from the flow, and marked disclaimers inside separated links. We redesigned the flow, to let users be sure what are the next steps and what was the previous ones. With the new flow now, they have the ability to see all the actions in one clear place.