Spicy

spice_Thumb

The Idea


Spicy is an online retail spice business offering a comprehensive selection of high quality bulk spices from around the world, with much of their product line coming from organic and Fair Trade sources. The Spicy brand serves the global “foodie” market, with a particular focus on the growing US millennial “foodie” demographic. Foodies appreciate authenticity, organic and “artisanal” products, and getting a good value in their retail experiences. They also expect ease-of-use and some degree of personalization in their online transactions. All of these factors guided our design decisions in developing the Spicy on-line experience.

Project Specs


Role: UX Designer
Project Type: Graduation school class project
Project Span: 10 weeks
Project Spec: Develop an e-commerce website to interactive prototype stage.

Persona


The team developed the persona of Frederick to help guide the project. Frederick embodied the project and business goals and what the target user coming to the website would be seeking. The persona would help us with milestone decisions and be a helpful guide as we started mapping out the information architecture and components of the site.

persona

(click to enlarge)

Site Map


With the persona we developed, the information architecture was mapped out.

spicy_sitemap

(click to enlarge)

 

Initial Wireframes


Rapid prototyping using sketches helped work our user flows and placement of important elements.

responsive_wireframes(click to enlarge)

personalized_wireframes(click to enlarge)

Scenarios


The 5 scenarios that were developed encompassed the typical end to end user experience of a Spicy website customer. These scenarios were then used to guide the development of a responsive website.

scenarios(click to enlarge)

Wireframes


Next the team built out interactive wireframes for both desktop and mobile. The website was to be developed as a responsive website and by building out the wireframes it showed how the information would adjust based on the screen.

Images below can be clicked to see larger versions (opens in new window).

spicy_desktop

 

spicy_desktop-product

 

spicy_desktop-checkout

 

spicy_mobile

spicy_mobile-nav

 

spicy_mobile-product

 

Prototypes (Final Stage)


Below are the final interactive prototypes.

Desktophttp://rodt12.axshare.com

Mobile: http://d8798t.axshare.com