No Compass

A prototype eCommerce platform to showcase dynamic content

An eCommerce Store for Buying Outdoor Goods

No Compass was a project that revolved around designing and building a functional eCommerce website. Over the course a three months, I concepted, branded and built a working eCommerce store.

The admin can insert, adjust, edit, and remove various items that are for sale. The items would be searchable, filterable and can go into a mock check out system. This was a one phase prototype that was concentrated on the website development.

See No Compass live

The brand

Given only a week to discover the identity of the project, this was accelerated quite a bit. The main purpose of the project was to create a working HTML website that had dynamic content.

I went with a simple approach with minimal iterations and exploration.

Inspiration

Going off of the eCommerce direction, No Compass is a site where you can purchase used or new outdoor equipment. With that in mind, I took a compass and a “no access” icon and merged them together as you see here.

Palette

I went with a welcoming and warm palette to introduce the brand. To create a trustworthy initial impression where users can feel welcome.

Initial impression

The splash page was a requirement of the site. Even though a splash page isn’t as popular in today’s trend, it’s always good to give an initial impression of what the user is getting into.

Image grid

Just went with a simple approach here that would have social attachments and a single CTA that would lead to the homepage.

The images would rotate in and out with other outdoor aesthetic imagery.

Main flow

The main reason for an eCommerce site is to review and purchase items that are for sale. It takes 4 steps to take the user to the detail page and they have the option to add to their cart or go back to the Shop page.

1. Enter homepage

2. Click on “Shop” CTA

3. Click an item

4. Review the details

Secondary flow

The second flow is to highlight the checkout process. Since this is just a prototype, there is no actual card entry nor post checkout procedures that were covered.

1. View an item in detail

2. Click on “Add to Cart” CTA

3. Enter cart via top nav

4. Begin to checkout

The content

Using base front-end languages, the prototype needed to have dynamic content that the admin team can update and process.

Data tracking

Title
Detail copy
Price
Main image
Type/Category
Date entered

Search and filter

With the content laid out, the site has a working filter and search with basic functions.

Search page with filtering

In conclusion

This was a great experience building a working eCommerce prototype. A lot of coding languages and procedures were learned throughout the entire process. Even as far as learning what design is possible with the time allotted was taken into effect.

What I would change

Coming from a visual design background, I would’ve liked to explore more brand experience and really hone down the brand experience. I felt a bit rushed getting out what was provided, but with the time box being so shirt, I am overall happy of where it is.

Last words

Great learning experience and really wouldn’t change that much of the project. The main point was to build a working prototype and I achieved that with No Compass.