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

Visualize the research

Visualize the Research

Wire Frames
  • It presents the information that will be displayed on the page
  • It gives the outline of the structure and layout of the pages
  • It conveys the overall direction and description of the user interface
Invision Free Hand

After creating the IA structure for app design, there are do’s and don’ts when continuing the process of a redesign. 

Keep in mind the research the UX designer did in the beginning stages, doing all that work was not for nothing. Creating all the screen wireframes is based on what previous users have problems with, the layout or the features being hard to find. 

In the Stop & Shop app, many of the features advertised are hard to find or not to the extent users would like. In order to fix that for the final product, designers worked on the potential flow of when designing the IA structure. Following this organization, continue developing what the screens may look like before you begin prototyping. It is always a good idea to get feedback from people not involved with the project to ensure easy use. Remember, this is for the potential to have new users using the application, or getting back old users. 

“A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors.

When designing wireframes, designers always learn what potentially can hurt the designer or unnecessary information that takes time, when it is not needed yet. 

Don’t skip screens when creating wireframes because you feel like it is unnecessary. When creating the prototype later in the process it will be easier to determine if the ‘skeleton’ matches the overall flow and design of the final product. Designers should always think ahead to make a process easier for them and the coders that begin the process later after the UX designers do the background work. 

As designers, we love to hop on the computer and quickly open InVision or our Adobe Creative Suite, do not rush. Designing is an art, and basic art is a pen and paper, it is faster to quickly erase a mistake and change something then putting in work perfecting alignment and then realizing it does not make sense for the feature. 

You are designing with the user in mind, remember the purpose of the redesign and the message that is being advertised.

Reviewing the user research and persona interviews, I decided to try to match the style of the competitor’s layout of their app. Based on their reviews it was easy to navigate and find the features that the company highlights in the description on the app store.

How to begin

Information architecture (IA) is a science of organizing and structuring the content of the websites, web and mobile applications, and social media softwareRead More

Empathize with the user



Knowing how the market works will benefit any designer in the industry. When it comes to UX/UI design having basic marketing skills you will be able to perfect the design and how to market the said product. 

When improving an app or website to improve the user experience, understanding the market gap of your competitors and your client will help reach the overall goal of the project. 

I use the Stop & Shop app regularly when I go shopping, I like to see the weekly deals and what coupons are available. However, I feel like it’s not really user friendly and my designer brain does not like the design and layout of the app itself. 

Reviewing the customer reviews, many others have similar thoughts that I have towards the app. One of the main reasons why I still use the app is because I prefer Stop & Shop over any other grocery store. Some of the other grocery stores that have similar application features that actually work does sway me to consider their app solely on the fact that it is easier to use. Read More

Find the difference

The computer began to develop in the early 1800s but was not user friendly until the development of the first ‘Apple’ (link) computer, which was the first computer to have a moveable and clickable mouse. 

Today, the average person would have a hard time learning to use only code and keys to use certain applications on a computer, so the development of the mouse made it easily accessible to an average consumer. 

Thus, the idea of user experience (UX) and user interface (UI) designers were born. 

‘User experience’ encompasses all aspects of the end-user’s interaction with the company, its services, and its products. 
– Cognitive scientist Don Norman

There are many arguments and conversations about the difference between UX/UI design, but is there an actual difference? Are these disagreements and ideas since job listings are confusing when using one of these as a job title?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