Meowie

Web Development

01 Overview

About the Project

Meowie is an e-commerce store that sells cat-related accessories such as phone cases and vinyl stickers. The designs of Meowie are made up of geometrical shapes. It aims to express the contemporary and clean feeling to all the cat lovers out there.


Tools Used

  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe XD
  • Sublime Text

My Role

Web Designer

UI Designer


Time Period

Spring 2020


02 Preliminaries


Goal

Meowie’s products also follow a neat and simple design. Here are some inspirations for Meowie’s products. We aim to create cute and eye-catching products, and at the same time, present them in their purest form using basic shapes.


Proposed Logo

The logo of Meowie is formed by symmetrical geometric shapes with shape edges, which aims to bring a neat design. The warm, orange tone of the logo also makes the logo more approachable and keeping the design simple. The logotype of Meowie is also symmetrical, and there is a cat’s face hidden inside the letter “M,” which makes the design tidy but also delightful.


03 Research


Moodboard

I began to do some research online and look for inspirations for my design. Here is a moodboard that I created for the site (Images source: Pinterest).


04 Planning


IA Map

To get a general representation of my website, I have drawn out an IA map. This can help me understand the flows of my website easier.


Product Design

I designed a few Meowie products that are available to sell on the Meowie online store, including phone cases, stickers and pillow cases.



User Flow

I then created a basic user flow to examine the shopping process of the customers.


05 Design


Design Sketches

I came up with the high fidelity design of my website before I start coding my website. Here are the design sketches that I created using Adobe XD.



Responsive Design

Here are some of the responsive design pages that I coded, with the actual code showed on the side.


Homepage


Product List Page


Product Detail Page


Cart Page


Final Deliverable

Here is the actual website that I coded using HTML, CSS, Javascript and PHP. Feel free to play around in it.


Previous Project

Purry

Next Project

Safeway