eCommerce Website: System Builder

Sound United is the parent company for the speaker brands Definitive Technology and Polk Audio. Definitive Technology produces high-end speakers while Polk caters to the middle class consumer.

Sounds United needed to free themselves from an aging website platform that cut into a large portion of their profit from online sales. As the larger team redesigned their eCommerce websites, I branched off on a sub-project called system builder.

Role
Concepting, UX and UI Designer
For
Sound United, Polk Audio & Definitive Technology Brands
Type
Responsive Ecommerce Application
URL
definitivetech.com/systembuilder
URL
polkaudio.com/systembuilder
Devices
Responsive

Problem Statement

[User] struggles with [desired action] because [challenge].

Customers struggle with buying a speaker system online because it is complex, expensive and requires technical knowledge.

Goals

  1. Empower customers to confidently purchase a Definitive Technology or Polk Audio speaker system online.
  2. Help Polk Audio customers identify their perfect products in-store without needing customer representative assistance.

My Role

I was the sole designer on this project. Everything you see on this page was made by me!

• User research

• Brainstorming concepts

• Sketching

• Client presentation

• Wire framing

• User flows

• Visual design

• Icon design

• Desktop, tablet and mobile designs

• Prototyping

• Animation

• Asset export

• Design QA

Programs

Keynote: presentations & prototyping

Sketch: user flows, wireframes & UI

Flinto Mac App: prototyping

Invision: prototyping

Adobe After Effects: animations

Adobe Photoshop: photo editing

Adobe Illustrator: icon design

Working through the problem

Research

I started this project with a little guerrilla research. I found people to interview by contacting my friends and family who have made speaker purchases recently. From those interviews I produced an empathy map of the customer, leading me to the hypothesis.

Hypothesis

If [feature] then [outcome] because of [research]

If we make speaker research simple by providing personalized, reviewed recommendations to the customer then they will have more confidence buying a home speaker system online and online purchases will increase.

Concept

The CEO was very interested in the success of the project, so the pressure was on. I took up half a sketchbook working through this problem, sketching out every possible incarnation of the system.

I presented three concepts to Sound United:

  1. Room Builder
  2. Personal Assistant
  3. Sonic Exploration

Room Builder

This concept allows the user to see the products in the rooms they want to fill with sound.

Animation created in Keynote.

Personal Assistant

This concept uses conversational UI to create recommendations that feel truly personalized.

Animation created in Keynote.

Sonic Exploration

This concept allows the customer to explore their options and move through the space by answering questions.

Animation created in Keynote.

Recreating the speaker room

The final product was a combination of the Room Builder and Personal Assistant concepts.


Room Builder was inspired by the testing room at the Sound United headquarters. Our client took us in to show off the Atmos directional sound system by playing the beginning of Batman v Superman for us. I wanted to recreate that experience by allowing users to place products in the room that they are shopping for.

Sound United’s testing room.

To get to personalized recommendations, the System Builder starts out with an interactive question and answer section similar to the Personal Assistant.

A path down the decision tree.

Interactive wireframe prototype created in Flinto.

Ok, now SCRAMBLE!

Once the room builder concept was selected, I was told that the Sound United marketing team would not be producing the photography needed to place the products in the rooms. I now had to figure out how to make a concept based on seeing products placed into a room work with zero new assets. Brainstorm time!

I settled on replacing the products with animated icons based on the product’s category. Each icon was placed in its room to match the perspective and had a resting and interaction animation to help draw the eye. I made the icon animations for the resting and interactive states in After Effects.

Interaction animation on click

Resting animation for icons.

Designing for different contexts

Designing for in-store

An in-store experience has to command attention in an environment that is already vying for the customer’s eye. Every screen of System Builder had an animation made by me in After Effects. Whether it was the floor plans morphing from small to large, speakers pulsing with the beat or UI enhancing sound waves, there was always something to draw the eye.

The System Builder is available on the tablets on the table. Physical store design was made by the Sound United designers.

Designing for home

I learned from research that a lot of the research customers do is at home on their desktop. So my approach was to focus on the desktop and in-store tablet experience first. However, the entire project was built to be responsive from the get-go.

Loading animation after finishing the survey. Animation created in Flinto.

Designing for on-the-go

Once the user knows the system they’d like, they can take their recommendation on their phone to the closest showroom. The Room Builder sidebar was built to do a lot of the heavy lifting when it came to displaying the product information. Everything that could be done through the icons could also be done through the sidebar. This allows for graceful degradation to small mobile devices.

Post Mortem

Concept

In retrospect, there was very little chance Sound United had the capacity to re-photograph their entire product line from a single perspective. I should have explored more low effort concepts from the beginning or planned on no new product photography from the get-go.


Animation

I am a self taught animator so figuring out exporting was a trial and error process. The way we built the animations resulting in the some of the animations looking half finished and pixelated. If I had more time I would have re-exported the animations so they animated more smoothly and were sharper.

Conclusion

This project was a lot of fun and very challenging. I owned the entire project form start to finish. I got to fly to San Diego several times and interacted directly with the CEO of Sound United, presenting my work and advising on the most effective directions. My presentation and soft skills were put to the test and I came through with flying colors.