Case Study — The Cinderella Project
Your story begins here.
Project Summary
The Cinderella Project is a non-profit organization that helps underprivileged youth in their final year of high school reach the milestone of graduation despite adversity. The key to the program’s success is through hosting “Boutique Day”, where students are pampered with a full grad makeover, photos, food, and mentorship. My role was to re-architect the website using UX methodologies. I collaborated with another UX designer and 2 UI Designers.
Timeframe
3 weeks
Client
The Cinderella Project Society
Karem Planas, Marketing Director & Board Member — Committee Chair
Cindy Given, Executive Team — Operations
Task
Redesign the existing website to provide better value for students and potential sponsors.
Platforms
Web (Desktop, Mobile)
Collaborators
UX Designer: Bryan Leung (me)
UX Designer: Lucy Cameron
UI Designer: Elizabeth Anne
UI Designer: Khoa Nguyen
Design Methods & Tools
Comparative Analysis, User Surveys, User Interviews, Experience Journey Map, Content Audit, User Scenarios, Sitemap, Storyboard, User Flows, User Personas, User Stories, Paper Wireframes, Sketch (mid-fidelity wireframes), InVision (prototype)
DEFINE
Introduction
The Cinderella Project is a non-profit charitable organization. The Project was established in 1999 with the mission to break the cycle of poverty in Metro Vancouver by encouraging and celebrating at-risk youth in their pursuit of high school graduation amidst abuse, neglect, poverty and marginalization.
The Opportunity
As the number of Cinderella Project-grads continues to grow, the goal is to remain connected with them by offering valuable resources that can help them as they continue to study, gain skills and/or seek jobs. In order to accomplish this, we would like to continue to grow our scholarship fund, attract contributions/donations/grants that can help offset Boutique Day-related costs and/or directly fund our scholarships.
The Challenge
Due to the need to respect student confidentiality and privacy, securing subjects to interview was a difficult task. Even with the network of contacts through our client, many past students preferred to remain anonymous. Also, the website would need to target three very different audiences — students, sponsors/donors and volunteers. The branding and marketing of the website needs to shift more towards being a ‘merit-based’ award, and the opportunity to become a Cinderella/Cinderfella brings with it a lifelong network of invested community members who want to see honorees succeed. The challenge is to design the site so that the messaging to potential sponsors and financial supporters is balanced, and not to be positioned as a charity.
The following were the goals and requirements as defined by our client:
Project Goals
- Modernize the look of the website
- Increase calls to action
- Increase the ease with which organizations can learn more about how to contribute
- Highlight reasons to give
- Make the website a resource for students
- Make the website mobile-friendly
- House the referral and scholarship form on the website
- Better showcase our supporters
Feature Requirements
Same functionality as current website plus:
- Student-dedicated section with resources
- Online form capabilities that sends the inputs to database or google spreadsheet
- Content Management System that will facilitate keeping it updated
- Linked to our current Google Analytics account
DISCOVER
Research
As this was a website redesign project, we began by collecting data through organizational and domain research to thoroughly understand the existing online presence of The Cinderella Project. There are a surprising number of organizations that run similar projects in helping students graduate across North America. Comparing similar organizations enabled us to understand the kind of messaging being communicated and what kind of users they were targeting. Doing so gave us a starting point in terms of aspects to focus or consider in our design process.
Next, we began user research. Our main goal was to gain a better understanding of just how impactful the entire experience was from a student’s perspective. In doing so, our hope was that we could identify any gaps in their end-to-end experience, and determine where the website could better complement their experience leading up to Boutique Day, graduation, and beyond.
We prepared two sets of survey questions targeting students and potential contributors. Given our timeline of 3 weeks, it was a struggle from the start in securing users to participate in either surveys or interviews. This was primarily due to the sensitive nature of the nominated Cinderella/Cinderfellas, many of whom have a history that they may not feel comfortable sharing. As we were unsuccessful finding former students to interview, we instead relied on the retelling of events from volunteers and Fairy Godmothers/fathers to better understand the life changing experience that Boutique Day offers. Here are some of the key insights we uncovered:
During one of our interviews with a former Cinderella, we asked for her to walk us through the entire process, from before learning about the Cinderella project, up until post-graduation. We organized the data and created an Experience Journey Map to extract further insights.
What we found was an opportunity to improve the student’s experience in two areas. On the one hand, users often expressed confusion and uncertainty when first introduced to the program, unsure of what to expect at Boutique Day.
On the other hand, as we learned from surveys, users were (for the most part) unaware of the Student Resource Kit. It was presented in a non-appealing manner for those that were aware, and thus we chose to focus on integrating the resource kit better.
Planning
It was clear that the website did not target their communication towards students, even though they would be affected the most from its’ messaging. On the other hand though, the success of Boutique Day (and ultimately, The Cinderella Project) depends largely upon contributions from sponsors, donations, and volunteers. Our challenge was to bring out the main communication points that trigger emotions towards the students, while also retaining a connection with the sponsors/donors/volunteers who could then empathize with our messaging, in turn driving the call to action (getting involved/contributing). Using the data from our research, we constructed our primary user persona, Jackie:
There were two main goals we needed to accomplish as we transitioned from our research:
- Increase awareness of the student resource kit, and in turn, create a reason for the user to return to the site
- Educate users on The Cinderella Project, as well as what to expect on Boutique Day
The reason the website wasn’t communicating with the students? It wasn’t speaking their language. Our target audience were primarily 15–16 years of age, in the process of completing their final year of high school.
The issue derived from the way the content of the website was written, structured, and organized. We conducted an inventory content audit to break everything down. From here, we went through each page of their website, and began noting down core sections of content into sticky notes. With the data collected, we sorted them into categories with an affinity diagram. This exercise allowed us to reduce the common denominators from each page, and extract text from sections that may be redundant or duplicated.
The result was the beginning of a more streamlined, information hierarchy. We then converted our affinity diagram categories into section names for the website, while also taking into consideration the addition of the student resource kit and how it would integrate into the site design.
Following the draft of the site map, we began to tackle the information hierarchy within each page. It was effective using a storyboard to craft a narrative — both to help us define the user flow, and also for our client to understand how the changes we were making would impact the current experience. This is how we envisioned Jackie’s key path scenario.
Leveraging the experience journey map we developed earlier along with the storyboard, we focused on the critical touch points where the user may have felt lost or confused, and focused our messaging to hit home from that point. This user flow (below) was created to guide Jackie through her onboarding process as she learns from her counsellor that she has been selected to participate in the project:
Secondary Goal: Become aware of and access the student resource kit
With our user flow determined, we began sketching modular sections on paper to experiment with the flow of content. This method of prototyping served two purposes — visualizing the blueprint for the site, while allowing us to easily manipulate the structure of information laid out on each page, section by section.
During the IA exercise our team performed earlier, we felt that Donations, Volunteer, Fundraising, and Sponsorship all had one element in common; that was, each was simply a form of getting involved and contributing. Thus, we grouped these four separate categories into subcategories, all falling under a main category header, aptly named Get Involved.
This factored into our design as we decided the ideal way to implement this was through a tabbed organization system within the single Get Involved Page, allowing for a more dynamic user experience and guiding the user through the different methods of getting involved.
As we designed for mobile first, we were faced with a challenge. How could we incorporate this tabbed system on the smaller screen sizes that would still make sense for the user? We experimented with a collapsible menu and went to user test whether this felt intuitive. Our users understood the feature but expressed confusion with the sub navigation header.
Our next task, and possibly the most challenging, was to rewrite copy of their website. We were designing for mobile first, and thus it was imperative for us to select the most important keywords and reconstruct the messaging that would make the most sense to our user and help them get value out of the site, all while ensuring the experience worked well on a mobile screen.
We brainstormed ideas on ways to describe The Cinderella Project, brand keywords, main communication points, and derived three versions of possible mission statements. These principles provided a foundation and voice that would persist throughout the rest of the website.
Next, we put together our mid-fidelity wireframes complete with our now revised copy.
DESIGN
Our clients had given us full control over the level of freedom in design. They were not particularly married to their existing designs, which proved to be extremely valuable. This was their existing logo:
The dimensions along with the amount of white space utilized would require very specific placements with regards to where their logo could be positioned on the site layout. Leveraging the branding keywords we surfaced earlier, we took it upon ourselves to come up with a redesign of their logo to match their modernized website look and feel.
Our approach began with a 5 minute time-boxed design sprint. The 4 of us each put our best design onto the table:
Design A: As the Cinderella Project was largely focused on the Boutique Day and what they strive for (helping students graduate) this first design was meant to focus on the graduation aspect. Alternate versions of the logo would utilize a monogram aesthetic integrated into the logo to represent their organization name.
Design B: This approach was a more simplistic, which aimed to represent the ‘magic’ of not only the brands namesake, but also the magical transformation of the students that experience Boutique Day, and how their lives are dramatically changed moving forward.
Design C: This design also focused on the theme of graduation, while retaining a bit of the long-standing history and success if the program, utilizing a circular stamp-like aesthetic to communicate the vintage of the brand.
Our clients ultimately decided to go with Design B, after they took our design suggestions back to their executive board in a rebranding exercise to reevaluate their brand values, steering away from being ‘about the dress’ and more about creating brighter futures for the students.
We incorporated the new logo, revised IA, and rewritten copy into our mid-fidelity wireframes through Sketch.
To optimize our team’s workflow, we split duties to allow us to tackle our mid fidelity wireframes page by page. As I finished the copy on the home page, Lucy worked on the wireframes for the home page. I started the copy content for the next page, and would hand off right as Lucy completed the previous page and began wireframing for the new content that was ready. This allowed us to rapidly deploy a mid-fidelity prototype and go into testing.
Copy revision was completed at a faster pace than the wireframing, so as Lucy continued to design through the mobile screens, I began the desktop wireframes based on the completed wireframes that Lucy had completed.
This design process worked extremely well and allowed us to produce a majority of wireframes required for our MVP and primary user flow during our 3 week time frame. Typeface and High-Fidelity UI-related items for this project was handled by Elizabeth and Khoa.
Prototype
Our finished, high-fidelity prototype can be found here:
https://invis.io/QGF7TAW75#/272123896_0-0_HOME_-_A_-_320x568_
Summary
Following completion of our high-fidelity prototype, we spent roughly two weeks to complete a hand-off to a team of 3 web developers to have the site built out. When we pitched to our client, they were ecstatic to learn that we essentially “cracked the code” across the brand and marketing direction. Despite our best efforts, we struggled to complete all the wireframes for Desktop within the 3 week timeframe, as our focus was on completing all screens for mobile. We also weren’t able to accurately illustrate some animations/interactions in InVision, primarily due to system limitations. Given more time, we would have leveraged multiple prototyping tools.
