InstaShop
INSTASHOP MOBILE APP
PROJECT DETAILS
BRIEF: Good Market is a fictitious medium scale grocery franchise based in the United States. Although their customer satisfaction ratings have remained relatively constant over the last four years, their market share has been decreasing 8% each year. If they continue at this rate for another year or two, they'll be forced to shut their doors.
ROLE: UX / UI Designer
CLIENT: Good Market
CONTRIBUTION: User Research, Personas, Style Tiles, Wireframes, High Fidelity Mockups
TOOLS USED: Pencil, Paper, Adobe Illustrator, MacBook Pro
MY PROCESS
The InstaShop assignment was the first assignment at DesignLAB where I started putting together the things I was learning. I found this assignment to be fun, interesting and down right exciting! I was so proud of my final design (even though I know it could have been better); this was the first time since beginning my journey on this UX path that I was proud of something I had designed.
USER RESEARCH
I researched what other online grocery services were offering such as Amazon and local grocery stores such as Harris Teeter. From my research I learned that AmazonFresh was only available in certain areas and that Harris Teeter's service was only available where Harris Teeter had stores in those areas. Harris Teeter offered either pick-up or delivery service for their customers.
EMPATHY EXERCISE
With this assignment (like so many others), I allowed myself to get in the way of myself by overthinking. I felt as though I could have used a of methodologies could have been used for each of the questions posed to me.
My design mentor, Michael Brooks Jr. told me that I did a really good job with my methodologies and that listening to my client is a very important step to the process. Most companies, he said, are trying to solve a problem and the magic is in finding a solution, but also offering a new insight into something they may have not seen.
PERSONAS
This was my first time creating personas so I relied on information that I gathered from my course readings. My mentor told me that he really liked how I laid out my personas, and that this will come in handy as I progress through this project.
STYLE TILES
I began this assignment by creating my style tiles. I had seen style tiles in the past but had never created any. Since my background is in UX Research, I have never had the opportunity to use them. From this course, I was able to research them and learn more about their purpose. Style Tiles are like a moodboard for your design work. They showcase various color schemes under consideration, typography, photos, font sizes, what your links and buttons will look like, etc. You can be as creative as you want with your style tiles!
As you can see, I forgot to add my font for these. My mentor explained to me that the font is important to show because it will let the client know what color values, font sizes and weights will look like.
WIREFRAMES
Creating my wireframe for the Home Page was super fun! I started this assignment by listing out my goals for the site, which were:
My goals:
- To let people know that they can shop for fresh, local produce online, via their mobile devices or over the telephone. I added the telephone option because some elderly people may not own a computer or cell phone.
- Show people that it’s easy to order their groceries online. It can be done in three easy steps.
- Show shoppers that they have the options of pick up or delivery
- Give shoppers the opportunity to “meet” the farmers and fishermen who are growing/catching their food, to create a connection and sense of community.
FULL COLOR COMP
Starting this assignment was pretty simple since I had my wireframe created already. All I had to do was add my colors, photos, icons, and fonts; the layout had already been completed.
My second iteration is based on comments I received from my design mentor, Michael Brooks Jr. Michael suggested that the shopping cart icon could be about 50% smaller, he felt it was a little too close to the green (top and bottom). He also noted that the shopping bag icon could be 50% smaller.
He told me that he really liked the “Deals of the Week” section. He said that the Social Media icons were slightly different and that I needed to try to make each of them consistent. He also felt that there was a lot of empty space in the footer; he said mostly because of the icons I chose and that I needed to try to figure a way to balance the space out.
Iteration #1
Iteration #2