Overview
project brief
about
problem discovery
user research
previous designs
initial solution
iterations
final solution
impact
reflections
2024 - current
Redesigned Technical Onboarding Documentation for Musicians
MUGIC MOTION is a small music tech startup looking to expand human expression by creating a gesture-based music motion sensor.
As the solo Product Designer, I worked with the founder and lead software engineer to redesign MUGIC’s website to empower musicians (often non-technical) to use MUGIC. Existing copy and documentation made onboarding difficult, impacting product understanding, usability and sales.
See the live documentation sitesee live websiteRole
Product Designer, Web Developer, Business Consultant
Timeline
Jan 2024 - Dec 2024
Tools/ Skills
Webflow, Shopify, Figma, Canva, GitBook, HTML & CSS, Copywriting
Impact
Reduced technical support inquiries by over 50% and increased sales by 108% within first month of launch.
about mugic
Created to eliminate technical barriers of soldering, assembling, and programming, so musicians can just create art.
Founded in 2016 by renowned violinist and music professor Mari Kimura, MUGIC is a small music technology company that creates motion sensors for musicians.
Overall, MUGIC’s mission is to remove the technical hurdles of making electronic music. It allows users to use their body movements to make music, so they don’t have to spend years mastering traditional instruments.
problem discovery & user research
The Founder spent countless hours on tech support calls, helping users set up their devices.
Instead of removing technical barriers to electroacoustic music, MUGIC documentation was adding barriers -- making it harder for musicians to create art.
Mari, MUGIC’s Founder, was constantly inundated with tech support zoom calls that she didn’t have time to do anything else.
Through my heuristic evaluation and user interviews, I uncovered critical friction:
Documentation scattered across 5+ pages
No clear onboarding path for new users
Language and IA not aligned with musicians’ mental models
Non technical users overwhelmed/confused
how might we...
empower musicians (often non technical) to start using MUGIC by making documentation easier to understand?
how might we...
make it easy for users to understand what MUGIC is and how to purchase one?
conducting user research
“I find it academic and not… phrased in the thought of a designer or marketer. I know Mari made that website on her own.. her intent is care for her users but…I don’t think it’s systematic, organized, complete enough to where a new user can function with it easily…And for me an old user, sometimes I have to read it 3-4 times to find out what I’m looking for”
Todd Reynolds
American Violinist, Composer & Technologist
Looking at the previous design
Confusing information hierarchy, users weren’t quite sure where to start
solutions
Initial Proposed Solution
Using the insights I received from interviews with the business owner, users, and tons of competitive analysis, I designed developed a Webflow site using Website Conversion Funnel principles to increase sales.
Some of the major design decisions that I made here were:
Rebranding with orange as primary color to evoke creativity and energy (aligned with MUGIC's mission)
Rewriting copy to focus on benefits > buzzwords (e.g. replaced “explode with creativity” with “12-input, wireless MIDI controller compatible with...”)
Reducing documentation hub page count from 5 → 2 core flows and created numbered steps, embedded video tutorials, and sidebar for easier navigation
Home Page
see live the websiteDocumentation Page
iterating and redirecting our efforts
Unfortunately, Webflow’s E-Commerce was not enough for our needs...
Rather than linking our Webflow site to our Etsy store, we pivoted to to Shopify to scale and provide global fulfillment with our manufacturer.
Identified loss of 10–15% of revenue per unit on Etsy due to platform fees
Made case to founder to build long-term customer loyalty on Shopify
Result: Full migration and ownership of customer experience
refining our conversion funnel
Shopify Solution
see live the website
Constraints, challenges, and iterations
While Shopify had an amazing backend for order fulfillment, its design capabilities were lacking. I struggled to transfer my designs from Webflow to Shopify, and tools like Smootify and the Shopify buy button were cumbersome, requiring three separate subscriptions to function.
I encountered challenges learning Liquid (Shopify's development language) which heavily increased development time. Time I did not have due to the impending launch of our newly revised product, MUGIC 2.0.
Simply copying existing documentation felt inadequate; I believed we could enhance the documentation portal for better clarity. Instead of a traditional user guide, I aimed to create an intuitive Information Architecture that allows users to easily find the information they need.
Developing Faster Documentation with GitBook
2 main flows and easy to understand navigation
To reduce cognitive load for users, I split the two main flows for the documentation to align with the information that users want when they visit the site: (1) Get Started on their first project and (2) to understand more about their product.
Numbered, step by step instructions
Each step of the documentation process is numbered so users understand what to do next. Downloads, dependencies and instruction videos are embedded together for contextualized documentation that's easy to find and use.
Bespoke illustrations to decrease cognitive load
I created vector illustrations throughout the documentation to reduce user cognitive load. Rather than reading dense text, users can see key screens/ flows and where to go next.
Command F the entire documentation portal
If users can't find what they're looking for in the navigation, they can use the search bar look for key terms throughout the site.
impact
Succeeded in helping users onboard,
set up their device, and start making music
50%
decrease in tech support calls after launch.
from discussing with CEO & time spent on calls
108%
increase in sales after first month of launch.
from comparing backend Shopify data with Etsy
100%
of all users preferred redesigned site.
from usability testing with new site
reflections
Embrace learning new things
Working directly with Mari, our lead software engineer, and our customers, has taught me how to translate a vision into a clear, user centered solution while balancing business goals. Along the way, I've had to embrace continuous learning, teaching myself tools like Webflow, Shopify, Liquid, and Javascript to bring those ideas to life. I've also had to learn to adapt quickly and wear many different hats. For example, aside from redesigning the site, I've also had to conduct patent research, shoot product photography, and analyze conversions strategies that support business growth.
These experiences have shaped me into a versatile designer who’s comfortable stepping outside my comfort zone to solve complex problems and deliver real impact!