Green lake jewelry works | e-commerce CONCEPT

User-centric responsive site design

Tools: Sketch, Photoshop, Illustrator

Newly design e-commerce website with custom design support makes it easy for anyone to collaborate with designer to make their dream jewelry come to life

Opportunity
The process of creating custom engagement rings are overwhelming. Green Lake Jewelry Works offers a unique custom design process and platform that can be highlighted better in their website. The company offers customer to work directly with jewelry designer and committed to ethically sourced gemstones.

Goal
Organize information to display on each page on need to know basis to avoid overwhelming user. Placing customer on the driver’s seat by providing support and options in custom jewelry process.

Role
This project started as part of Interaction Design course where I developed site map, navigation, and initial testing of wireframes. I’ve taken a step further by redesigning the interface of entire website.

home-mobile.jpg

HOME PAGE


Home page should orient user to understand business offerings and services they can receive by starting their custom jewelry purchase here.

• Where am I?
• What can I do here?
• Why should I do it here?

 
 

PROCESS

User needs
To understand what information is most useful on each page, I started by taking an inventory user needs when shopping for engagement ring. I found an overwhelming amount of information, here are 3 main category relevant in understanding what a custom jewelry site needs to have:

Customer’s own research
enter text here
enter text here

Selection/ Purchase 
enter text here
enter text here

Usage / support
enter text here
enter text here

 
 

Create your own


Goal:
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum condimentum, tristique ipsum et, efficitur nibh. Donec bibendum euismod dictum. Suspendisse potenti. Pellentesque at mollis elit. Curabitur porta eros felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


Design page


Goal: Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc ut ipsum condimentum, tristique ipsum et, efficitur nibh. Donec bibendum euismod dictum. Suspendisse potenti. Pellentesque at mollis elit. Curabitur porta eros felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.



Sari_CourseProject_V2.jpg

SITE MAP

Blurb about site map/ naming convention

category-mobile-option-2.jpg

Category page


Goal:
Allow user to browse and narrow down selection by showing what kind of products and options that are available to them.

I’ve highlighted the use of “filter“ feature on the left handside. It will take user to a window where they can browse options of products being offered and filter what they like to include.

On figure D, the selected filter attribute has been highlighted to show what has been selected with option to remove them by clicking “X“.

Category page - desktop

Category page - desktop