Sr. Designer @Tenece
Sr. Designer @Tenece
Codeville
Elevating Codeville's Website Experience
Elevating Codeville's Website Experience
Elevating Codeville's Website Experience
Elevating Codeville's Website Experience
Client
Genesys Tech Hub
Genesys Tech Hub
Platform(s)
website
website
Role
Lead Product Designer
Timeline
Jan - Feb 2022
Link to Project
Visit Live Website
Overview
This case study delves into the transformative journey of revitalizing the Codeville section on the Genesys Tech Hub Website.
This case study delves into the transformative journey of revitalizing the Codeville section on the Genesys Tech Hub Website.
This case study delves into the transformative journey of revitalizing the Codeville section on the Genesys Tech Hub Website.
This case study delves into the transformative journey of revitalizing the Codeville section on the Genesys Tech Hub Website.
Introducing Codeville
Codeville is a one-month STEM summer program where children are introduced to new concepts, assemble and program robots, learn to code while diving into the captivating world of technology.
This program was set up to give children the opportunity to get a head start in today’s world of technology and to ensure that the skills they learn can be expressed in solving their everyday problems, especially in Nigeria.
My Role: Leading the Transformation
As the sole Product Designer, I spearheaded the project from January 2022 to February 2022. This project was a collaborative effort, involving a content strategist, a product manager, program coordinators, and a Front-End Developer.
The Design Challenge:
We noticed that the old website was just a single page on the Genesys Tech Hub Website. It didn’t really show everything the program is about and the changes it had made. Also, the website didn’t look as fun and exciting as we wanted it to, which is what Codeville stands for. This was especially important because we had recently given Codeville a new look and feel. Hence the need for the redesign.
Our Goals:
Design an engaging, informative website showcasing Codeville’s objectives, curriculum, and achievements.
Infuse the website with the new branding, preserving the fun and engaging atmosphere of the program.
Prioritize easy accessibility of information and to build trust.
Crafting the Solution:
The journey towards solving this problem began with gathering requirements. It was essential to hear from stakeholders and program coordinators to understand the brand mission, vision, overall goals, and aligning it with the our website’s vision. It was important that we also factored in the different program categories.
Firstly, I had to interview the program coordinators to really understand Codeville as a product and as a brand. After the interview, I noted down the requirements and got to work.
Site and Content Audit
Having understood what Codeville is about and with the requirements in mind, I embarked on a comprehensive audit of the existing website. This step aimed to shed light on areas that needed improvement while also establishing the blueprint for the new structure and flow.
The ultimate goal? To create a delightful experience for both children and parents as they explored the site. This is because primarily, the website would be visited majorly by parents who needs to enroll their children in the program. Also, students who are looking for extracurricular or summer activities to engage in are part of the website users.
The issues I identified after the audit was;
A lack of information and resources on the different categories of the codeville program.
Absence of clear call to actions
Misalignment with the fresh branding.
Competitor Analysis
In our journey towards revamping the Codeville website, we recognized the importance of learning from our peers in the field. This prompted us to conduct a thorough analysis of our competitors, exploring what they were getting right, where they were faltering, and identifying the opportunities for us to shine even brighter. After exploring websites of similar educational initiatives, we gained insights.
Clear communication, engaging visuals, the user experience and clear message
Defining the New Blueprint
Once we pinpointed the issues and gathered data from our research, it was time to take action. Our solution involved crafting a separate Codeville segment that could stand on its own as a distinct website apart from GenesysTechHub. With this in mind, I dove into the task. Initially, I reenvisioned the site’s functionality and appearance. This process included generating sketches and mapping out a coherent structure for the new layout.
Well, even though Codeville is all about the kids, parents are like co-captains on this journey. We wanted them to feel reassured and informed as they explored what the program had to offer their children.
Design:
After I was done sketching, it was time to bring the sketches to life. I dived into figma to bring my ideas to life.
HomePage
The homepage was Codeville’s online doorway, sharing the program’s excitement. We highlighted what kids learn and invited others to join the adventure. Stories from past kids to build trust. We asked people to take action. This final touch made Codeville feel vibrant and left a memorable first impression compared to the old website.
Programme Categories:
We made sure each program has its on special place on our website. It shows what each program offers, from robotics to coding and and FAQ section for each.
About us:
We also Added an About Codeville Page where you get to know about codeville better.
FAQ Pages:
A dedicated Frequently Asked Question page was created to give answers to questions about enrollment, requirements etc.
Contact us Page:
Did you need to reach out? The contact us page is the direct line.
Mobile Experience
It was important that the website was mobile responsive too.
Results:
The collaborative efforts of the design, content, and development teams culminated in a redesigned Codeville website section that aligned seamlessly with the program’s mission and essence. The results were striking:
Enhanced Brand Perception: The new design effectively communicated Codeville’s vibrant and innovative identity. Streamlined Navigation: The simplified user interface resulted in improved user satisfaction and efficient information retrieval.
Takeaway:
The redesign of the Codeville website was a success. We were able to create a visually appealing and informative website. This was an interesting project for me cause I had the opportunity to work with a content strategist for the first time.
Let’s talk
Got any questions, ideas, or projects you want to chat about? Hit me up! 😎
Introducing Codeville
Codeville is a one-month STEM summer program where children are introduced to new concepts, assemble and program robots, learn to code while diving into the captivating world of technology.
This program was set up to give children the opportunity to get a head start in today’s world of technology and to ensure that the skills they learn can be expressed in solving their everyday problems, especially in Nigeria.
My Role: Leading the Transformation
As the sole Product Designer, I spearheaded the project from January 2022 to February 2022. This project was a collaborative effort, involving a content strategist, a product manager, program coordinators, and a Front-End Developer.
The Design Challenge:
We noticed that the old website was just a single page on the Genesys Tech Hub Website. It didn’t really show everything the program is about and the changes it had made. Also, the website didn’t look as fun and exciting as we wanted it to, which is what Codeville stands for. This was especially important because we had recently given Codeville a new look and feel. Hence the need for the redesign.
Our Goals:
Design an engaging, informative website showcasing Codeville’s objectives, curriculum, and achievements.
Infuse the website with the new branding, preserving the fun and engaging atmosphere of the program.
Prioritize easy accessibility of information and to build trust.
Crafting the Solution:
The journey towards solving this problem began with gathering requirements. It was essential to hear from stakeholders and program coordinators to understand the brand mission, vision, overall goals, and aligning it with the our website’s vision. It was important that we also factored in the different program categories.
Firstly, I had to interview the program coordinators to really understand Codeville as a product and as a brand. After the interview, I noted down the requirements and got to work.
Site and Content Audit
Having understood what Codeville is about and with the requirements in mind, I embarked on a comprehensive audit of the existing website. This step aimed to shed light on areas that needed improvement while also establishing the blueprint for the new structure and flow.
The ultimate goal? To create a delightful experience for both children and parents as they explored the site. This is because primarily, the website would be visited majorly by parents who needs to enroll their children in the program. Also, students who are looking for extracurricular or summer activities to engage in are part of the website users.
The issues I identified after the audit was;
A lack of information and resources on the different categories of the codeville program.
Absence of clear call to actions
Misalignment with the fresh branding.
Competitor Analysis
In our journey towards revamping the Codeville website, we recognized the importance of learning from our peers in the field. This prompted us to conduct a thorough analysis of our competitors, exploring what they were getting right, where they were faltering, and identifying the opportunities for us to shine even brighter. After exploring websites of similar educational initiatives, we gained insights.
Clear communication, engaging visuals, the user experience and clear message
Defining the New Blueprint
Once we pinpointed the issues and gathered data from our research, it was time to take action. Our solution involved crafting a separate Codeville segment that could stand on its own as a distinct website apart from GenesysTechHub. With this in mind, I dove into the task. Initially, I reenvisioned the site’s functionality and appearance. This process included generating sketches and mapping out a coherent structure for the new layout.
Well, even though Codeville is all about the kids, parents are like co-captains on this journey. We wanted them to feel reassured and informed as they explored what the program had to offer their children.
Design:
After I was done sketching, it was time to bring the sketches to life. I dived into figma to bring my ideas to life.
HomePage
The homepage was Codeville’s online doorway, sharing the program’s excitement. We highlighted what kids learn and invited others to join the adventure. Stories from past kids to build trust. We asked people to take action. This final touch made Codeville feel vibrant and left a memorable first impression compared to the old website.
Programme Categories:
We made sure each program has its on special place on our website. It shows what each program offers, from robotics to coding and and FAQ section for each.
About us:
We also Added an About Codeville Page where you get to know about codeville better.
FAQ Pages:
A dedicated Frequently Asked Question page was created to give answers to questions about enrollment, requirements etc.
Contact us Page:
Did you need to reach out? The contact us page is the direct line.
Mobile Experience
It was important that the website was mobile responsive too.
Results:
The collaborative efforts of the design, content, and development teams culminated in a redesigned Codeville website section that aligned seamlessly with the program’s mission and essence. The results were striking:
Enhanced Brand Perception: The new design effectively communicated Codeville’s vibrant and innovative identity. Streamlined Navigation: The simplified user interface resulted in improved user satisfaction and efficient information retrieval.
Takeaway:
The redesign of the Codeville website was a success. We were able to create a visually appealing and informative website. This was an interesting project for me cause I had the opportunity to work with a content strategist for the first time.
Let’s talk
Got any questions, ideas, or projects you want to chat about? Hit me up! 😎
Introducing Codeville
Codeville is a one-month STEM summer program where children are introduced to new concepts, assemble and program robots, learn to code while diving into the captivating world of technology.
This program was set up to give children the opportunity to get a head start in today’s world of technology and to ensure that the skills they learn can be expressed in solving their everyday problems, especially in Nigeria.
My Role: Leading the Transformation
As the sole Product Designer, I spearheaded the project from January 2022 to February 2022. This project was a collaborative effort, involving a content strategist, a product manager, program coordinators, and a Front-End Developer.
The Design Challenge:
We noticed that the old website was just a single page on the Genesys Tech Hub Website. It didn’t really show everything the program is about and the changes it had made. Also, the website didn’t look as fun and exciting as we wanted it to, which is what Codeville stands for. This was especially important because we had recently given Codeville a new look and feel. Hence the need for the redesign.
Our Goals:
Design an engaging, informative website showcasing Codeville’s objectives, curriculum, and achievements.
Infuse the website with the new branding, preserving the fun and engaging atmosphere of the program.
Prioritize easy accessibility of information and to build trust.
Crafting the Solution:
The journey towards solving this problem began with gathering requirements. It was essential to hear from stakeholders and program coordinators to understand the brand mission, vision, overall goals, and aligning it with the our website’s vision. It was important that we also factored in the different program categories.
Firstly, I had to interview the program coordinators to really understand Codeville as a product and as a brand. After the interview, I noted down the requirements and got to work.
Site and Content Audit
Having understood what Codeville is about and with the requirements in mind, I embarked on a comprehensive audit of the existing website. This step aimed to shed light on areas that needed improvement while also establishing the blueprint for the new structure and flow.
The ultimate goal? To create a delightful experience for both children and parents as they explored the site. This is because primarily, the website would be visited majorly by parents who needs to enroll their children in the program. Also, students who are looking for extracurricular or summer activities to engage in are part of the website users.
The issues I identified after the audit was;
A lack of information and resources on the different categories of the codeville program.
Absence of clear call to actions
Misalignment with the fresh branding.
Competitor Analysis
In our journey towards revamping the Codeville website, we recognized the importance of learning from our peers in the field. This prompted us to conduct a thorough analysis of our competitors, exploring what they were getting right, where they were faltering, and identifying the opportunities for us to shine even brighter. After exploring websites of similar educational initiatives, we gained insights.
Clear communication, engaging visuals, the user experience and clear message
Defining the New Blueprint
Once we pinpointed the issues and gathered data from our research, it was time to take action. Our solution involved crafting a separate Codeville segment that could stand on its own as a distinct website apart from GenesysTechHub. With this in mind, I dove into the task. Initially, I reenvisioned the site’s functionality and appearance. This process included generating sketches and mapping out a coherent structure for the new layout.
Well, even though Codeville is all about the kids, parents are like co-captains on this journey. We wanted them to feel reassured and informed as they explored what the program had to offer their children.
Design:
After I was done sketching, it was time to bring the sketches to life. I dived into figma to bring my ideas to life.
HomePage
The homepage was Codeville’s online doorway, sharing the program’s excitement. We highlighted what kids learn and invited others to join the adventure. Stories from past kids to build trust. We asked people to take action. This final touch made Codeville feel vibrant and left a memorable first impression compared to the old website.
Programme Categories:
We made sure each program has its on special place on our website. It shows what each program offers, from robotics to coding and and FAQ section for each.
About us:
We also Added an About Codeville Page where you get to know about codeville better.
FAQ Pages:
A dedicated Frequently Asked Question page was created to give answers to questions about enrollment, requirements etc.
Contact us Page:
Did you need to reach out? The contact us page is the direct line.
Mobile Experience
It was important that the website was mobile responsive too.
Results:
The collaborative efforts of the design, content, and development teams culminated in a redesigned Codeville website section that aligned seamlessly with the program’s mission and essence. The results were striking:
Enhanced Brand Perception: The new design effectively communicated Codeville’s vibrant and innovative identity. Streamlined Navigation: The simplified user interface resulted in improved user satisfaction and efficient information retrieval.
Takeaway:
The redesign of the Codeville website was a success. We were able to create a visually appealing and informative website. This was an interesting project for me cause I had the opportunity to work with a content strategist for the first time.
Let’s talk
Got any questions, ideas, or projects you want to chat about? Hit me up! 😎