Playground for Teenage Engineering
Role
Timeline
Tools
SOLUTION SNAPSHOT
Making learning simpler through guided interaction:
This project is a redefined website experience for Teenage Engineering that attempts to provide two touchpoints for new users with no musical background to gain a better understanding of how their most beginner-friendly synthesizer, the Pocket Operator (P.O.) functions.
01 // Frictionless Navigation
A more organized and focused product page.
02// Extended Experience
A virtual playground to test a simplified version of synths.
problem
Exploration
Initial Explorations:
going through the motions.
Initial interaction explorations were the stepping stone towards our final interaction principles, but were far from being a cohesive visual language due to their lack of consistency from page to page.
credit to guo chen for the research planning framework
Exploration
Competitive Analysis:
Functions & Features are clear
I then researched other competitors and looked at their most accessible synthesizer pages to see what features, specifications, and sounds are shown. Through my analysis I found that:
1.) Videos on the product pages are used to show the synth in action.
2.) Multiple sound and music clip featuring unique sounds.
3.) Dedicated specifications page for detailed information.
credit to guo chen for the research planning framework
Primary research
New users had trouble
understanding the product
47 people (ages 17-56) were shown the existing Pocket Operator page. All participants had varying levels of interest in musical hardware.
96% of surveyed participants were newcomers with no previous knowledge of Teenage Engineering.
40% disagreed or slightly disagreed to knowing what a Pocket Operator does after looking at its product page for a couple of minutes.
primary research
Even Avid P.O. Users
thought the website was difficult
After our survey, I then asked veterans on the Pocket Operators subreddit what they thought of the website. Despite their deeper knowledge of the product, I wanted to see their thoughts on the website: the answer was yes.
Because of our short timeline I chose Reddit, as it is the best way method to communicate to enthusiasts through one post.
insight #1
No Clear Function Overview
Product pages show large hero images instead of descriptions of the main function of the device.
insight #2
Difficult Terminology
Features and specifications are described with difficult musical terminology with no visualization.
insight #3
Arbitrary Product Layout
Different lines of products are placed arbitrarily with no captions or clear categorization to guide and inform users.
primary research
The Current New User Flows
with our ideal paths
Teenage Engineering’s the website caters towards those who do have prior knowledge of music hardware, which leaves new customers often frustrated and having to leave the page to learn more. Through these flows, the touchpoints within the website become clearer and we can focus our efforts to address the most pertinent issues based on research.
support new user’s confidence when purchasing from Teenage Engineering to better align with the company’s values of catering to those with no musical experience?
inspiration gathering
Collecting a Miriad of Styles
Before creating any high-fidelity mockups, our team began with creating possible layouts and placements of new elements, without disrupting the existing visual language of Teenage Engineering. The entire team diverged and worked on different possible solutions based on our research.
1.) We knew we had to address the Pocket Operator's product page because the P.O. is Teenage Engineering's cheapest and most accessible synthesizer, thus it shouldn't be difficult to understand how it works, what it sounds like, etc.
2.) Another idea we pursued was the “playground page” which would allow the user to go through simple interactive guides teaching them about the instrument. Users will also have an option to freely experiment as well.
general wireframe layout of a learning space for teenage engineering products (Created by abbey, another team member!)
Visual developement
Collecting a Miriad of Styles
This project keeps Teenage Engineering’s existing branding and visual identity by using the same colour schemes, visual languages, and typeface. They have already established a strong identity and changing it would not benefit the purpose of this particular intervention.
primary research
Reimagining our Visuals:
a digital pocket operator
Aspects like screws, bolts, and the graphic symbols were not necessary for learning the foundational function of a Pocket Operator. We focused on creating a simplified representation to ensure users learn the fundamentals without any distractions.
A timeline of how we created our final pocket operator look (shoutout to daphne for the visual design of this pocket operator)
revisions
Splitting touchpoints of playground & product page
We also decided to split up our two areas of intervention: improving the product page and creating a learning page. This made it easier to iterate and focus on solving specific issues within each page flow instead of trying to do too much on one.
primary research
Reimagining our Visuals:
a digital pocket operator
We kept the overall existing page flow of Teenage Engineering's current website with the addition of the lab page which would house the Playground. The playground to be accessible at multiple touch points.
feature #1
Clear Categories for
Pocket Operators
We also decided to split up our two areas of intervention: improving the product page and creating a learning page. This made it easier to iterate and focus on solving specific issues within each page flow instead of trying to do too much on one.
aspect #1
Music Type Categorization
Newly organized groupings based on instrument type instead of release order makes it easier for users to understand.
aspect #2
Reduced Visual Clutter
Considering Hick's law, we reduce the amount of time it takes for a user to make a decision. Only one pocket operator is viewable at a time.
aspect #3
Sound Sample
Added sound sample next to each Pocket Operator to help users make a more informed decision when picking a synth.
Feature 2
Clear Categories for
Pocket Operators
The goal of this new page is to introduce the function of the Pocket Operator in a fun, but simplified visual model. The general walkthrough is linear in nature, but gives enough opportunity for users to experiment with different sounds and patterns.
There are limited buttons available to not overwhelm new users, as well as encourage them to buy a Pocket Operator for the full experience.
primary research
Reimagining our Visuals:
a digital pocket operator
The existing "ems" page which stands for electronic music school houses external links to tutorial videos and workshops. This is now moved to our new lab page which houses both the new playground page and now renamed music school for better understanding
Value proposition #1
Added Value to Teenage Engineering
The brand can set themselves apart from others in the industry while maintaining their values by providing a simplified avenue within the website to introduce new users to complicated music hardware.
value proposition #2
Added Value to New Customers
New customers will faster navigate through the website, feel more confident before purchasing complex music hardware, and can have a more positive experience overall.
Internship reflection
Retrospective
Not only were we able to survey and test people who did not know much about Teenage Engineering's synths, but we also asked avid users of the product on their thoughts of the website. This holistic approach made it easier to identify overlapping problems and help us maintain a focused approach when ideating.
I learned how to properly design and develop a product from start to finish that provides value to not only the users, but also to the brand and its beliefs. Our intervention targeting on supporting new users, but there could be many other alternative versions depending on if we focused on existing users or a pre-purchase versus post-purchase experience. The possibilities are quite possibly endless.
I would want to use a priority matrix to better define which solutions to develop further, and which ones to leave behind. Throughout this project, our main focus was on creating the playground for pocket operator, but we continued to find little issues on the website to fix that ended up pulling our focus away from the original how-might-we statement.
Questions for myself
Would the experience be available on mobile, if so how would it be achieved?
Should there be a way to save the simple beat you made during the playground experience?
Would the playground experience change depending on if you are a returning user?