Sketch it out

Sketch it out

Storyboarding is the best way to begin any creative design project. Movies, prototyping and even motion animation. As creative designers our main objective is to have a user journey, designing an experience for the viewer or the user. 

Let’s start with the basic of creating a storyboard when designing prototypes begin with a rough sketch to put all the ideas on paper, the main purpose is what would our users’ journey be when using the app. Why are designers redesigning the app in the first place? 

Reviewing the Stop&Shop app, what were the issues for my users? Begin to think about the basic screens that were not usable or tricky to use. By recreating those screens you can begin to determine the rest of the journey. 

According to Nielsen, usability studies show that early-stage changes are about 100 times cheaper than changes made in later stages of aproductd evelopment process. As the old proverb goes:

“A stitch in time saves nine.”


After determining how the journey should be with the redesign of the app, I was regretting choosing to use InVision. I am used to Adobe XD but instead, I chose to attempt to learn something new. I reviewed tutorials and began sketching basic screens using InVision’s freehand tool on my iPad using the iPencil. 

As a designer, we should take the easier way out, reflecting on this past week’s growth I believe that a paper prototype would have been easier to translate into an InVision artboard. 

Reviewing the prototype I was able to discover the missing pieces for the usability of the entire app. By reviewing the prototype before designing the last finishing touches, I was able to save time, and eventually money, before designing and “finishing” 

User Interface focused

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.

Consistent and efficient

After designing wireframes for a redesign some designers might instantly want to continue into prototypes, I am one of those designers. Read More

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Consent to display content from Youtube
Consent to display content from Vimeo
Google Maps
Consent to display content from Google