Instashop landing page

Website Design

I'be been asked to design an entire website for a local grocery shop.

 

 

 

 

 

The Challenge

Instashop satisfaction ratings have remained relatively constant over the last 4 years, but their market shares have been decreasing by 8% each year. In about 2 years they could be forced to shut their doors. Through market user research, it was discovered that many customers now prefer online shopping and delivery to physical stores because they are faster, easier, and more convenient. Instashop believes that if they allow their customers to shop and buy their products online, that they can expand their customer base and market share. The pilot program will first take place in New York City and San Francisco, then expand to other cities after iteration.

The Ideation

First I needed to create a Project Brief, Research Brief, and an Interview Guide. These documents outlined methodologies, target demographics, and a full description of the problem and solution angles for the stakeholders. Then a Project Roadmap was set up with goals and dates of implementation, which was then mirrored over to a Trello board for convenient team access.

 

The Feature Set

In order to determine a feature set, first I had to define the intersection of the business and user goals. Then I charted a competitive analysis feature matrix scatterplot from Amazon Fresh and Safeway. Based on this information, our business/user goals, and persona - I was then able to create a Provisional Feature Matrix document. You can see some of this work above.

 
 

Interactive Design

I chose to utilize Optimal Workshop’s OptimalSort to have participants remotely label and categorize the 20 items given. To see how hypothetical users would naturally categorize products in order to help guide the information architecture of application. With the results from the Card Sorting research, I was able to create a general sitemap for the Good Market application based on the categorization of items. This gave a more holistic overview of what content would be necessary for the product.

Then, I identified every path that the user could follow and I  sketched our first user's flows. Then I worked on this draft, reviewed the paths and added some new ones. I used an online tool (Giffly) to create the final version of the user's flows (above left)

Before I could start wireframing individual pages, I needed to determine the requirements of the User Interface. Based on our site map and user flows, I have put together a list of requirements for each task. These requirements describe the elements of the product that a user requires to complete his tasks. (above right)

 
 

Low to Mid Fidelity Wireframes

There were dozens of iterations for the responsive  wireframes, that I continually made notes on and tested with users. I iterated the wireframes accross all platforms (desktop, tablet and mobile).

 

The Branding

My process to create a great banding design was a lengthy one, but when that was complete, the beautiful UI style tiles above seemed to flow like a waterfall! I chose The most "Simple", "Fresh", And "Friendly" choice For The company's branding closed to the nature.

 

Final Handoff Homepage