Instashop
Website Design | Branding
Instashop is an online grocery delivery service. Our users want to quickly and easily find the products they want without sacrificing quality. My role was to research and design the website. This was completed as part of the Designlab curriculum.
Research
I began this project by thinking about business and user goals.
From there I focused on our target demographic and created a persona.
Based on a heuristic evaluation of competitors sites I concluded 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. The process of finding items and checking out should be as simplified as possible.
Card sorting allows us to get a sense of our users' mental models of the site. It will also give us the information to label elements in a way that is intuitive to them. To perform the card sort, I took 20 various items from the stores inventory and had participants group them into categories that made the most sense to them.
Sitemap
Based on the information I received during the card sorting exercise, I developed this sitemap. It focuses on how people will move through the site and how they will potentially experience it. It is a great way to walk through potential scenarios and to catch poor aspects of design and fix them before they become a problem.
User Flows
This user flow shows a specific path a user could take and also highlights critical decision points. It helped me decide what needed to be designed, built and tested.
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
Here I created four distinctive design directions for the website. Overall, I wanted the designs to feel fresh and modern.
Logo & Icon Design
I decided on the first branding concept since it was fresh and modern yet different from any other company in the business sector. From this concept board I worked on creating a logo mark that was unique and represented the brand. I liked the idea of using illustrations of the site and wanted to incorporate that into the icon designs.
Hi-Fidelity Mockup
After deciding upon the branding, I started creating the hi-fi mockup in sketch. I used my research and wireframes as a basis and iterated from there.
Summary
This was a fun project to work on and I especially had fun creating the logo and icons. The research taught me how different people's mental models of products could be. It was also a challenge to try to make the categorization intuitive for everyone.