TouchTunes
TouchTunes
TouchTunes
Redesigning the Touchtunes
Redesigning the Touchtunes
Redesigning the Touchtunes
B2B website
B2B website
B2B website
Web Design
UX Design
UX Research
Web Design
UX Design
UX Research
Web Design
UX Design
UX Research
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:
Security & Privacy
Performance
Aesthetics & Layout
Accessibility
Information Architecture
Content
Learnability
Feedback & Interactivity
UI Pattern Best Practices
Support
Each category is rated on a Likert Scale from 1–3:
Developing — Lacking foundation, the website is difficult to navigate and sections are difficult to access.
Sufficient — A strong foundation enables user to navigate the website and access important sections easily.
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:
Existing Operator
Prospective Operator
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.
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:
Security & Privacy
Performance
Aesthetics & Layout
Accessibility
Information Architecture
Content
Learnability
Feedback & Interactivity
UI Pattern Best Practices
Support
Each category is rated on a Likert Scale from 1–3:
Developing — Lacking foundation, the website is difficult to navigate and sections are difficult to access.
Sufficient — A strong foundation enables user to navigate the website and access important sections easily.
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:
Existing Operator
Prospective Operator
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.
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:
Security & Privacy
Performance
Aesthetics & Layout
Accessibility
Information Architecture
Content
Learnability
Feedback & Interactivity
UI Pattern Best Practices
Support
Each category is rated on a Likert Scale from 1–3:
Developing — Lacking foundation, the website is difficult to navigate and sections are difficult to access.
Sufficient — A strong foundation enables user to navigate the website and access important sections easily.
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:
Existing Operator
Prospective Operator
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.
Conclusion
Services
Web Design
UX Design
UX Research
Tools
Figma
team
Senior UX Designer
Tyreil Poosri
Senior UX Designer
Amber Franz
Account Executive
Jamie Maslam
Lights on·off