1. Enter homepage
Lingua
Brand discovery for an AR/VR application for the hearing impaired
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.
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.
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.