Roles
UX/UI Designer
User Research
Brand Design
Information Architecture
Duration
65 hours
Tools and Resources
Figma
FigJam
Miro
OVERVIEW
The objectives of this project were to develop a responsive website from scratch for our client, to conduct user research, and to establish a cohesive brand identity.
BACKGROUND
Breaking boundaries
Jasmine Kim is an experienced violinist with over 20 years of playing experience, and she has been facing limitations in her career growth. Recognizing the significance of having an online presence, she approached us to design a dedicated digital platform for her work. Her objectives are to effectively showcase her professionalism and artistry, and to open doors to more performance opportunities.
THE PROCESS
The design process
To identify meaningful solutions for our client, we followed a structured approach consisting of 5 stages.
COMPETITIVE ANALYSIS
Exploring the landscape
We conducted an in-depth analysis of competitors in the violin industry to gain insights from their visuals, features, and user flows. By studying their strengths and weaknesses, we were able to identify key elements to incorporate into our own designs.
USER INTERVIEWS
Tuning in with the audience
Next, we conducted user interviews with 5 participants to better understand their experiences, needs, goals, and challenges related to musician websites. Here are some key insights from our interviews.
USER PERSONA
Composing user insights
Based on the insights, we crafted a detailed user persona to represent our target audience.
IDEATION
Ideating for success
After pinpointing common user challenges and desired outcomes, we formulated a key question to help guide the design process.
HOW MIGHT WE
create a user-friendly platform that not only encourages visitors to explore but also motivates them to book services while also elevating the online presence of the violinist?
INFORMATION ARCHITECTURE
User flows
Using user insights as our guide, we constructed user flows to visualize the structure and navigation of the website.
User Flows
DESIGN
Bringing the vision to life
After building the flows, we began crafting the blueprints for our designs.
Low-Fidelity Wireframes
Our initial set of wireframes were sketched on paper.
Branding and UI
Next, we directed our efforts towards curating the user interface kit. Each visual element was meticulously selected to embody our brand values of warmth and friendliness, and to create an inviting and enjoyable user experience.
UI Kit
High-Fidelity Wireframes
After creating the user interface kit, we developed our high-fidelity mockups. These mockups were used as the foundation for our prototype, which was used for usability testing.
TESTING
Usability testing
Once the prototype was complete, we tested it with five participants. Here are the tasks we asked them to complete.
“You’ve been searching for a violinist for your special event and after browsing the web, you were able to find Jasmine Kim’s website! You’re on her website and you’d like to explore some of her work.”
Can you talk me through the process of finding her work?
Can you talk me through the process of booking Jasmine for your event?
Usability test results
Next we conducted usability testing to validate our design decisions, using the following success metrics.
Task Completion
100% (5/5) of participants were able to complete Task 1 without errors.
100% (5/5) of participants were able to complete Task 2 without errors.
Time to Complete Tasks
80% (4/5) of participants completed Task 1 in less than a minute.
100% (5/5) of participants completed Task 2 in less than a minute.
User Satisfaction
100% (5/5) of participants expressed a liking for aesthetics of the design.
Ease of Use
100% (5/5) of participants expressed that the flows were easy to navigate.
Areas For Improvement
80% (4/5) of participants expressed confusion between the “Contact Me” and “Inquire Now” CTAs.
80% (4/5) of participants expressed that they would like immediate access to video content - on the homepage and the services page.
60% (3/5) of participants expressed the desire to see some placeholder text in the contact form fields.
TESTING
Priority Iterations
Through our usability testing, we were able to identify key areas for improvement.
Revision 1:
To alleviate confusion surrounding both the “Contact Me” and “Inquire Now” CTAs, we replaced them with links bearing different labels.
Revision 2:
In response to user preference for more upfront video content, we substituted the photos on the homepage with relevant videos showcasing the violinist's work.
Revision 3:
In response to user recommendations, we incorporated placeholder text into the contact page form fields.
Revision 1: Modifications to "Contact Me" and "Inquire Now" CTAs
Revision 2: Immediate Access to Video Content
Revision 3: Incorporating placeholder text
The Final Prototypes
Desktop
Mobile
REFLECTION
Key takeaways
Their experiences, preferences, and feedback are what shaped our design approach.
The users are our teachers
Close collaboration with both our client and the users was essential to ensure that the design solutions met the needs and expectations of all parties involved.
Communication is key
With this project, we were challenged to adapt to unexpected situations, to juggle different hats, and to step out of our comfort zones. Beyond honing our skills in design, this project also broadened our understanding of business dynamics and social marketing.
Personal growth
Next steps
We will be integrating updated photos from a recent photoshoot featuring our client. Stay tuned for the refreshed look!
New photo integration
Ready, set, launch!
The next step will be guiding the musician through the process of launching her website. We'll provide her with support every step of the way, making sure that there is a seamless transition to the live site.
Thank you for your interest in the Jasmine Kim responsive web experience!