PLAYGROUND FOR TEENAGE ENGINEERING
Oct - Nov 2022
This is a 3 week user experience and interface project for a design course at SFU. The team was tasked to search for a client with an intervention opportunity using research, framing, surveys and prototyping. I helped conduct and analyze research and insights. I led the team in copywriting. I co-designed the interactions and interface as well as the slide decks.
MY CONTRIBUTION TEAM TOOLS
UX Research Daphne Borrel After Effects
Interaction Design Jaden Lee Figma
Copywriting Anh Nguyen
UX + UI Design Abbey Perley
Emily Xu
1. CLIENT + BRAND VALUES
"We want [our products] to be very accessible and easy to use but still have a depth. It should be fun to just pick it up and play something. But you should also be able to explore the features and go deeper and deeper into what it can do.”
-David Erikkson, the co-founder of Teenage Engineering
2. USER RESEARCH + INSIGHTS
INSIGHT #1 - SURVEY FROM NEWCOMERS
We focused on Teenage Engineering Pocket Operator (PO) Synthesizer as it is their most beginner friendly and cheapest product. The team conducted a survey from 47 people from ages 17-56 inside and outside of SFU. 96 percent were newcomers with no previous knowledge of teenage engineering.
① We discovered a Lack of Understanding is shown from Non Users. 40% of the 96% of individuals that had no knowledge of teenage engineering beforehead, slightly or fully disagreed to knowing what a PO did after looking at the product page.
INSIGHT #2 - REDDIT INSIGHTS FROM AVID USERS
3. PAIN POINTS
INSIGHTS WITH OPPORTUNITY
Their brand focuses on creating accessible synthesizers, especially for newcomers. However, I identified some pain points that do not achieve this goal through a heuristic evaluation of their current website. Through my research, we discovered three pain points that were worth addressing
① Arbitrary Product Placement due to no categorization or captions to guide users towards the products they are interested in.
② No Clear Function Overview is provided as large hero images show glamarous depictions of products opposed to helpful information.
③ Difficult Terminology is used heavily on product features and specs and fails to explain complex terms and present information in a way for beginners to easily understand
4. FRAMING
How Might We Support New User's Confidence when purchasing from Teenage Engineering to align with the company's values of catering to those with no musical experience?
INTERVENTION # 1
Our first intervention is to organize the PO page in a way that's easier for users to navigate and find what they want
INTERVENTION # 2
I conceptualized the second intervention by brainstorming the idea of adding a virtual synthesizer for users to try before purchasing products they are not familiar with.
5. SOLUTION
INTERVENTION #1 - FRICTIONLESS NAVIGATION
To assist new users in understanding the PO, we grouped and condensed the previous PO page into a more digestible format that avoided difficult terminology and large groups. In addition, product specs are revealed only when clicked.
PREVIOUS PO PAGE VS NEW PO PAGE
INTERVENTION #2 - EXTENDED EXPERIENCE
One of the key lessons I learned from this project is to not design in my head. While I initially believed that striving for complete originality would result in a superior design, I learnt that drawing inspiration from other design precedents will create something valuable.
POCKET OPERATOR GRAPHICS
I played a key role in designing the assets for the playground page, including the pocket operator and its buttons using Figma. I also added complementary visuals to the sound on the display screen of the pocket operator when users select their sound.
POCKET OPERATOR PROTOTYPE
I created a functional prototype by implementing simple interactions such as clicks, opacity and colour changes using Figma.
INTERVENTION #2 - EXTENDED EXPERIENCE
One of the key lessons I learned from this project is to not design in my head. While I initially believed that striving for complete originality would result in a superior design, I learnt that drawing inspiration from other design precedents will create something valuable.
POCKET OPERATOR GRAPHICS
I played a key role in designing the assets for the playground page, including the pocket operator and its buttons using Figma. I also added complementary visuals to the sound on the display screen of the pocket operator when users select their sound.
POCKET OPERATOR PROTOTYPE
I created a functional prototype by implementing simple interactions such as clicks, opacity and colour changes using Figma.
ADDED VALUE PROPOSITION
ADDED VALUE TO TEENAGE ENGINEERING
The brand can set themselves apart from others in the industry while maintaining their values by providing the resources within the website and simplified for those new to music hardware.
ADDED VALUE FOR NEW CUSTOMERS
New customers will faster navigate through the website, feel more confident about otherwise complex music hardware, and can have a more positive experience overall with Teenage Engineering as a brand.
5. REFLECTION
”INFORMED DESIGN DECISIONS”
One of the key lessons I learned from this project is how crucial user research is important in proving the validity of a product and intervention. By making informed design decisions, I can add value for existing users and brands.