Background
This project was one of the projects I worked on as a designer for Commit the Change, an organization at UC Irvine dedicated to creating software for nonprofit organizations. Commit the Change (CTC) makes purposeful products, with a team of designers and developers to bring each one to life.
In this project, we worked with Child Creativity Lab, a local Orange County nonprofit that uses hands-on techniques to foster interest for STEAM in children. This includes workshops, outreach programs, and classes where students can learn and develop their creativity.
The Problem
COVID has led Child Creativity Lab to shut down their in-person events. They’re hoping to bring their activities to the convenience of families’ homes by selling educational kits that can replicate the experience of their workshops. These kits would come with instructions and an accompanying custom video that offers a short lesson on the topic.
Child Creativity Lab wants these videos to be accessible only to those who purchase their kits. Customers should be able to watch these videos for a limited period of time as a part of the kit experience. They have asked us to create a platform to host these videos that meets these requirements.
Our Solution
We developed a video platform where the videos can be uploaded and managed by Child Creativity Lab admin. Admins can generate codes for each video that offer a limited amount of time for a customer to watch the video.
Customers then receive the codes in their educational kits, input the code on the platform and access the videos.
Role: 1 of 4 UI/UX designers
Team: 4 designers, 10 developers
Duration: February 2021 — June 2021 (~4 months)
End Product: https://cclvideos.netlify.app/
Process
Elicitation & Ideation
Prior to creating the design, we had an elicitation meeting with admin from Child Creativity Lab to discuss the context and requirements of the project. The admins made it clear that keeping the videos secure and non-distributable was a high priority.
We brainstormed solutions by considering the needs of the admin and the users, and the features necessary to achieve their goals. It was also important to differentiate between vital and nice-to-have features, and consider what features we did not want. Research was also important in figuring out how to design for the users viewing the videos: parents and children.
Initial Sketches & Lo-fi
Starting with the admin view, each member of the design team created sketches of the potential design. We turned these into low fidelity wireframes on Figma to get a better idea of how they would look, and through discussion, we combined useful features from each of our designs. This process allowed us to practice iterative design as we were constantly testing and showcasing each of our ideas at every step of the process.
Polishing It Up
After combining our ideas, we worked with a style guide and Shards modal designs to continue improving our design. Our design team continued to be critical of the features included and remained open to new ideas along the way, revising for the most seamless and practical user experience. Then, to get a better idea of the final product, we prototyped our design on Figma.
For the customer-facing view, it was imperative that we knew the design was effective, so we used Maze for quick user testing. We tested the code input/video unlocking use cases to ensure that the users could achieve what they needed.
Final Product
What I Learned
Work closely with your stakeholders
This project gave me first hand experience with communicating with clients. Learning more about what the clients want out of the application made the scope more clear to us. Additionally, clients don’t always know exactly what they want, so knowing what they don’t know also helped us address what gaps we needed to fill.
Working closely with stakeholders also meant constant communication with the dev team. Dev team members frequently attended our design meetings to give input and update on the progress (as both teams worked simultaneously). As they built the site and tested the features, they often had good ideas on improvement as well.
Design iteratively
The design process does not have to be linear. Throughout this whole process, we were constantly coming up with new tweaks and reimagining the layout. Being able to quickly make wireframes and entertain the possibility of new ideas ensured we were constantly improving our design and testing every possible avenue for the best end result.
Be critical of every design decision
As designers, we questioned every feature that went on the end product. Some features seemed like a good idea in theory, but they ended up being unnecessary. Being skeptical allowed us to create a product that had meaningful, straightforward features without any additional clutter.
This case study is meant to highlight my growth working on the CTC x CCL design team! Shoutout to Commit the Change @ UCI for fostering my design interests and being an amazing organization.
