Extending a Brand to a Virtual Experience: Design Retrospective

The goal of this project was to design an eCommerce website for a fictional 30-year old brick and mortar toy store owned by Mom & Pop, without losing any of their personality or brand identity in the process.

Challenge

When considering how to represent Mom & Pop’s hand-picked, curated toys both modern and retro, I imagined a heart-felt scenario - entering the site from the home page to checking out at the end: a virtual store with a curated front window, lots of helpfulness, stand-out sections for toy categories leading up to a fond-farewell and thank you at checkout.

In addition to reaching Mom & Pop’s brand needs, there needed to be considerations for diverse customer types with varying degrees of technological prowess that would make the site both easy to use, yet have some fun along the way.

The big question: “How can I extend their brand for a virtual experience?”

Three-Fold Design Solution

My three-fold design that includes the needs of both the business and the customer is as follows:

  • Design a website that is easy to navigate and understand, incorporating recognizable and trustworthy page elements
  • Include customer preferences in the design: order tracking and history, ratings, inventory, filtering, sorting, recommendations and some fun interaction design
  • Add a “cozy” visual design that provides a strong sense of place linking the virtual store back to the brick and mortar business

The Design Process

First, I looked at the competition. I noticed there is a disconnect between a business’ brand as you experience it in the store - if there is one- and the same brand as you experience it online. In fact, for many eCommerce sites, brand is reduced to the logo and color palette. For others, the opposite is true; there is a great business with lots of brand personality, but the website is lacking in many ways.

This research provided the insight and inspiration to make the brand connection between virtual & reality.

Next, I worked out some user flows to get a sense of what the customer might expect as they navigate the site, select products, sign in, create an account and finally checkout.

Lastly, with so many toys for customers to search for, it is important to determine what categories within which each toy would be sorted. To better understand the Information Architecture, I collaborated with a peer for some card sorting to come up with desirable categories, subcategories and individual toys.

Below are two screenshot of the header with the primary navigation. Notice these three elements: Customer Service, Home Icon and Star Wars Category.

Original Wireframe Design — header + navigation

Since it is important to have the virtual customer feel as supported and cared for as a physical customer, having a persistent customer service link at the top of the page was important. With the redesign below, feedback and usability testing proved that Customer Service didn’t provide that warm cozy feeling I was after so I changed it to How Can We Help? Better, right?

The redesign — header + navigation

I absolutely love the Home Icon as it signifies the physical business. Since this site expects traffic from multi-generational customers, the Home Icon makes navigation easy. Not everyone knows the logo is a link to the home page. Placing the Home Icon near the search bar makes it easier to see.

I struggled a little with having Star Wars as a main category since it is both retro and current, but the primary navigation was too crowded. Taking out the Home Icon and the Star Wars category gave the navbar a more polished look. Feedback was also in favor of removing Star Wars as a primary category since it was searchable in both the toys and retro categories.

Home Page Wifeframe

Home Page

This Wireframe of the Home Page fulfills several requisite elements of both Ma & Pop and their customer base. I included a place for a Hero image on the home page. Imagine the image as a hand-picked, carefully curated collage of toys, old and new - looking magical, fun and inviting with an overlay of Mom & Pop’s story of core values and love of service.

Categories such as Timeless Treasures and Recommendations to get the virtual customer interested and shopping.

Cccess to Mom & Pop both in the header and in the footer: a link to a customer service page and a complete listing of contact info including address, phone, contact form and store hours. The customer service page also has many useful links and important information.

Even though this page is called “Customer Service”, I would probably now change it to “Customer Account” since this is where they view their orders, shipments.

Customer Service Page

A contact form for those who don’t want to call or visit the store. Virtual customers can also request a product and learn about privacy & security and returns.

If customers have an account they can sign in and gain access to their order, track their shipment and view their order history.

I originally thought to include these items as secondary utility navigation links, but I really wanted to keep the header uncluttered. A dedicated customer service page with everything a virtual customer wanted to know was more in line with talking to a real person. This solution is definitely more friendly, easy to use and thorough.

