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.
|Concepting, UX and UI Designer|
|Sound United, Polk Audio & Definitive Technology Brands|
|Responsive Ecommerce Application|
- Empower customers to confidently purchase a Definitive Technology or Polk Audio speaker system online.
- Help Polk Audio customers identify their perfect products in-store without needing customer representative assistance.
I was the sole designer on this project. Everything you see on this page was made by me!
• User research
• Brainstorming concepts
• Client presentation
• Wire framing
• User flows
• Visual design
• Icon design
• Desktop, tablet and mobile designs
• Asset export
• Design QA
• 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
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.
If [feature] then [outcome] because of [research]
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:
- Room Builder
- Personal Assistant
- Sonic Exploration
Room BuilderThis concept allows the user to see the products in the rooms they want to fill with sound.
Animation created in Keynote.
Personal AssistantThis concept uses conversational UI to create recommendations that feel truly personalized.
Animation created in Keynote.
Sonic ExplorationThis 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.
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.
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.