my work:
fellowdancer
designing a responsive website to provide professional mentoring for dancers
jan.-june 2021, CareerFoundry
overview…
The Problem.
The field of professional dance entails above-average physical and mental stress.
Dancers all over the world suffer from insufficient support and a lack of adequate, professional advice. This affects employed company dancers as much as freelancers and students in professional programs.
How can we provide a service that enables dancers in need for advice to connect to a professional who can help out in that specific field?
The Goal.
The goal was to create a responsive website that provides a useful, pleasant and engaging user experience to potential customers, addressing their specific, real needs.
My Role.
UX Designer
The Scale.
6-month project as part of the UX Immersion course at CareerFoundry
My Primary Audience.
Professional dancers in various employments
Tools.
Figma, Balsamiq, Adobe XD
1 User Research
Warmup.
1 Competitive Analysis
2 User Personas
3 Task Analysis and User Flows
4 Journey Maps
3 User Testing and Iterating
Choreography.
1 Usability Testing
2 Design Iteration
2 Design
Improvisation.
1 Information Architecture: Sitemap
2 Low-Fi Wireframes
3 Mid-Fi Wireframes
4 High-Fi clickable Prototype
4 Documentation
Cool Down.
1 Creating a Design Language System
2 Next Steps
1 User Research
Warmup.
1|1 User Interviews.
My hypotheses didn’t come out of nowhere. As a professionally trained dancer, I had seen with my own eyes how many there are - eating disorders and mental illnesses were present far more often than average and injuries and performance pressure were causing stress and anxiety in many of my colleagues every-day life.
So when I went into my generative interviews, I already suspected a problem field that was lacking serious solutions...
But never would I have expected to hear how much this lack of support was an issue.
5 dancers of different professions told me stories about their suffering, of being stuck, helplessness, of training with injuries and pain because being weak was looked down on.
This step really caused me to think a lot, and especially made the urgency of my project very clear.
1|2 Competitive Analysis.
Once I had specified the problem in the dance sector that I wanted to attempt to solve, the first important research question wanted to be addressed: Who is already on the market tending to this problem? From my experience and my interviews, it didn’t seem like these services were doing a very good job; even more was I curious to find out what they were doing wrong or what their goals and attempts were.
1|3 User Personas.
From the information I had gathered in my interviews, I created three different user personas. Not only did this step help me compress the large amount of data collected into tangible, relatable characters. My three fictional friends also helped me throughout the further process to keep referring back to my real target audience, and to keep their different professions, life situation and resulting needs in the back of my mind.
1|3 USER PERSONAS
1|4 Task Analysis and User Flows
Now it was time to get into the heads of my fictional friends. What tasks would they want to complete using my app? What would they want to see first, do first, and what would be their main goals? Thinking about these things, I created Task Analyses and User Flow Maps.
1|4 USER FLOW
1|5 User Journey Maps
To round up the user research package, I added User Journey Maps, which meant to think about exactly the emotional state of the user in each part of the process.
1|5 USER JOURNEY MAP
2 Design
Improvisation.
2|1 Information Architecture.
The next step revealed itself to be a lot trickier than expected. I did have a high-level plan about the hierarchy of my pages - but there was more to think about.
At what level is the users personal space placed? Does the user need a separate page for “Account settings” in “Setting”? How should the personal space be accessed: hamburger menu, sidebar menu, tab bar...?
2|1 SITEMAP
2|2 Low-Fidelity Wireframes
Finally, I began sketching out my first ideas for the design of my screens. First, the old school way, whith pen and paper! I ideated on some interfaces and then picked my favorite sketches.
2|2 LOW-FIDELITY WIREFRAMES
2|3 Mid-Fidelity Wireframes
Now it was time to expand my tool-specific skills. My paper sketches wanted to be translated into the digital realm. I had never worked with Balsamiq or Adobe XD before. I learned Balsamiq pretty quickly, but when I started to work with Adobe XD, I would spend hours, and when I looked back, had only created a a couple of assets.
2|3 MID-FIDELITY WIREFRAMES
2|4 High-fidelity Clickable Prototypes
In this phase, the real fun began. By now, I was much more proficient in Adobe XD and could alter my designs quickly and exactly how I wanted. I created animations between screens and made my design come to life in form of a clickable prototype.
Finally I had something that worked similar to the end product! (And something to brag with in front of my friends.)
2|4 HIGH-FIDELITY, CLICKABLE PROTOTYPE
2|4 PROTOTYPING IN ADOBE XD
3 User Testing and Iterating
Choreography.
3 User Testing and Iterating
Choreography.
3|1 USABILITY TEST REPORT
3|1 Usability Testing
Performance time.
Once my prototype was ready to be “on stage”, I prepared for a round of Usability Testing. I wanted to test my prototype for learnability and wanted to hear the participants’ overall impressions.
Quite a lot of steps were involved in preparing, conducting and evaluating the Usability Test Session. Not only did I contact and recruit suitable participants, schedule meetings and calls and send out forms of consent, I also wrote a Usability Test Plan including a script.
After the tests, my head and digital workspace were filled with unsorted information, insights, suggestions and ideas.
Sorting all of those into concise information bundles and sifting out the the most urgent issues at hand was quite a job - but it was worthwhile. Utilizing a technique called “Affinity Mapping”, I finally managed to write out a report listing the most important aspects where fellowdancer’s usability should be improved, and how exactly I planned to alter the design or flow.
3|2 Design Iteration based on User Feedback
In the following weeks, I spent a lot of time iterating. After the Usability Test Iteration, I did several more design iterations; applying Gestalt principles, adding a more contrasting CTA-color, improving accessibility,...
The largest of them was, again, based on user feedback.
This time I sent out my design to colleagues and co-students, asking them for critique. Unlike the usability tests, the users were not given any tasks or asked to answer specific question. However, when I read the feedback, I was astonished at the amount of helpful insights. I implemented almost all of the feedback I received.
I was impressed at how much valuable input people were able to give me who have nothing to do with the project. Some things I would never have thought of, even though fellowdancer was on my mind all the time... Maybe, I thought, that closeness was in fact the obstacle. A painter also has to sometimes take ten steps away from his canvas in order to see the aggregate.
3|2 DESIGN ITERATION BASED ON USER FEEDBACK
4 Documentation
Cool Down.
4|1 Design Language System
One of the final steps in the process was to capture my design language. Not only was this essential for my own reference and overview, and for double-checking and ensuring consistency, but also for easily incorporating potential team members later or handing over my project eventually.
Even in this advanced stage I still encountered and smoothed out some inconsistencies in design.
Seems like a never-ending process? You bet.
4|1 EXTRACT FROM DESIGN LANGUAGE SYSTEM
4|2 Next Steps
I will keep testing and iterating. Next on the schedule is another round of usability testing to expose my improved flow to the audience in form of a high-fidelity, clickable prototype. I think fellowdancer is ready to get in the mix with the “real” audience - dancers. I want to hear their opinions, see their reactions and find out if my product has the potential to cause some pain relief for its customers. This time the tests will have to be conducted on mobile devices so that the experience is as close as possible to the end product.
…retrospective
Next Time Better
The main thing I would do differently next time would be to label all my assets in Adobe XD right from the start and keeping components up to date.
Labelling everything afterwards and categorizing assets for export was time-consuming work that I could have cut short by being more OCD about my documentation and labelling.
fellowdancer’s evolution
fellowdancer evolved from a handful of ugly onboarding sketches to a relatable product, represented by a high-fidelity, clickable prototype, utilizing a pleasant interface with a modern, calm aesthetic, fail-proof navigation through the main screens and a straight-forward information architecture.
The largest part of the process was determined by Usability Testing and iterations.
I very much enjoyed building and iterating the screens and flows. My secret love for categorizing and organizing came in handy when creating a Design System. Throughout the process I enjoyed implementing chunks of improvements every so often. I generally like sifting out what’s valuable and what’s unnecessary.
Working in a field of my expertise and for a cause which I knew to be an urgent one was additionally exciting and motivating.
The tools I used were all new to me, except for Figma; I became familiar with them quite quickly, but I am sure going to be faster next time.
EVOLUTION OF THE EXPERT LIST
EVOLUTION OF THE BOOKING CALENDAR