Step 3 of the Checkout Process. A clean uncluttered layout supports the goal of a cozy, secure and easy to use design.

The Checkout Process

Good interaction design always lets the customer know where they are in the process.

Have a progress bar across the top of the checkout screens is always a nice touch. For this site, each number - 1, 2, 3, is a link to that page in case the customer wants to go back and edit something. And similar to the checkout at at real store, the cart stays with the customer all the way until checkout is complete!

My original checkout process had five steps. That was too many. With thought, I was able to eliminate 1 step and combine payment with shipping to reduce the number of checkout screens.

A Workable Prototype

For the prototype, I imported the Wireframes from Sketch3 into InVision.

The prototype is set up to take a customer through the search, select and checkout process. Below you will find a link to the working prototype for this project. The prototype is set up to find, search, select and checkout the toy, Evel Knievel Stunt Cycle.

I designed each category with a dedicated landing page to further anchor the shopping experience and give a strong sense of place within the virtual store, similar to walking down an aisle or visiting a specific section of merchandise in a physical space.

There are some fun Interaction Design elements as well when signing in, creating an account, checking your cart and adding an item to the cart.

Link to Prototype: https://invis.io/CU5EUBXJ6


A personal touch that is exclusive to paying customers is a classy touch. Just below the video is a link for customers to share their purchase on Facebook - the only social media channel Mom & Pop currently use.

Thank You!

Once the customer places the order, they are directed to the Thank You Page with a special thank you from Mom & Pop.

…and a special bonus video accessible only for those who go through the checkout process!

I envision a video from Mom & Pop checking out a customer and waving goodbye saying, thank you and come again as the customer walks away with their purchase and a big smile. Another scenario would be Mom & Pop wrapping an order for shipment then turning toward the camera to say something like, “Your order is on its way. Thank you for shopping at the Treasure Chest. We hope to see you again soon!”


Bringing that “Cozy” Feeling to Life

As you explored the prototype, I hope you felt a strong sense of place, ease of use and comfort with familiar page and navigation elements. Did you like the interaction design for the Add to Cart button, Sign In & Create an Account links, and the Cart Icon? If so, then I successfully designed a solid virtual store that is easy to navigate with a strong sense of place.

To really bring the site to life, in addition to the Home Page Hero image and the Thank You Page Video, I envision each Category Landing Page to represent relevant curated and hand-picked toys. Furthermore, each individual toy will also be curated keeping within Mom & Pop’s special aesthetic style.

Take-A-Ways

The end product was quite unlike my first thoughts about it. I imagined an eCommerce site similar to Amazon or Toys “R” Us. As I worked out the pages, they felt too commercial. The site needed to be solid and include features for savvy internet shoppers, but keep the soul of the brick and mortar store.

I also removed all ambiguous features and functions to keep a clean solid layout with useful navigational elements. Since Mom & Pop keep their physical store clean, so too should their virtual store be clean and tidy with products and assistance easy to find.

Final Thoughts

With all the tools and methods available for UX design, the designer needs to know when to leverage the right method to uncover a particular insight, and the right tools to make design and function come together.

Solid Information Architecture + Enjoyable Interaction Design = Good UX

Combined with an appropriate layout, I’ve discovered this formula trumps functionitis and the impulse to design a site that does too many things. In the end: Is it good for the customer? Is it good for the business? Does it solve the problem?

Answering these questions is where design needs to begin and end.

Designing a virtual brand presence is a lot of fun. An effective design that both Mom & Pop and their customers will enjoy using required getting into their thoughts by asking questions, exploring options and putting the pieces together in different ways until they clicked.

To successfully extend the Mom & Pop brand virtually, design elements had to be congruous with the actual store design. Function, layout and visual design came together perfectly to make this design feel like the brand, like an actual store.

Staying close to Mom & Pop and the customer-base kept up the inspiration for this design, else it could have ended up being just another eCommerce site. Further usability testing and feedback was integral in tightening up the design elements and polishing the “cozy” experience of shopping online at the Treasure Chest.

Like what you read? Give Zach McDermott a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.