User Interface Focused

One of the major problems of the Stop & Shop app was usability, style and layout. Most users were unable to find the features that were advertised on the app stores quickly.

When I began going through the process of re-designing the Stop & Shop app I had a hard time figuring out how to fix the layout. Constant issues with the app were it was hard to find the main features — gas points, weekly deals and coupons.

Personally, the app looked like an abstract version of the website, without matching the color scheme. It was a very distracting layout and I had to go through so many clicks to find what I needed. Since I constantly shop at Stop & Shop I continued to use the app.

My personal preferences aside I needed to remind myself why we are re-designing the app in the first place, the usability. I have to put the user first and not be a quick cycle of download and then delete or forget the app existed. Most apps use very similarly navigation, so I needed to somewhat match what their competitors had. By using the main color that is a recognizable brand I would be able to achieve this look. Going through my user research questions and persona interviews I asked what color made them think of Stop & Shop, it was purple.

Good design addresses both problems: It has a clear focus on key user goals, and it removes all obstacles from the user’s way by bringing clarity to the interface.
— Nick Babich

I continued with this user idea to make the app more of a purple color, even though Stop & Shop tried to go through a rebranding in 2008, they went back to their older brand. It was more recognizable because of the color purple, instead of focusing on green and yellow.

By having the main menu have the most used features that users want and need being on the top, and the bottom navigation, it will be easily noticed of why the went on the app in the first place. As the designer, I am assuming that the personalization of the app would be the main menu, by pushing their reasoning of downloading the app in the first place. Remember, we should not make the app to personable because it may cause distraction, so instead of putting in more personable questions for coupons, we are matching their Stop & Shop card to the date on their rewards cards for the coupons to match their purchase preferences.

Since I am more of a print designer, it was hard to remember the thumb zone when creating the prototype. A mouse or trackpad is not as accurate as your thumb on a mobile device, especially on a phone and apple watch.

The current phones are either too big or too long, so we need to ensure that clickable features are within the bottom part of the phone without the possibility of dropping the device. By keeping the bottom navigation we are in the “comfortable reach” are that will be most used by users: home button, Stop & Shop card and gas points. Coupons are in the “okay” section of the phone since the main screen has coupons as the most used feature they are more likely to go there first.

Another problem that was mention was the slow speed when in the store, although there are many issues that may cause this problem, I want to think about the minor problems on the app’s end. Elimination of the minor clicks and allowing the most three used features be less downloadable will allow the speed to be increased when quickly shopping through the store.