Codeyssey

A SaaS platform for children to learn coding skills
A SaaS platform for children to learn coding skills

Role

Lead Product Designer

Industry

SaaS education & coding

Duration

6 months

Introduction: a structured learning platform

Codeyssey, a company dedicated to providing education for children, faced the challenge of redesigning their platform to enhance user understanding and create a cleaner, more intuitive interface. In this case study, I explore the process and solutions developed to meet these objectives, ensuring a more effective and engaging learning experience for young users.

An intriguing start

The team at Codeyssey approached us with a clear challenge. While they were providing quality content for a well-defined and niche audience, their subscription numbers were not as high as they had hoped. As we began analyzing the initial version of their e-commerce platform, we were intrigued by the reasons behind this issue. Therefore, I proposed a four-stage design investigation aimed at delivering value to the customer while addressing the business needs.


Introduction: a structured learning platform

Codeyssey, a company dedicated to providing education for children, faced the challenge of redesigning their platform to enhance user understanding and create a cleaner, more intuitive interface. In this case study, I explore the process and solutions developed to meet these objectives, ensuring a more effective and engaging learning experience for young users.

An intriguing start

The team at Codeyssey approached us with a clear challenge. While they were providing quality content for a well-defined and niche audience, their subscription numbers were not as high as they had hoped. As we began analyzing the initial version of their e-commerce platform, we were intrigued by the reasons behind this issue. Therefore, I proposed a four-stage design investigation aimed at delivering value to the customer while addressing the business needs.


Stage 1. Preliminary research

As stated at the project kick-off, Codeyssey had a great platform with clever content and thorough market research. As with any good UX project, we began with primary and secondary research using basic tools, focusing on:

  • User interviews

  • Surveys and questionnaires

  • Heuristic analysis

  • User feedback and reviews


Using these tools, we made several important discoveries. From the research, we developed user personas and identified that one of the main reasons the platform was not attracting as many subscriptions was due to communication issues and low scores on heuristic evaluations.

Stage 1. Preliminary research

As stated at the project kick-off, Codeyssey had a great platform with clever content and thorough market research. As with any good UX project, we began with primary and secondary research using basic tools, focusing on:

  • User interviews

  • Surveys and questionnaires

  • Heuristic analysis

  • User feedback and reviews


Using these tools, we made several important discoveries. From the research, we developed user personas and identified that one of the main reasons the platform was not attracting as many subscriptions was due to communication issues and low scores on heuristic evaluations.

Stage 2. Consecutive research

Continuing with the second phase of the research, I proposed new tools to gain deeper insights into our newly identified user personas, aiming to determine if Codeyssey was effectively communicating with their target audience. The information obtained from the first research round allowed me to hypothesize about the results. With this in mind, I implemented the following tools:

  • Card sorting

  • In-depth benchmarking

  • Information architecture

  • Usability tests

  • Live testing


These new studies revealed that the platform, as hypothesized, had a communication problem, addressing only one of their two user personas. With this information, we could proceed to the next phase: the early design.

Stage 3. Wireframing and early design

Using all the acquired information, I developed an initial communication strategy for the brand to effectively engage both user personas and create a cohesive new platform. This involved implementing new user flows and decision paths, resulting in a redesigned website that amplifies Codeyssey's potential. At this stage, I utilized the following techniques:

  • User flow optimization

  • Wireframing

  • Design system creation


With these tools, I created a first draft of the platform, which I presented to the client and received a very positive response. The new design resolved some of the challenging user flow issues, allowing us to proceed with the full implementation of the new design system.

Stage 3. Wireframing and early design

Using all the acquired information, I developed an initial communication strategy for the brand to effectively engage both user personas and create a cohesive new platform. This involved implementing new user flows and decision paths, resulting in a redesigned website that amplifies Codeyssey's potential. At this stage, I utilized the following techniques:

  • User flow optimization

  • Wireframing

  • Design system creation


With these tools, I created a first draft of the platform, which I presented to the client and received a very positive response. The new design resolved some of the challenging user flow issues, allowing us to proceed with the full implementation of the new design system.

Stage 4. Design system and UX/UI Conclusion

With the client's feedback, we decided to draw further inspiration from major players in the education SaaS industry and refined the initial designs. We implemented a cleaner look, focusing more on the "parent user persona" to better assist families in providing technology education at an affordable price and from the comfort of their homes.

The client was very pleased with the final result and decided to further develop the platform, continuing their support for students and creating more courses.

Stage 4. Design system and UX/UI Conclusion

With the client's feedback, we decided to draw further inspiration from major players in the education SaaS industry and refined the initial designs. We implemented a cleaner look, focusing more on the "parent user persona" to better assist families in providing technology education at an affordable price and from the comfort of their homes.

The client was very pleased with the final result and decided to further develop the platform, continuing their support for students and creating more courses.

Final delivery

Codeyssey saw an increase in new subscriptions and a clearer purchasing path for their various courses, effectively boosting subscriptions and course enrollments by 30%. In the end, we successfully delivered:

  • A design system

  • 10+ responsive pages

  • A functional e-commerce design for the SaaS business

  • A comprehensive product design project incorporating UX research methods and UI implementation

Final delivery

Codeyssey saw an increase in new subscriptions and a clearer purchasing path for their various courses, effectively boosting subscriptions and course enrollments by 30%. In the end, we successfully delivered:

  • A design system

  • 10+ responsive pages

  • A functional e-commerce design for the SaaS business

  • A comprehensive product design project incorporating UX research methods and UI implementation

Other projects

Copyright 2024 Ivar Arriola

Copyright 2024 Ivar Arriola

Copyright 2024 Ivar Arriola