Website Design | Branding

Instashop is an online grocery delivery service aiming to make online grocery shopping convenient and easy for its users. My role was to research and design the website that allows shoppers to buy groceries online and having them delivered to their door steps. This was completed as part of the Designlab curriculum. 

Project time frame: 3 weeks

Tools Used: Sketch, Adobe Illustrator, InVision


After I've conducted several user interviews to gain a better understanding of users' needs, I began by evaluating both business and user goals.

It's important that while we are focusing on creating a good experience for the end users, we are also setting out to fulfill the business's objectives to generating a return on investments for the business.

From there I focused on our target demographic and created a persona.

Card Sorting

Based on the market research on current competitors website and user interviews, I realized that in order to cater to our target demographic and set ourselves apart from the competition, we needed to focus on creating a seamless and efficient experience.

To help define the information architecture of the site, I conducted a card sorting exercise which helped us to see how users identify and organize different items.


Based on the results I received during the card sorting exercise, I developed this sitemap. It showcases how people navigate around the site and provides a bird's-eye view on the entire structure of the shop. It makes it easier to spot potential glitches and to fix them before they become a problem.

I have also mapped out potential user flow of how users move through the product to accomplish their goals. This user flow shows a specific path a user could take and also highlights critical decision points. This also helped me decide what needed to be designed, built and tested.  

  (I included couple wireframes on some pages for additional clarity on what the actual user flow would look like. Full size wireframes can be found below)

Landing Page Wireframe

This connects the conceptual structure that I established through the previous steps, with the visual design of the site. I focused on the hierarchy of information. 

Style Tiles, Logo, Icon Design

I explored with pen & paper on couple conceptual logo design and style directions before I decided on a fresh and modern feel which would appeal to our targeted audience.

I like the idea of using simple font as the main composition of the logo. The idea behind it is that it's more versatile to print it across multiple different materials.

Hi-Fidelity Mockup

After finalizing the branding, I started creating the hi-fi mockup in sketch. I used my research and wireframes as a basis and iterated from there. 

These are the two examples of the hi-fidelity mockups.

Mobile Mockup

Since the design I worked on is responsive, here is the mobile view of the design.


•    •    •


This was an interesting project to work on. I especially enjoyed the branding direction exploration phrase. What I have found to be the most challenging part based on my research is that people have different definitions for the same object, and it could be challenging to design a solution that caters to everyone.

I find that by cross referencing between the business and user goals has helped me to find a middle ground between both ends for my design decisions.

Using Format