e-commerce website
Cliff's Variety
Your lifestyle becomes a visual + interactive shopping experience
Challenge
The challenge was to design an e-commerce website shopping experience by creating the brand identity and the line of products that are sold on the site. The challenge was to meet the needs of the target user group who love brand name products that are unique and eclectic. Additionally to solve the needs of the business and brand.
Project Brief Overview
Based on a sample of Cliff’s Variety eclectic cross-selection of over 100 products, I designed a brand identity around an online shopping experience.
Project Synopsis
Duration + Tools
2 Weeks
- Sketch app
- Invision
- Post its
- White board
- Hand sketches
Method
- Site visit and analysis
- Neighborhood analysis
- Contextual inquiry
- Cliff’s Variety brand analysis
- Current website research
- Card sorting of over 100 products
- Insights / synthesis
- Interactive prototype
- Rapid design ideation hand sketches
- Wireframes / mockup
- Final invision prototype
Problem Definition
Cliff’s Variety isn’t providing a eye catching range of products for customers to purchase online, which is causing customers to only make purchases physically in the store. This prevents customers from finding the unique and eclectic products of the store’s brand personality.
How might we improve so that Cliff’s Variety is more successful based on having a visually compelling online shopping experience.
Problem Statement
Problem + Goals + Needs
Business Problem
The goals of the business is to have a online presence so customers are able to make purchases both in the store offline as well as digitally online.
Brand Problem
The goals of the brand is to translate the voice of the physical store, window displays, store merchandising, to reach and engage the community.
User Problem
The goals of the user for a shopping experience is to visually stimulated by products that express their personality, rather than searching and getting lost in information. They want unique products that are reliable of top quality brands, novelty, sense of community, and things that put a smile on their face.
I designed a solution around the problem of Cliff’s Variety needing an e-commerce online experience since customers are currently only able to make purchases physically in the store. Through my research and design process I discovered that the brand is striving to set a tone through their window displays, store merchandising, and to reach and engage with their community. My solution is to offer a interactive visual shopping experience that speaks to the voice of the brand, inspiration of window displays, and merchandising that translates into a shopping experience that is visually stimulated by products that express their personality. As well as meet the goals of users to find products that are unique, reliable top quality brands, novelty, and have a sense of community.
Solution Overview
Organization
Visual
Lifestyle
Summary of Site Investigation
Through the process of user research, usability testing, and card sorting of over 100 products of organization patterns it was determined that users shop visually and by lifestyle.
Solution Statement
For the target audience of Cliff’s Variety who need to make purchases online, the new product website is a solution that will enable customers to discover full inventory of unique products and make purchases online.
Unlike alternative like Home Depot or Lowes, our solution has a visual and interactive online shopping experience by lifestyle and specific products.
Hypothesis
If we create an e-commerce website for Cliff’s Variety, Then we are enabling an online presence that caters to our target market increasing awareness of our unique collection of products as well as generate sales beyond our local community.
Company Brand Research
Cliff’s Variety has been in business since 1936 and has a very community based business. They carry top quality brands, novelty items, and products that are unique. Visually they display products in their windows in creative and politically moving ways. Also within the store products are grouped in methods of color, texture, and tell a story.
Cliff’s Variety is located in the heart of the Castro in San Francisco. Walking through the neighborhood I discovered how surrounding stores had window display presence of selling product merchandise. Also I noticed how people laugh, admire, and enjoy the novelty of these window displays.
Site Analysis
Site Investigation + Neighborhood
Site Investigation + Window Display
Site Investigation + Window Display + Inside Store
Site Investigation + Window Display + Messaging
Visiting the site has given me insight on the brand’s identity as well as what the business is striving for. Cliff’s Variety takes unique and high quality products and merchandise those products in groupings, patterns, color, and in visual ways that tell a story. Also windows that tell stories to the community and political messaging of what is current.
Site Investigation Summary
Site Investigation Inspiration
I am inspired by Cliff's Variety window displays and how they use products sold utilized in creative and narrative ways.
Cliff’s Variety current website does not have a online shopping experience. When attempting to purchase a product you are redirected to a third party application called “Pointy”. When you are redirected and try to purchase you are then redirected again to information only on Cliff’s Variety location and store hours to go to the store inorder to make a purchase. Currently you cannot make any purchases on the website.
Cliff’s Variety Research As A Brand/Current Website
Current Website User Flow
Current Website
Cliff’s Variety currently does not offer online sales.
Competitive Analysis
- Not much of unique product selection
- Recommended searches, featured items, and coupons on main page
- Search top results with images
- Sort by (top selling, new arrival, top rated, and price)
- Organized product overview
- Simple website written copy material
- Instant suggestions in search bar
- Shop by department, room, or product
- Full product overview on one page
- Great check out process
- Clean and organized
- Easy to search for product
I researched competitive websites such as Pottery Barn, Lowes, Home Depot, Crate and Barrel, and Nordstrom to see how websites currently use interactions for users for inspiration of unique shopping experiences. Through my research I discovered hovering effects that enlarged product, colors of product would change, enlarge product views, and instant product details to learn further information.
Competitive Website Interactions
Interactions Summary
- Search top results with images
- Image based shop by department / room
- Enlarge product with hover
Process
I began the design process by starting with a site visit to Cliff’s Variety. I analyzed the store from the surrounding neighborhood, outside the store, and inside. I spent hours in observation, contextual inquiry, and analyzed the store by their organization, and analyzing all their products they carry. I went around the entire store taking 1000 photos of images of their products in each category of their inventory. I then synthesized over 100 product images, printed them out, and cut them up into cards for testing for users to clearly understand organizational patterns. I then did competitive analysis of competitors such as Home Depot, Lowes, ACE as well as research on how current websites use interaction in shopping. I sketched out a interactive paper prototype to test out a design.
I then interviewed 5 users to test hand drawn sketches of wireframe prototypes of a website for Cliff’s Variety. The users were individually asked to search the website for a clock, select that clock, and add it to a cart for a check check out and purchase. From those insights I finalized a high fidelity prototype.
Design Process Overview
Hand Sketches
30
Prototypes
3
Rounds of Iteration
4
User Research
After hours of site analysis I then synthesized over 100 product images, printed them out, and cut them up into cards for testing for users to clearly understand.
3 participants were given a stack of printed out cards of over 100 images of products encompassing all that Cliff’s Variety carries. It was my goal to see the patterns and reasoning why and how they digest the overwhelming amounts of product and create order out of it.
Card Sorting
Method
3 users were given a stack of printed out cards of over 100 images of products encompassing all of Cliff’s Variety products to organize and categorize
Insights
- Users started out overwhelmed and spread everything out
- Unexpected items were added categorized by room creating a lifestyle experience (eg. bedroom category: ice bucket, iron, novelty, bar shaker)
- Users thinking was by rooms in their house (or a room as one large room)
Over 100 Store Product Card Sort
I interviewed 5 users to test hand drawn sketches of wireframe prototypes of a website for Cliff’s Variety. The users were individually asked to search the website for a clock, select that clock, and add it to a cart for a check check out and purchase.
It was my goal to discover if the user flow was a success, to have a simple navigation to find a product all the way to check out. I took their feedback into account how the make the search easy for them to navigate a product and discover their pain points.
Paper Prototype Usability Testing
Method
5 users were provided hand sketches / clickable prototype of website screens. The task was to search for a clock, get product information, and add it to cart for checkout and purchase
The goal was to understand the tasks flow, simple navigation, and pain points.
Goal
- Test the feature of navigation and finding categories easily
- Test the feature of the homepage hero shot if the user will hover and discover the clickable images of the products in the hero lifestyle image
- Then click the clock / product and get the product information and click check out
- Test the scrolling on the homepage to see if user understands the lifestyle image hero shot and the products broken down under them
- Test the product page to see if the user understands the lifestyle image and product breakdown
Insights
- Overwhelmed navigation categories
- Love to shop by lifestyle
- Desired visual lifestyle image to be interactive to understand the products in the image
- No more than 3 product suggestions
Young to mid-age professionals who enjoy online shopping. Users who love new brand products and searching for unique/eclectic products.
Target Audience
I developed the persona of Robert through insights gained from user research. The target audience are young to mid-age professionals who enjoy online shopping, who love new brand products, and searching for unique/eclectic products. I based Robert through the design process of shopping for a retro clock through a storyboard that was carried out into my prototypes for user testing and final wireframe design flow.
Persona
"When something strikes me visually in an impactful way, It's not whether I can afford it, It's whether I can afford not to have it."
Age: 32
Occupation: Creative Director + Technology Developer
Status: Single
Income: $100,000
Location: Castro, San Francisco
Robert
About
Robert loves to decorate his apartment with unique items that are reliable top quality brands. Since he works really hard at his creative job, he enjoys to surround him self with things that can put a smile on his face. In his downtime he enjoys to do home improvements, cook, and art projects by getting dirty by working with his hands. Living in San Francisco has touched his heart to learn about history and to give back to the neighborhood community by making an impact.
Needs From Online Stores
Pain Points
- Too many clicks
- Information overload
- Unable to find items
- Unique brands that express their personality
- Strong store branding
- Visual shopping by lifestyle
Story Board
Robert is overwhelmed by stores and online stores and online shopping websites. Where should he even begin?
Robert loves this retro clock, He saw it at a friends house but isn't sure where to get it. It would look perfect in his apartment and he must have it.
Wow! He found it on Cliff's Variety website. That was so easy, it was a great experience to find it visually and with interaction. Cliff's Variety has so many great choices that fit Robert's style and personality.
Robert loves his new retro clock. It suits his room so well.
High Fidelity Prototype
User Flow
Design Focus MVP
- Navigation by lifestyle
- Hover over hero images to view product details and shop for it
- Easy check out process
Next Steps Of Future Features Based On User Research.
Moving forward I would like to explore high end photography for staging of product merchandising that fits Cliff’s Variety brand personality. This is an opportunity of community engagement, messaging, and to shop by lifestyle in a visually compelling way. I am drawing inspiration from various window merchandising, product organization, and visual eclectic themes that is very inline with the business and brands voice gathered from their seasonal window displays.
Results + Reflections
- Refine design from user testing and research
- Creative direction of high quality photography of lifestyle images
- Creative ways to show products and selection of different patterns / colors
- About Page of history