The Brief
Site redesign and improvement of user flow to get users to sign up for a trial lesson (Real Life company Project with owner of Language school)
Site redesign and improvement of user flow to get users to sign up for a trial lesson (Real Life company Project with owner of Language school)
The Context
Individual project with real client during UXUI Ironhack Bootcamp 2020 in Lisbon, Portugal.
Individual project with real client during UXUI Ironhack Bootcamp 2020 in Lisbon, Portugal.
Deliverables:
Competitve Analysis Report, UX Research Report, Personas, Sitemap, Information Architecture, User Flow, Wireframes, Interactive Prototype, Visual Design, Styleguide, Usability Testing
Competitve Analysis Report, UX Research Report, Personas, Sitemap, Information Architecture, User Flow, Wireframes, Interactive Prototype, Visual Design, Styleguide, Usability Testing
Time:
2 weeks
2 weeks
Tools:
Figma, Adobe Photoshop, Keynote, Quicktime, UXTweak
Figma, Adobe Photoshop, Keynote, Quicktime, UXTweak
The client
Meet Susana da Silva Leite!
Susana da Leite is a passionate language teacher who started her own online school first called ‘Fit 4 Culture’ and then ‘Lingua Design’.
She easily connects to the students she met in person or that are recommended by friends, … but she wants to transition to Online. Teaching online provides flexibility, teachers can be their own boss, teach according to their own vision and do more than just teach by the book. This is important to Susana. But how do you achieve this online?
Susana da Leite is a passionate language teacher who started her own online school first called ‘Fit 4 Culture’ and then ‘Lingua Design’.
She easily connects to the students she met in person or that are recommended by friends, … but she wants to transition to Online. Teaching online provides flexibility, teachers can be their own boss, teach according to their own vision and do more than just teach by the book. This is important to Susana. But how do you achieve this online?
UX Audit
I had learned from previous assignments how much you can learn from looking very closely at existing content. How is the structure? What is the content? What do you see first … and what do you see once you click somewhere? I took screenshots and wrote next to each element what type of content it was… it ended up being for 35 Pages:
Image: Example of Analysis of existing website
After analysing these 30 pages I was … confused! I found many different types of content, different languages, different levels. The owner had mentioned that while she did want to focus now on getting more bookings online, the greater vision was not only to provide a learning opportunity for students, but to spread the word about education design for teachers and to expand to online training for adults and even involve more teachers in her language school. Maybe even an online learning platform. So some articles and video’s are going into detail about teaching methodology and content creation. Mixing the different type of content and sometimes in Portuguese and sometimes in English can cause unclarity for the average student coming across the website however. Imagine a German wanting to learn English and searching their way through Portuguese content.
An intial UX audit had revealed some of the possible causes for the low engagement. The data of ..
- Interviews
- Usability tests
- Review of business and user objectives
- Conversion metrics
- Sales data
- Traffic/engagement
- UX Benchmarking
... provided additional insight in the possible causes for the low success rate. You find more details about results and insights below.
To further clarify the main goal of the product and redefine the hierarchy of information for the benefit of the user, I had to get some clarification from the owner in a client workshop.
Client
Workshop
Workshop
Must-haves (Method MoSCoW = Must have, Should have, Could have, Will not have). This method got the owner thinking and helped me understand the vision and the product better. Too many features and too much content make it hard to test or evaluate a new product. Focussing on the Must-haves first can help build a MVP (Minimal Viable Product) for testing. Depending on the phase of the product it can be even more important to focus on iterations and testing to further clarify and refine the product.
Analysing
& Testing
& Testing
Low return Rate
The owner provided Webanalysis data that showed that she had some traffic but with 12 % a very low return rate and with 43 % also a low Bounce rate (= no further interaction on the website). 183 Users visited the website from Jan 2020 — Nov 2020 and the owner suspects some of her students to visit the website but since she only has a hand full of learning students, some of the traffic were likelly driven by the content she shares on Youtube and LinkedIn.
Low converion Rate / Sales
The owner reported that she was only contacted 2 times about a lesson by users that were not her students or mouth to mouth. And those 2 did not become long-term students of her.
Survey existing students
Existing students are for 90% from offline contact or mouth to mouth recommendations and therefore not generated by the website. 10 Existing students answered the survey:
- 60% know that their teacher has a website.
- 60 % say they prefer to learn with books and not with video material or other Apps.
- 50% of the answers given by students 40 years and older.
- Only 1 survey participant answered that he/she found the teacher Susana online.
Usability Tests & Interviews
For this project, the owner wanted me as designer to focus on getting new students to sign up and to increase the bookings online. Instead of user interviews, I interviewed testers and conducted usability tests. Testers were asked what they associate with the brand name and style and asked them to book a lesson on the website and comment on their experience. These tests and interviews showed that it was difficult to find the option to book a lesson and that the name ‘Lingua Design’ was easily associated with design and not easily understood as related to language or lessons for german or english speakers.
Open Card Sorting
An Open Card Sorting experiment confirmed that it is difficult for testers to see patterns in the type of content. 5 testers have made very different categories and took up to 10 min to make categoies for the cards with the content. It became clear that the content variety asked for clear categories to fall under so that it was easy for a user to grasp what type of content to expect and where to go. The current navigation bars are:
- “Welcome to Lingua Design”
- “Blog”
- “Schedule your lesons”
- “Contact”
︎︎︎ Pdf Cardsorting Results
UX
Problems
Problems
︎︎︎ The website receives traffic but users mostly don’t stay, don’t further interact, contact or book lessons online.
︎︎︎ The existing students and the users that may come across her content online are separate groups and may be different in age, habits and values.
︎︎︎ The owner knows her current students (offline contact that she teaches online) but has close to no information about who is visiting her website anonymously (online user + potential student).
︎︎︎ The content is difficult to grasp since there is no differentiation in the user flow per language or per level (Beginner, Advanced, Teacher).
︎︎︎ The existing students and the users that may come across her content online are separate groups and may be different in age, habits and values.
︎︎︎ The owner knows her current students (offline contact that she teaches online) but has close to no information about who is visiting her website anonymously (online user + potential student).
︎︎︎ The content is difficult to grasp since there is no differentiation in the user flow per language or per level (Beginner, Advanced, Teacher).
Creating
Value
Value
︎︎︎ Get the anonymous visitor of the website to get in contact / sign-up for a free lesson since any information about the user can help to improve the interaction. Find out more about their needs, questions and frustrations. (Sign-up, Contact form).
︎︎︎ Restructure the content to make it easier to find the relevant information a specific user is looking for (Persona + User flow).
︎︎︎ Translate the friendly personality that the existing students value to the first impression that an anonymous user gets when visiting the website.
︎︎︎ Restructure the content to make it easier to find the relevant information a specific user is looking for (Persona + User flow).
︎︎︎ Translate the friendly personality that the existing students value to the first impression that an anonymous user gets when visiting the website.
User Flow
Since the heart of the problem was that the website does not generate users, the user flow was improved based on a Persona (a fictional character). Miguel, A student that needs to improve specific english vocuabulary. As first time visitor Miguel will want to know what to expect from a lesson and if the lesson would be worth his investment.
How might we build trust in the quality and provide the most essential information a user like Miguel would need to know?
Information Architecture
Information Architecture
The image above is a visual representation of the newly organised content. The green squares represent a navigation bar in this case and the pink squares are representing the existing content on the page. You can see here that ‘Learn’ and ‘Teach’ are separated in this version since the owner shares content about teaching and wants to advocate education design and new learning methodology. And the owner is also planning to add more teachers to her school. This way the owner can consciously target students as well as teachers without confusing either of them by displaying information about teaching philosophy and videos in advanced Portuguese on the same page.
Site
Redesign
Redesign
The new design provides the necessary information in small chuncks and with a friendly introduction:
The sign-up form for a new student is kept very simple and clear. The student only provides his e-mail and the language he wants to learn.
Video Prototype
︎︎︎Click Play to see the video of the Hi-Fi PrototypeLink to website before ︎︎︎ https://lingua-design.com/
Before - After
Testing
Testing
With the new design complete, I asked testers to book a lesson on the original site and then on the interactive prototype. Here are the results that show the time it took to book a lesson and the keywords that the testers used to describe the experience:
![]()
![]()
The test results confirmed that the redesign had achieved the desired result. This structured test where I measured the time of booking a class with a stopwatch was done with 3 testers. Further testing and iteration could confirm the results and once the final design is implemented in code, we can see whether the real live users will also confirm the results and book more lesson online. The feedback of the owner was postive as well.
The test results confirmed that the redesign had achieved the desired result. This structured test where I measured the time of booking a class with a stopwatch was done with 3 testers. Further testing and iteration could confirm the results and once the final design is implemented in code, we can see whether the real live users will also confirm the results and book more lesson online. The feedback of the owner was postive as well.
Next Steps
- Further testing on bigger scale.
- Iteration based on owners direction for product and user.
- Implementing design in CSS, HTM, JS.
- Once the design goes live, compare conversion rate
- Further clarify the product and MVP. While the MoSCoW has clarified the hierarchy for me, it also showed that the focus was still unclear for the owner. And there was a difference in the focus now and the focus for the future.
- Rebranding. The test results had shown that the original name ‘Lingua Design’ was easily misunderstood by German and English speakers and often associated with design since the concept of education design is not broadly known. With the redesign I focussed on the user flow of the booking of a lesson, but since all elements connect I also choose a different brand name and logo that I tested with users as well. The owner confirmed that she could not register ‘Lingua Design’ as name for her school because of the word Design. This confirmed the need for rebranding as well.
Reflection
I enjoyed working on a product that allowed me to look at the full structure and revamp it from the ground up. Restructuring the Information Architecture helped me understand the importance of the organisation of information - also for the visual experience of a product. Just the structure, just the content... already says a lot about what the product is. And what the product is, is not always clear on first sight. In this project there was a difference between the intentions of the owner and what the testers understood. This can cause a mismatch between users and product and even when the visuals are improved, the content may cause the user to be frustrated and confused if the type of content is not clearly structured and geared towards one user and one goal at a time.
Since this project was a real-life project with an existing product and a real client, it was very different from the other projects of the Ironhack Bootcamp. I could get insights with real data from an actual Website for example. And I didn’t start from scratch. The process started after the product already went live some years ago … I was caught a bit by surprise on how much time I ended up spending on Information Architecture since it is much easier to determine a structure if start from the beginning and decide about content and categories at the same time. In this case I actually researched and analysed and rearranged content or about for the most part of the 2 weeks. Selecting friendly and calm colors and creating a more personal introduction of the teacher was a relatively small part in terms of the time spend. But this taught me a lot about the importance of a solid basic structure … when and how the information is provided makes a huge difference on how intuitive, how digestible and how trustworthy the information comes across. I carefully selecting the right words, white space and scrolling time to create a pleasant flow … and make it easy for a first time user to book a lesson. But this was only possible once the product and the structure were more clear as well. This is a great difference from only designing a flow or only designing a landing page. Still I realise, that to actually have people book lessons, there is still much more involved. You have to drive traffic to the website and the right kind of traffic. The users who like watching the youtube video have to match the targetted user for the website. The product, the user flow, the persona’s all have to line up and they interact.
“You nailed it!”
Susana da Silva Leite (Client)
Since this project was a real-life project with an existing product and a real client, it was very different from the other projects of the Ironhack Bootcamp. I could get insights with real data from an actual Website for example. And I didn’t start from scratch. The process started after the product already went live some years ago … I was caught a bit by surprise on how much time I ended up spending on Information Architecture since it is much easier to determine a structure if start from the beginning and decide about content and categories at the same time. In this case I actually researched and analysed and rearranged content or about for the most part of the 2 weeks. Selecting friendly and calm colors and creating a more personal introduction of the teacher was a relatively small part in terms of the time spend. But this taught me a lot about the importance of a solid basic structure … when and how the information is provided makes a huge difference on how intuitive, how digestible and how trustworthy the information comes across. I carefully selecting the right words, white space and scrolling time to create a pleasant flow … and make it easy for a first time user to book a lesson. But this was only possible once the product and the structure were more clear as well. This is a great difference from only designing a flow or only designing a landing page. Still I realise, that to actually have people book lessons, there is still much more involved. You have to drive traffic to the website and the right kind of traffic. The users who like watching the youtube video have to match the targetted user for the website. The product, the user flow, the persona’s all have to line up and they interact.
“You nailed it!”
Susana da Silva Leite (Client)