Research was something that I wanted to do for sometime now. My only knowledge about user research was from User Research 101 Youtube videos and few articles on internet. This course gave me a perfect opportunity to start off with User Research. Methodologies followed here are straight out of the course and I am positive I will be using them in my future projects.
Overview
Lil’ Dancers is a dance camp for kids aged between 4–13.
A website for Lil’ Dancers has been designed to give parents/guardians exhaustive information about the dance camp along with online enrollment facility.
Problem statement
Lil’ Dancers is falling behind in the digital space with poor branding and all their enrollments are offline. Most of the customers’ queries are answered either over the phone or in their social media DMs .
User Research
Survey
I sent out a short survey to all the parents I knew on my contact list. Some of the key questions I asked were :
- If you’re considering one of the camps to enroll your kid in, what kind of content would you look into most likely?
- Any website/app that you have used previously to get your child enrolled into something and you had a positive/negative impact out of it? Please mention
and to know a little more about them, I asked a few demographic based questions like :
- Let’s say we’re in pre-pandemic times…What do you like to do during your commute?
- How would you rate your online activity?
The survey contained a mix of open ended questions and multiple choice ones to get the best answers.
Personas
Based on the insights of the survey, I created two personas — Mother and Father(duh!) and since the dance camp was for kids aged 4–13, a majority of the dads and moms were in their 30s.
Creating personas made so much more sense after user research. Everything from demographics to their bio and goals were based out of it.
Almost everything from now was a transaction on these personas and the end product was for them.
Combining the problem statement and insights from my survey gave me information on the difficulties they’d encounter if they were to enroll their little one/s into a dance camp and that’s how I started story-boarding.
Storyboard
Thanks to some illustrations I found online, I could beautifully depict the discovered issues which my design had to solve
Competitor Analysis
SWCDUXO (pronounced Swissiduckso) is short for Strength, Weakness, Content, Design, UX, Opportunity. This was probably the best thing I picked up on the course and an analysis on each of these parameters is unparalleled I believe.
Although the process was time consuming, the amount of features, content usage and many more derivations from it were worth it. I did this analysis on two direct and indirect competitors each. You can find the detailed documentation here.
Sitemap
Core user needs
- Lack of fee information
Probably the most important part, but this is often not disclosed which makes the user reach out to inquire and hence delaying the enrollment. - Kids’ safety
Although it’s a given that kids will be in safe environments, a reassurance from the dance camp is essential. - Trainer information
Reviews and ratings with the trainers themselves is the nail on the coffin when it comes to trust.
Equipped with all these, I now had a starting point for my design. To clearly map out how the website had to be structured, I used Coggle — an amazing online mind mapping tool. Below is the Sitemap that I came up with.
My entire user research process can be viewed in a presentation deck on my Linkedin.
User Interface
Colors, Logo and Branding
Kids are playful and full of energy. Lil’ Dancers was going to channel that energy into dance.
Orange was THE color for this. I chose 2 variants of it and a couple more colors like 101E26 for text, 8C2703 to compliment the text color along.
I am not into logo making and coming up with one for this was no easy either. My Illustrator skills came to my rescue to bring to life the logo sketches I had made. This sure did take a lot of time because I ended up with a lot of logos. But in the end, I chose a simple one keeping in mind the branding and how common the variants of other logos were when it came to dance. I also did not want the logo to be just an outline but have a couple of colors from the palette I had zeroed in on. ‘LD’ could easily do it with gradients
Branding is not really my forte and I dont plan on making it one. Artboard Studio’s mockups were easy to work with and you can see the output.
Heyy, at least I tried!
Wireframe
I am a strong advocate of pen and paper sketches. I am also a strong advocate of not using a design tool to make grey and white mockups. I mean c’mon, what is the point of those wireframes when you can spend another hour and bring them to life with colors and interaction. Do people even…Let’s keep the ranting for another day in another blog post.
Coming back to my sketches, I did go through a lot of trial and errors (drawing and erasing) and it was at this point that I simultaneously started looking for the right stock images.
Wireframing is not just about coming up with boxes and lorem ipsum texts. I put on my UX Writer hat and came up with most of the catchy phrases, button texts, error messages and other content to draw my plan around it.
Hi-Fidelity Design
When I analyzed some of the competitor’s website, they had it made quite child-like with confetti thrown all around with a dash of colors. The dance camp was for kids but website was for parents. I knew I had to design for parents but it had to be vibrant and lively enough to portray that the camp was for kids.
From my research I found that most of the parents when looking for a dance camp used their phones over laptop/desktops. I took the mobile first approach for my design as well.
The tricky thing about this is that I had to keep in mind how the same design looks on a 15'’ inch screen. I did not want to completely move away from the mobile design and have a different look and feel to the desktop version of the website.
Let me tell you a story…a couple looking for a dance camp for their 7 year old land on Lil’ Dancers website in their office hours. After reaching home they discuss about enrolling their kid in it and speak about some of the key points observed. Now, the dad visited the website on his phone during the lunch hour and the mom on her office laptop. At no point in their conversation should they speak about the device through which they accessed the website. If they did, I failed. The availability of information and user experience had to be ditto. Of-course I had to make small tweaks here and there to make it responsive.
Some of the noticeable tweaks are that of the dance forms. It is right under the nav-bar in desktop whereas in phone, it is completely taken under the Menu section on the top right corner of the screen. An overlay displays all the dance forms and the nav-bar options.
I chose the one page website design for this and decided to convey information in a sequence :-
- A catchy phrase/title and a hero image to imprint the brand image in the user’s brain.
- Pictures from the dance camp itself to depict the kind of environment the kids will be in.
- A section for awards and recognition to solidify the user’s trust in the camp.
- Reviews from parents talking about their and their kid’s experience.
Except for the Enroll button on the top/landing page, never did I make an attempt to get their kids enrolled. All of the above 4 sections were purely for pitching.
Now, when the user has enough information about the camp, the persuading begins. I show them the address and phone numbers of our camps located across the city, FAQ section to get the answers for the most common questions regarding safety, pricing, instructions — having them categorized decreases the cognitive load on the users when it comes to searching for questions was my thinking.
Pricing — I don't know why, but most businesses refrain from showing the pricing information upfront. This was a concern raised by one of the research participants. They had to scramble around the website to find it somewhere hidden or was not present at all. They were forced to make a call or write an email.
Pricing was the final section of the landing page and the reason for this being — to justify the price quoted. The user after scrolling through the entire page has an idea of Lil’ Dancers. The most important thing about pricing is also placing the Enroll/Buy/Step In button at the appropriate place. I displayed all the dance forms and their respective prices in cards.
On click of the button the users will be navigated to the checkout page with the dance form chosen previously defaulted. But they do have the option to change here as well.
Another deign principle that I follow is to design every single page of the website and not just the main screens like landing page, checkout screen, dance form page.
There are other smaller flows like Privacy Policy, Terms of Use, Careers page, 404 error page — all of them have a place on my design file.
Accessibility
Like user research, accessibility was one domain I had never forayed into. My knowledge was again limited to a few blogs and videos.
Stark — a plugin for accessibility. I have barely scratched the surface with this but it served as the starting point for me.
I selected layers after layers, checked them for contrast standards of AA and AAA set by WCAG. Although not fully accessible, I am happy that a larger audience can view my design.
Key Takeaways
- Talking to users reduces the amount of time taken to make decisions on assumptions.
- Competitor Analysis helps us take the best out of them and not commit the mistake they made.
- Always have the mobile first approach mindset.
- Sitemaps help chalk out a clear plan for design work.
- UX writing skill is as important as visual design skill.
- Take content first approach to design to minimize rework
- Design the website keeping in mind the accessibility standards.
- User Test the prototype and iterate on the feedback.
This might be the end for now, but some day in the future I will return to this pet project as I see that there is scope for a ton of other things. But until then, let me improve on the things mentioned above.
Do check out my Behance presentation of this project and let me know of your thoughts on this case study either through claps or comments.
