Website Re-Design
Case Study
Index
Company
Customer
Starting point
Objectives
What did we do?
Results
Reflections
The Client
Founded in 2012, Critical Language Service's mission is to provide high quality instruction in Arabic as a foreign language, using high tech, modern, fun, and student centered teaching methods. Classes are taught by live teachers via Zoom.
The company owner would like its
website to be redesigned and updated.
The Client's Customers
Target Audience & User Personas
The majority of the company's students are children under the age of 18. For these students the parents typically first read the website and then ask their children to look at the website and state if they would be interested in taking an Arabic class. Therefore the personas include both adults and children.
Storyboard & Persona
Muslim mom persona.
Mother of 4 children, Mariam is a religious Muslim woman who believes that learning Arabic will help her children to connect to their faith by allowing them to read and understand the Quran someday. She herself knows some Arabic and reads Quran every day. While she realizes the power of educational technologies, she is not personally very experienced using them. Click on the images on the left to see larger verions.
Storyboard & Persona
Muslim child persona.
Taalib is homeschooled and the oldest of 3 children. His family is Muslim. They are religious. His mother teaches him most subjects but he studies Quran at the mosque his family attends. He also studied Arabic at his mosque for a while but the class was boring, so his mother eventually let him drop out. In his free time he loves to play Minecraft, a video game for kids, on his iPad. Click on the images on the left to see larger verions.
Starting point
Current Website
This is where we started.
Critical Language Service needed a new website because:
- Is text heavy.
- Lacks clear calls to action.
- Lacks examples of the services offered.
- Has no social proof via testimonials.
- The current website has not been updated in 5 years.
- Does not reflect the business's current practices.
Click on the computer. Unfotunately it was not possible to embed the website here but you can click on the computer screen to open a live link to the original website.
Objectives
How do we increase sign ups?
The problem that needed to be solved.
The research was carried out using a combination of methods, including online interviews with 8 current students and parents, as well as in-person usability testing with 5 individuals both in person and through Zoom sessions.
The objective of this study was to investigate the aspects that present students enrolled in Critical Language Service's Arabic program find valuable. It also sought to understand the decision-making process these students underwent when choosing to enroll in our courses. Additionally, the study examined whether offering site visitors a sample of our teaching materials through a brief self-study course could lead to a higher rate of new student enrollments.
Registration
The current sign up process.
The registration process comprises multiple stages, as illustrated in the computer graphic to the left. These steps encompass an initial assessment meeting with the director through Zoom, self-study of learning materials, and culminate in a live lesson with a teacher located in Egypt via Zoom. It is essential for the website to convey this comprehensive process and also offer prospective students the necessary resources to prepare for the trial lesson.
Assumptions
Ideas not based on research.
At the project's outset, my hypothesis was that mastering the Arabic alphabet serves as a foundational skill for learning the Arabic language. Consequently, I anticipated potential students would express interest in a complimentary Arabic alphabet course. This course could serve as an illustrative showcase of the client's teaching methods and materials while also facilitating the collection of contact information from prospective students. Given the prevalence of self-study alphabet courses in Arabic language education, aligning with this trend seemed a logical approach.
HOW MIGHT WE QUESTIONS
These questions explore how to increase the registration of new students for an online Arabic language school.
How might we increase interest in learning Arabic as a foreign language?
How might we engender website viewers with trust in the client's services'?
How might we show the value of learning Arabic as a foreign language to students in K-12 education?
How might we demonstrate the culture of the language school to visitors to our website?
How might we encourage visitors to our website to interact with self study materials?
How might we demonstrate the value of the client's Arabic classes to students or parents interested in learning Arabic?
Point of View Statements
These statements allowed me to put myself in the shoes of the website's users and identify their needs.
With anyone able to make claims about the quality of their programs, and potential students increasingly skeptical of such claims, I would like to explore how I can leverage free self study materials to foster trust in the institute’s Arabic language program?
Arabic has a reputation as a difficult language to learn, pushing students and parents to choose languages that are perceived as easier to learn such as French and Spanish. I would like to explore how I can show that learning Arabic is very doable.
Arabic has traditionally been plagued by a negative reputation. Many people have had negative experiences studying Arabic in the past. I want to explore how to show potential students that this language school’s program is fun and different.
Numerous online Arabic language programs are available for parents to consider. My objective is to investigate strategies for distinguishing this school from other language institutions for parents evaluating potential educational options for their children.
User Research
User interview questions
Question 02
Question 03
Question 04
Question 05
Question 01
Experiences and behaviors
Senses and opinion
Opinion and elboration
Synthesis and wrap up
Background
Can you describe for me your experience with online education?
What led you to choosing our program?
What do you look for in an (online) educational program? Why?
What process do you go through when deciding to sign up for an educational experience? Does this process differ for an online program?
Tell me more about the types of information would you find helpful when studying a language? Self study courses?
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
Analysis
Below are the major themes revealed in user interviews about what users expected.
Theme 2
Theme 3
Theme 4
Theme 1
Interactive & Personalized
Fun & Enjoyable
Effective & Results Driven
Organized & Easy to Use
Interviewees expressed that they valued highly interactive and personlized learning experiences.
students wanted lessons and materials which were fun to use and not intimidating. Parents wanted children to be engaged.
In 4/5 interviews, interviewees stated that they wanted to see vidence that the program would be effective in teaching the language.
Students and parents stated that the website and materials should be easy to navigate with clear directions.
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
Synthesis
Actionable insights from synthesis
Competative analysis
Reccomendations for product development
I have a number of suggestions for how to develop the product. Click the plus sign below for more details.
The interviews yielded a number of actionable insights. Click the plus sign below to for more details.
Looking at competitor's websites was useful. Click the plus sign below to for more details.
What did we do?
The Redesign
Click on the moodboard and style tile to see the full page versions.
The design board and style tile capture the essence of the company values. Critical Langauge Service is an educational company that strives to make learning fun, effective, innovative, modern and high tech. To reflect these values the colors therefore had to be bright and somewhat unusual. The only constraint was that the company has key brand images and the colors needed to compliment these images. Therefore all of the colors that I used for the color pallate also appeared in the existing brand's cutom artwork.
Wireframes
Low fidelity and digital wireframes.
These inital wireframes were focused on a mobile responsive design. Most of the elemts of the design untilmately made it into the high fidelity version however, the layouts changed dramatically between this point and the end point of this project. Additionally, many elements were added based on the user research that went into the final version. Click on the images to see full screen versions.
Iterations
After user testing, several issues were revealed. All but one of the issues raised during user testing were altered for the final version of the project that is included in this presenttion. The image on the right is an overview of the information gathered in the usability testing. Click on the image to see an enlarged version.
+INFO
+INFO
+INFO
+INFO
Iterations
At-a-glance summaries of your usability tests Task 1 - Homepage → Free Materials → Beginners Successful but users were distracted by the homepage. 2/5 did not automatically look at the menu bar at the top of the page but chose to start by scrolling down the homepage. 5/5 clicked and navigated from the Free Materials page to the Beginners page via scrolling down and clicking on the Beginners card as opposed to the alternative path of using the drop down menu at the top of the page. Task 2 - Navigate to the Free Materials → Beginners → Vocabulary Study → Sentence Unjumble → Dialogue Builder → Test → Sign Up for Free Trial Lesson. Not successful. 0/5 navigated via the path described in Task 2. The majority of participants (60%) did not navigate linearly through the study materials, choosing instead to start with the middle card and second step of Sentence Unjumble. Task 3 - Click a CTA to sign up for a free trial lesson. Successful but users were distracted by the homepage. 5/5 participants clicked on a CTA for a free trial lesson
The Results
Maps & Flows
Click on the computers to see the site map and user flows of the new site.
User Flows for Usability Testing
Site Map for Critical Language Service
Interact with the protytpe to answer the following questions:
1. Where would you go to sign up for a trial lesson?2. Imagine you are a beginning Arabic student and want to teach yourself some basic Arabic, where would you go?3. Can you navigate through the free learning materials, including the test, to sign up for a trial lesson?
Reflections
What I learned & future steps
After completing user testing and consulting with the potential client, we believe it's time to progress with building the design into a website using Webflow. The next phase will involve refining the animations for page loading on the website and other details unique to Webflow. This project marked my first experience creating an interactive prototype with Figma. I recognized the importance of organization in constructing pages, utilizing naming conventions, frames, and components to develop a functional prototype. YouTube played a crucial role in guiding me through the creation of overlays and working menus, essential for smooth navigation. As a result, I incorporated overlays into all my subsequent prototypes.
Further Information
Contact me at SophiaIdeas.com
Phase 1 - CASE STUDY PRESENTATION
critical.language.se
Created on March 18, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Economic Presentation
View
Tech Presentation Mobile
View
Geniaflix Presentation
View
Vintage Mosaic Presentation
View
Shadow Presentation
View
Newspaper Presentation
View
Zen Presentation
Explore all templates
Transcript
Website Re-Design
Case Study
Index
Company
Customer
Starting point
Objectives
What did we do?
Results
Reflections
The Client
Founded in 2012, Critical Language Service's mission is to provide high quality instruction in Arabic as a foreign language, using high tech, modern, fun, and student centered teaching methods. Classes are taught by live teachers via Zoom.
The company owner would like its
website to be redesigned and updated.
The Client's Customers
Target Audience & User Personas
The majority of the company's students are children under the age of 18. For these students the parents typically first read the website and then ask their children to look at the website and state if they would be interested in taking an Arabic class. Therefore the personas include both adults and children.
Storyboard & Persona
Muslim mom persona.
Mother of 4 children, Mariam is a religious Muslim woman who believes that learning Arabic will help her children to connect to their faith by allowing them to read and understand the Quran someday. She herself knows some Arabic and reads Quran every day. While she realizes the power of educational technologies, she is not personally very experienced using them. Click on the images on the left to see larger verions.
Storyboard & Persona
Muslim child persona.
Taalib is homeschooled and the oldest of 3 children. His family is Muslim. They are religious. His mother teaches him most subjects but he studies Quran at the mosque his family attends. He also studied Arabic at his mosque for a while but the class was boring, so his mother eventually let him drop out. In his free time he loves to play Minecraft, a video game for kids, on his iPad. Click on the images on the left to see larger verions.
Starting point
Current Website
This is where we started.
Critical Language Service needed a new website because:
Click on the computer. Unfotunately it was not possible to embed the website here but you can click on the computer screen to open a live link to the original website.
Objectives
How do we increase sign ups?
The problem that needed to be solved.
The research was carried out using a combination of methods, including online interviews with 8 current students and parents, as well as in-person usability testing with 5 individuals both in person and through Zoom sessions.
The objective of this study was to investigate the aspects that present students enrolled in Critical Language Service's Arabic program find valuable. It also sought to understand the decision-making process these students underwent when choosing to enroll in our courses. Additionally, the study examined whether offering site visitors a sample of our teaching materials through a brief self-study course could lead to a higher rate of new student enrollments.
Registration
The current sign up process.
The registration process comprises multiple stages, as illustrated in the computer graphic to the left. These steps encompass an initial assessment meeting with the director through Zoom, self-study of learning materials, and culminate in a live lesson with a teacher located in Egypt via Zoom. It is essential for the website to convey this comprehensive process and also offer prospective students the necessary resources to prepare for the trial lesson.
Assumptions
Ideas not based on research.
At the project's outset, my hypothesis was that mastering the Arabic alphabet serves as a foundational skill for learning the Arabic language. Consequently, I anticipated potential students would express interest in a complimentary Arabic alphabet course. This course could serve as an illustrative showcase of the client's teaching methods and materials while also facilitating the collection of contact information from prospective students. Given the prevalence of self-study alphabet courses in Arabic language education, aligning with this trend seemed a logical approach.
HOW MIGHT WE QUESTIONS
These questions explore how to increase the registration of new students for an online Arabic language school.
How might we increase interest in learning Arabic as a foreign language?
How might we engender website viewers with trust in the client's services'?
How might we show the value of learning Arabic as a foreign language to students in K-12 education?
How might we demonstrate the culture of the language school to visitors to our website?
How might we encourage visitors to our website to interact with self study materials?
How might we demonstrate the value of the client's Arabic classes to students or parents interested in learning Arabic?
Point of View Statements
These statements allowed me to put myself in the shoes of the website's users and identify their needs.
With anyone able to make claims about the quality of their programs, and potential students increasingly skeptical of such claims, I would like to explore how I can leverage free self study materials to foster trust in the institute’s Arabic language program?
Arabic has a reputation as a difficult language to learn, pushing students and parents to choose languages that are perceived as easier to learn such as French and Spanish. I would like to explore how I can show that learning Arabic is very doable.
Arabic has traditionally been plagued by a negative reputation. Many people have had negative experiences studying Arabic in the past. I want to explore how to show potential students that this language school’s program is fun and different.
Numerous online Arabic language programs are available for parents to consider. My objective is to investigate strategies for distinguishing this school from other language institutions for parents evaluating potential educational options for their children.
User Research
User interview questions
Question 02
Question 03
Question 04
Question 05
Question 01
Experiences and behaviors
Senses and opinion
Opinion and elboration
Synthesis and wrap up
Background
Can you describe for me your experience with online education?
What led you to choosing our program?
What do you look for in an (online) educational program? Why?
What process do you go through when deciding to sign up for an educational experience? Does this process differ for an online program?
Tell me more about the types of information would you find helpful when studying a language? Self study courses?
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
Analysis
Below are the major themes revealed in user interviews about what users expected.
Theme 2
Theme 3
Theme 4
Theme 1
Interactive & Personalized
Fun & Enjoyable
Effective & Results Driven
Organized & Easy to Use
Interviewees expressed that they valued highly interactive and personlized learning experiences.
students wanted lessons and materials which were fun to use and not intimidating. Parents wanted children to be engaged.
In 4/5 interviews, interviewees stated that they wanted to see vidence that the program would be effective in teaching the language.
Students and parents stated that the website and materials should be easy to navigate with clear directions.
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
+INFO
Synthesis
Actionable insights from synthesis
Competative analysis
Reccomendations for product development
I have a number of suggestions for how to develop the product. Click the plus sign below for more details.
The interviews yielded a number of actionable insights. Click the plus sign below to for more details.
Looking at competitor's websites was useful. Click the plus sign below to for more details.
What did we do?
The Redesign
Click on the moodboard and style tile to see the full page versions.
The design board and style tile capture the essence of the company values. Critical Langauge Service is an educational company that strives to make learning fun, effective, innovative, modern and high tech. To reflect these values the colors therefore had to be bright and somewhat unusual. The only constraint was that the company has key brand images and the colors needed to compliment these images. Therefore all of the colors that I used for the color pallate also appeared in the existing brand's cutom artwork.
Wireframes
Low fidelity and digital wireframes.
These inital wireframes were focused on a mobile responsive design. Most of the elemts of the design untilmately made it into the high fidelity version however, the layouts changed dramatically between this point and the end point of this project. Additionally, many elements were added based on the user research that went into the final version. Click on the images to see full screen versions.
Iterations
After user testing, several issues were revealed. All but one of the issues raised during user testing were altered for the final version of the project that is included in this presenttion. The image on the right is an overview of the information gathered in the usability testing. Click on the image to see an enlarged version.
+INFO
+INFO
+INFO
+INFO
Iterations
At-a-glance summaries of your usability tests Task 1 - Homepage → Free Materials → Beginners Successful but users were distracted by the homepage. 2/5 did not automatically look at the menu bar at the top of the page but chose to start by scrolling down the homepage. 5/5 clicked and navigated from the Free Materials page to the Beginners page via scrolling down and clicking on the Beginners card as opposed to the alternative path of using the drop down menu at the top of the page. Task 2 - Navigate to the Free Materials → Beginners → Vocabulary Study → Sentence Unjumble → Dialogue Builder → Test → Sign Up for Free Trial Lesson. Not successful. 0/5 navigated via the path described in Task 2. The majority of participants (60%) did not navigate linearly through the study materials, choosing instead to start with the middle card and second step of Sentence Unjumble. Task 3 - Click a CTA to sign up for a free trial lesson. Successful but users were distracted by the homepage. 5/5 participants clicked on a CTA for a free trial lesson
The Results
Maps & Flows
Click on the computers to see the site map and user flows of the new site.
User Flows for Usability Testing
Site Map for Critical Language Service
Interact with the protytpe to answer the following questions:
1. Where would you go to sign up for a trial lesson?2. Imagine you are a beginning Arabic student and want to teach yourself some basic Arabic, where would you go?3. Can you navigate through the free learning materials, including the test, to sign up for a trial lesson?
Reflections
What I learned & future steps
After completing user testing and consulting with the potential client, we believe it's time to progress with building the design into a website using Webflow. The next phase will involve refining the animations for page loading on the website and other details unique to Webflow. This project marked my first experience creating an interactive prototype with Figma. I recognized the importance of organization in constructing pages, utilizing naming conventions, frames, and components to develop a functional prototype. YouTube played a crucial role in guiding me through the creation of overlays and working menus, essential for smooth navigation. As a result, I incorporated overlays into all my subsequent prototypes.
Further Information
Contact me at SophiaIdeas.com