UX Case Study — Serious Fun After School Responsive Website Redesign
Product: Mobile responsive website for Serious Fun After School, a non-profit after school care program for children in Title 1 schools
My Role: UX Researcher, UX Designer, Visual Designer
UX Team: Myself, Anne Porter, Andrew Steiner, and Edward Enrique
Dev Team: Mohammed Abubakar, Oswaldo Almazo, Asher Shaheen, and Yan Zhuk
Duration: 4 Weeks
Serious Fun After School was started by Sylvia Sweell Ramsaywak after she discovered that her children’s own after-school program offered little more than babysitting and crafts. After starting with one location in the NYC area in 2010, the Serious Fun now operates in seven Title 1 schools and continues to grow. After doing some rebranding, Serious Fun decided it was time to update their website in order to keep up with their growth.
Serious Fun After School hired myself and 3 others to redesign the company’s, as well as a team of 4 developers to complete the project. A few of our teams considerations included the multiple 3rd party websites the company currently uses for registration and scheduling, the differentiation that makes Serious Fun standout from its competitors, and that current parents with children enrolled do not use the website as much as the company would hope to find information.
Research — Exploration
The UX design team jumped right into this project with research that included client research, competitor research, and contextual inquiry. First, our team discovered the goals of this project, current user challenges, and business needs through client research and stakeholder interviews. A few of the takeaways from the four stakeholder interviews included that the Serious Fun staff spends a lot of time fielding questions from parents about things that are on the website and that the staff does not feel like the current website reflects who Serious Fun is as an organization. The staff hopes that the website will be the first source for information but understand with the current website as to why the parents call or email first. We also collected a few strong quotes from the stakeholder interviews that helped guide us through our research.
A name like Serious Fun sets expectation for the website very high.
The biggest things for me is making a site that is visually interesting for people to look at that represents our families and children, who they are and what they are doing, and for it to be more user friendly for people to find the information they are looking for.
They [parents] don’t have time and they need it to be inherently easy, especially when it comes to their child.
Next, to our surprise, there are many more after school care competitors than we expected. During competitor research, our team conducted a market analysis, feature analysis, element analysis, and competitive matrix. One of the most interesting findings during competitor research is that Serious Fun After School is the only organization that remains a lower cost specialty care provider with only private funding. The other privately funded organizations generally were higher in cost. We also found through the feature analysis that valuable information is plentiful on the current Serious Fun website, but there is room for additional features that could potentially engage users more.
One of the most valuable research days for our team was the day we actually got to visit one of the Serious Fun After School locations and perform contextual inquiry. The program director, Jessica Randell, escorted us through one of seven program sites, PS 166 in Queens. We observed snack time, homework help, and a variety of classes including piano, violin, beat boxing, and breakdancing. This visit allowed us to experience first hand what differentiates Serious Fun apart from its competitors, including:
- A safe environment
- Student diversity
- Engaging teachers & enriching classes
After the initial research, we conducted usability testing on the Serious Fun After School website as it exists currently. This allowed us to point out the usability and utility problems that may already exist within the website. We tested the current site on 5 users total (2 female and 3 male). Some of the findings we had from these usability tests include:
Utility
- 5 of 5 want to know more relevant information on classes like location and pricing
- 4 of 5 are overwhelmed by information on the website and I need it to be laid out more clearly
Usability
- 5 of 5 confused booking an appointment with registering because the website is unclear in telling them how to register and if they are registered
- 5 of 5 are confused about the pricing and what it includes.
Finally, while all of this initial research was occurring, we sent out a screener survey to begin recruiting candidates for user interviews. We sent our two separate screener surveys, one for current Serious Fun parents and one for potential consumers, and we received a total of 13 responses. From these responses, we conducted 6 user interviews. We chose to interview all females because during the usability tests on the current website, all 3 males mentioned how their wife typically makes the ultimate decision when it comes to child care.
Synthesis — Compilation
The next phase that we entered was synthesizing all of the rich qualitative data we collected through the user interviews. We started with affinity mapping by using likes, dislikes, behaviors, and quotes from the current and potential users that we spoke with.
Using the rich qualitative data and affinity mapping, we created the following “I” statements which helped us to embody and empathize with the user. The statements in blue helped to guide us during the ideation and design phases.
After finding out the above about our users, we then created our primary and secondary personas. We found from our stakeholder interviews as well as from speaking to the users themselves that Serious Fun parents are a diverse set of families that don’t all speak English as a first language. We found that these families came from a variety of backgrounds, both culturally and financially. Theia is our primary persona and existing Serious Fun parent, and Kristen is our secondary persona and potential Serious Fun parent.
After synthesizing all of the data from the research phase and keeping our two personas in mind, we defined the following problem statement:
Serious Fun is a reputable and engaging after school program for Pre-K through 5th grade students, but there are communication barriers causing parents to depend on staff as their main resource for information. How might we make the Serious Fun website a reliable resource that provides clarity on program details and a seamless registration process?
Ideate + Design — Conception
Next, our team took all of our research into the design phase. We started with multiple rounds of design studio as a team which also included the development team. This was a great experience overall and was an opportunity to catch the dev team up-to-speed on all of the research findings, as well as to gain insight on some of their ideas for the website after also having a few meetings with the client.
After three rounds of design studio, we synthesized the dozens of ideas and prioritized them using a MoSCow feature prioritization map. We also came up with a short list of specified goals for the platform and the features that would correspond with these.
User Goals
- Users need to understand the registration process before they even begin
- Users will use multiple channels of communication when it is provided to them
- Users needing up-to-date calendar and accurate information
Features
- Add a very clear and visual steps on how the registration process works from beginning to end
- Give more information about who the contact is and how to reach them (direct email button)
- Add functional calendar and announcement boxes on homepage and locations page
Next, we created a new site map to structure the design of the new website. From the initial stages of the project, we noticed that the current site map is wide and shallow. This structure prevents users from exploring the website and connecting pieces of it together. The structure of the new website design is much more dynamic and interconnected.
Next, we created task flows based on the task and scenarios used in the usability testing on the current website. We also did several rounds of hand sketches as a group to align all of our ideas for page layout before jumping into the digital creation of wireframes.
Usability + Usefulness
After finishing the digital creation of wireframes in Sketch and linking the first prototype in Invision, we began usability testing. In total, we conducted two rounds of usability tests with 10 users total — 5 users in each round. Overall throughout all four rounds of usability tests, some of the major findings on utility and usability included:
Utility
- 5 of 5 need to know more relevant information on classes like location and pricing
- 4 of 5 don’t find the calendar informative or engaging enough
- 2 of 5 want to be able to filter information by location
Usability
- 5 of 5 are confused about the pricing and what it includes
- 4 of 5 need to be able to find the information quicker
- 3 of 5 are confused by the booking process and why they need to do it
Findings + Iteration
These usability tests led to a creation of three different prototypes, each with continued improvements based on the prior usability test. Our iterations were mainly focused on the design not being so text heavy by including more photos and diagrams and the user understanding the registration and enrollment process. We also wanted to provide specific landing pages for each individual program location. We found a lot of success by including a “register” button at the top of each of the program location pages as well.
Unfortunately due to technical constraints, we were unable to include the registration into the website using an API, so we had to keep this process on a third party website. We did find improvement on this process by leading the user directly to the login/create account page rather than the third party website landing page.
During the usability tests we kept track of a few KPIs, including the average time and completion rate to register for Serious Fun and the completion rate to find classes by location. Our coal was to raise the completion rate for both of these tasks to 100% in comparison to the 0% and 80% completion rate, respectively, on the current site. Another goal was to decrease the average time spent to register which were were able to successfully do by 4 minutes and 2 seconds.
To view the Serious Fun desktop prototype, click here.
To view the Serious Fun mobile prototype, click here.
Conclusion + Next Steps
Upon the completion of this project, our team was extremely excited to handoff the designs using Zeplin for the dev team to get to work. While we were able to successfully redesign a responsive website for Serious Fun, we have future recommendations such as integrating all third party functions — including registration, donation form, and newsletter signup — into their own website and incorporating the Google Translate API to make their website multi-lingual.
We also suggest taking the following next steps to move forward with this project:
- Conduct usability testing on the final prototype to test added features and new navigation
- Setup a Google account to track SEO and metrics and find out what devices users primarily use to access the Serious Fun website
- Conduct usability testing on third party, ASAP Connect, and design a registration process to embed into new website
- Integrate the donation form and newsletter signup into website
Overall, working with this client on a responsive website redesign was extremely eye opening into an industry that I have experience with in the physical space but did not have prior experience within the digital space. It was interesting to have to consider the needs of current Serious Fun parents verse the potential Serious Fun parents which were both ultimately based in trust and what is best for their children.
