PROJECT OVERVIEW
Client: California Dragon Boat Association (CDBA)
Roles: User Experience Designer, Visual Designer
Tools: Sketch (Wireframe), Invision (High-Fidelity Prototype),
Dragon boating is a team sport in its purest form that encompasses the elements of power, speed, synchronization and endurance. Competitive paddlers train rigorously and paddle in perfect synchronization, providing an impressive and exciting event for its spectators
The Challenge
The California Dragon Boat Association (CDBA) needs a design for a mobile app meant to help dragon boat spectators gain a better understanding about the sport, follow the action, keep up with different teams, and discover upcoming races in the area.
The Solution
To provide a way for spectators to learn, understand, and engage with the sport of dragon boat, making it more popular.
KEY INSIGHTS
From my research with the customer interviews, I was able to identify the spectators’ needs, wants, and goals, as well as their paint points while they are spectating a dragon boat race.
Spectator Goals
1) ALL attends a race to support a friend or family member who was competing.
2) ALL attends a race to enjoy the race day festivities while cheering on the teams.
Spectators Pains
1) Not knowing the teams competing
2) Unfamiliar with the rules and terminology used during races
3) Unable to stay until the end of the race to find out results
4) Difficult to find parking
5) Being unprepared for the weather and race day.
PROTOTYPE
DESIGN PROCESS
With my interviews, I gathered quite a lot of similar insights and to help me get a clearer picture and organize on those similarities, I created an affinity map to help me categorize the user’s goals, wants, and pains. This really helped me focus on the problems I will need to solve in order to improve the spectators’ experiences.
AFFINiTY MAP
Based off my research from my interviews and project goals, I was able to prioritize which features that I would want to incorporate and implement into my design that can help eliminate some of the pains spectators were facing during a dragon boat race.
FEATURE ROADMAP
With the interview findings, I created my persona, Sam, whose goal is to have fun cheering for the team he’s supporting. He also wants to know who the other teams out there competing are and feels that having a program book in hand will be helpful. Sam had also expressed some frustrations with the weather as he is not prepared for the heat and because of that, he’s unable to stay until the end to find out if the team he’s supporting had won or not.
PERSONA
To map out the screens that I will need to design, I created a site map for the app that can help me prioritize the screens that I will be creating.
INFORMATION ARCHITECTURE
With the app map as my guide, I was able to sketch out how I want each screen to look and interact as users are navigating across each screen. From my sketches, I digitized them, thinking more about the details, such as shapes and designs, that I would like to incorporate onto each screens with the goal of making it fun and unique for the user.
WIREFRAMES
App Logo and Branding
In order to began designing the logo of the app, I thought about how I want the branding of the app should feel which are: “Fresh & Modern”, “Fun for all ages”, “Fierce & Competitive”, and “Cool & Trendy”. I sketched out some ideas that aligns with the brand message and finalized the logo that I felt best describes what “dragon boat” is, so even someone who is not aware of the sport can see that it is a “dragon boat”. I also decided on the different variation of the color blue as it signifies water, which aligns with dragon boat being a water sport.
Once my app icon was finalized, I was able to fill in my mid fidelity wireframes with some UI Design that I have envisioned for the app creating a more high fidelity wireframe to use for my prototype mock ups.
With the color palette and fonts that I have used on my UI designs, I’ve then compiled all the other elements that was used to create this UI Kit as a resource to handoff to the rest of the team.
UI KIT
OUTCOME
With my clickable prototype, I conducted some usability testing with 3 participants, all who had attended a dragon boat race, to further test and gain more accurate feedbacks. My method is to conduct some contextual inquiry and observe the users’ behaviors and they complete my tasks.
Usability Test Findings Summary
1 testings was done in person while 2 were done remotely as I took notes of my observations as the users complete their tasks with given scenarios. Through the usability test findings, I was able to learn of the successes and frustrations users had when navigating through my prototype.
NEXT Iterations
Re-iterate and modify UI prototype based on participants’ feedbacks and suggestions
Repeat usability testing to see of my solutions were effective and to see if any new issues arises before re-iterating again.
Testing Responsiveness across different mobile devices to ensure responsiveness.
FINAL THOUGHTS
This project was a great learning experience for me to design an end to end application for such a niche market that I am deeply involved in. As a competitive paddler myself for many years, I’ve never actually thought about the spectators’ perspectives while attending a dragon boat race, how they feel, and what their experiences are like until now. As I start to empathize with these spectators, I was empowered to design a solution to help user’s reach their goals and to eliminate any of their frustrations and pains making their experience even better. I hope that I have accomplished my design objective of making this app fun and informational so that everyone will enjoy dragon boat as much as I do.