Tasks: Brand Idea + Serverless Ecommerce Website

Tools: React, JS, css, html, Gatsby, Snipcart, Netlify CMS

Menco is a mens fashion brand I created for young professionals. It's aimed at making getting dressed in the morning rush as simple as possible, creating pride around looking sharp for business and, of course, providing smart clothing to this target audience

Challenge: Create a professional ecommerce website, for the customer demographic, which provides value to customers and markets clothing effectivly.

Solution: I broke the project into stages and did my best to research, find best practices and break down methods of great ecommerce websites already out there, in order to meet the challenge outlined. A quick break down of the hompage should show how I meet this goal:

Above the fold, we have a hero image (model in Menco attire) and text (making smart attire effortless), drawing the customer in, portraying an ideal and showing the brand/shop as a ladder toward this ideal. Then, featured products are shown within one scroll to take advantage of the buying mindset and get customers excited. I opted for photos of models in the clothing as research showed this is a better draw. Value is provided through the blog section, which aligns customers with the brand and educates them on clothing selection, building towards the company vision. The social section is at the bottom in a funnel like design and again reinforces the idea of looking smart for business and prompts users to engage in social media with a chance to be featured. Last but not least importent links are shown in the familar spot on the page footer and sorted from most needed/clicked to least.

view the site live: http://www.mencoapparel.com or see the process in detail below

Brand Identity & Planning

Step one was filling out a Brand Identity document I created based on research and previous projects, the aim of which is to gather a base understanding of the project and set the stage for planning and prototyping.

First I wrote the company vision, customer demographic and brand personality. Then brainstormed names, eventually coming up with Menco. Layout, Font, Icon and Photography to be used were broken down into their purpose and seperate documents created for selection or creation. A rough sitemap was created. Throughout this stage I also researched ecommerce best practices and made a list of some similar websites to get a sense of industry standards, compitition and to make sure I was creating something original.

Prototyping & Design

Once design documents were completed I started my prototyping in adobe xd and photoshop. Basic mobile layouts for each page were created based on the design docs, and then desktop layouts as well as some hero logo and subtitle options were also created, all of which were revised after feedback was gathered.

At this point I decided to start working on the homepage in html and would come back later to prototype other sections or just use the plan documents, mobile draft and html depending on the complexity of the page.

Ecommerce Website Development

Menco was coded to be responsive and work well from mobile to desktop and everything in between, text and images scale, animated hamburger menus are used, lazy loading and image optimization etc. The best examples of this are the nav bar, products page and customer care page.

Now some technical info: I've been interested in static site generators and used this project to test their limits. Challenging myself to create a static ecommerce site, Gatsby, a react based framework, is the static site generator I opted for. After some research react seemed to be the most practical and used JavaScript library, which I thought would transfer well to future projects, and gatsby was the static site generator I saw the most potential in (although Next.js was a close second).

Markdown was used for the product and blog content and these pages, as well as the list components to display their links, were created programmatically. Snipcart was used for cart functionality and as such I didn't write a lot of backend code, however I did filter through the content using GraphQl, a data query and manipulation language for APIs. A great example of this is the responsive social grid on the homepage which pulls images and their link, from the instagram api, and displays them on the site. Also I used emotion for css, to make things easier. Netlify CMS has been integrated and the project is easy to update, however after finishing the project and doing more research around the practicalitiess of ecommerce in the real world (inventory managment, sales, etc) I would opt for a different development stack.

The project was a great learning experience with lot's of transferable knowlede gained: planning, design, pwas, react, apis, graphql, cms, JAMstack etc. and I succeded in my challenge of creating a full blown static eccomerece on gatsby. If you have any feedback or questions I'd love to hear from you, Daniel.

Back to the homepage

Contact: daniel@thoughtfulhq.com