Overview

Working at Fresh Consulting, I had the opportunity to redesign the TouchTunes website for “The Octave Group”. They wanted to create a B2B experience while showcasing what their product provides: Fun, music, interactivity, and togetherness. 

UX Review

I wanted to better understand TouchTunes and it’s competitors. The stakeholders identified “Orangedoor Music” and “AMI Entertainment” as key competitors. 

At Fresh Consulting, they have the “7 Ingredients for a High-End User Experience”. Those ingredients have been slightly modified to include the following: 

1. Security & Privacy

2. Performance

3. Aesthetics & Layout

4. Accessibility

5. Information Architecture

6. Content

7. Learnability

8. Feedback & Interactivity

9. UI Pattern Best Practices

10. Support
    
    

Each category is rated on a Likert Scale from 1–3: 

1. Developing — Lacking foundation, the website is difficult to navigate and sections are difficult to access. 

2. Sufficient — A strong foundation enables user to navigate the website and access important sections easily. 

3. High-End — An exemplary or innovative foundation makes it super simple for user to navigate and access important sections of the website. It enhances discovery. 
   
   

As you can see in the picture above, TouchTunes scored a total of 15 out of 30 points. There was room for improvement in the majority of the aforementioned categories. 

Their competitors faired slightly better, but not by much. 

Personas

TouchTunes identified three target customers they wanted to focus on: 

1. Existing Operator

2. Prospective Operator

3. Venue

The goals and tasks of the “Operator” were similar enough to combine into a single persona, “Operator Olive”. For Venues, we created “Venue Vince”. 

Atomic Design & Object-Oriented UX

The Stakeholders requested that the new site be built with “page builder” functionality, so that they may create pages of content on their own in the future. This aligned perfectly with our intention to follow Atomic Design principles. One of the core tenets of Atomic Design is the idea that we are no longer building “pages” but rather a system of components that build these pages. The question was, “What components do we need to build?”This is where Object-Oriented UX came into play. OOUX helps identify relationships between content on the site, as well as the components we would need to build. Another benefit of OOUX is that it enables the user to use the content as a form of navigation, rather than relying on traditional navigation alone. 

Wireframes

Using the components identified in the OOUX process, we were quickly able to put together wireframes. We then took these wireframes, and created a simple click-through prototype to test the information architecture. 

Mockups

One of the limitations we encountered was that we needed each component to have a simple design that made it easy for reuse. This meant that our components could not overlap to ensure that they could be used in a variety of content situations.