A personalised tutoring experience and collaborative, online learning platform for students in Years 2-12, across Maths, English and Chemistry.
Cluey Learning delivers a personalised tutoring experience for students in Years 2-12, across Maths, English and Chemistry.
I was lucky enough to be one of the first hires on the product team at Cluey. As the sole product designer, I work with a small and agile product team. In addition to a CPO and CTO, the makeup of our team is me, a product manager, two software engineers, and two QA engineers.
When I started working at Cluey we didn’t have a product yet. We had a concept and rough vision in mind, and during the first couple of months, we all worked closely together to solidify and bring to life the idea.
During this time I used design as a facilitation tool to help articulate the product vision so we could have deeper, meaningful conversations that helped us to iterate our way to fully conceptualizing the idea.
✓ Articulating the features and functionality
✓ Refining the idea
✓ High-fidelity design
✓ Visual design
✓ Development and launch
Articulating the features and functionality
As a group, we discussed some of the features and functionality that would exist in the future learning platform that we were to build. In the beginning stages, we had many conversations around what the product might be and exchanged so much information. I used straightforward design, and documentation to visualize the functionality we talked about as well as a product concept. This concept empowered the group to have more meaningful discussions and debates.
Using a simple design concept, I placed features and functionality into a mock user interface; while not intended to be a proposed layout, the team was able to have better discussions by seeing a visual.
↓ Below: A simple illustration of the features and functionality and design concept
Refining the idea
We spent the next several weeks refining our idea through design and mock testing. We mock tested using third-party platforms that allowed us to simulate two-party, online collaborative learning scenarios. During this time, I continued to focus on how the product might function while presenting the team with some initial options around how the different features might be grouped and organized using an approach I call “designing the workspace first.” (Read about this approach here).
The “workspace” is the container of application, and before settling on one approach, I like to explore a handful of different workspace layouts.
I created simple blueprint wireframes of different workspace options that we used for discussion and debate. These visuals allowed us to see and work with something tangible quickly and before getting too deep into the design process.
↓ Below: blueprint wireframes illustrating different workspace layouts.
By this time, we had done a lot of mock testing; we were “eating our own dog food” for weeks and, throughout the process, tested many of our hypotheses and assumptions. We had enough information to make confident product decisions, and it was time to design the product.
The previous step of designing workspace options allowed us to pick a direction and move into high-fidelity design, where the rubber really meets the road!
Using high-fidelity blueprint wireframes, I designed enough screens to show a full product experience. Using these screens, I put together a prototype to illustrate interactions with different components.
↓ Below: high-fidelity blueprint wireframes illustrating the product design.
Having been able to create a clear product design experience through high-fidelity wireframe design and prototyping, I moved onto visually designing the product. At the time, we had no formal branding, but orange was a primary color, and it became the main color used in the platform design.
Our customers vary in age from grades three through 12. We did not have the luxury of designing customizations into the platform for different age groups. Therefore the emphasis was creating a product experience that would be suitable across age groups — a product experience that could be understood by all.
↓ Below: The first visual design of the product.
A year later, we took our product learnings from being in the market and observing customer behavior. I redesigned the product to increase usability and improve visual aesthetics.
Development and launch
Once the main visual design was complete, we started development. During this time, the completion of the product design and the development of the product ran on two simulataneous tracks. I worked closely with our development team to build and implement the user interface while also completing the rest of the product design experience, flows and interactions. After 4-5 months of intense development and design, we launched the intial version of our product in April of 2018!