Context
Discovery and improvement of the Wiki app for page creation
Some parts of this case study are excerpts to maintain the confidentiality of the company.
Roles & Timeline
In March 2023, I volunteered to teach English at an elementary school in Thailand, which aroused my interest in teaching and led me to apply for a Product Designer position in the EdTech sector. My work on the case study during the recruitment process convinced the company to hire me. From February to April 2024, I collaborated with the Product Manager to advance this project to the development phase.
Challenges
According to the case study, Wiki is "an app used to create course materials, multiple pages and integrating multimedia content. The Wiki's homepage is often used as an index referencing all the pages created". The brief required an analysis of Wiki and proposals for ergonomic improvements via mockups, while ensuring cohesion with the rest of the platform.
Internally, my challenges were integrating the solutions proposed during my recruitment with the app's evolutions and assisting the Product Manager with decision-making for the delivery phase.
Design process
I. Understanding and Defining the Problem
UX & UI Audit of the App
I initially tested the Wiki as if I were a teacher unfamiliar with the app, attempting to create educational content and perform typical teacher actions. Then, I conducted a second test from a designer's perspective. I summarized the findings in an evaluation matrix with criticality criteria.
Key findings
Three main issues with the app
1. The app's positioning is unclear: descriptions in the empty state, user support pages, and the case study brief differ. The empty state suggests the Wiki is meant to create a free encyclopedia like Wikipedia, with flat content and no links or sub-sections.
2. The organization of created pages lacks flexibility and automation: the app does not allow users to easily change the order of pages or create sub-sections (see 'Page List' view).
Additionally, users must manually create an index/table of contents on the Wiki's homepage, a tedious task, whereas automatic table of contents creation is a common standard in software tools (e.g., automatic table of contents in Word)
3. Beyond the outdated design, the user interface lacks ergonomics: for example, some elements look the same but have different functions (e.g., 'New Page' button vs. 'Homepage' and 'Page List' elements). Additionally, the 'Comment' button is at the top right, while users need to scroll to the bottom to leave a comment.
Experimentation and defining the First Use Case
I used my teaching experience to identify the First Use Case. For example, while creating a course on English question grammar, I found that learners first needed to understand concepts like auxiliaries and verbs. I had to restructure my course to add pages earlier, which was difficult in the Wiki.
Key findings
The audit, my observation of teachers in Thailand, and my experience led me to understand that:
- Teachers usually have very little time to create course materials, as they are already occupied with lesson preparation, delivery, and assessment. Most use textbooks and handouts.
- Wikis without indexes and clear structure complicate learning for students, potentially increasing app abandonment rates.
- Therefore, my role is to facilitate the creation of interactive, structured and interconnected courses.
II. Ideation of solutions
Benchmark
I analyzed EdTech players like OpenClassrooms and Coursera, but focused mainly on office software tools such as Notion, OneNote, and Coda. Although not education-specific, these tools offer great flexibility for content creation.
Key findings
This analysis led me to propose adding a 'sub-pages' feature to improve course organization. I drew inspiration from the simplest practices of these tools, avoiding the complexities of Notion, which has a less intuitive learning curve.
These platforms also inspired my approach for UX writing and the implementation of a drag-and-drop feature for reorganizing and nesting pages.
Paper sketches
I used Chunbuns designer's method to design initial user flows and paper sketches. I defined the goals a teacher might have in the app (creating pages, sub-pages, moving them, etc.) and the necessary actions (task flow). Then, I placed these elements into screen layouts.
High-Fidelity wireframes for web and mobile app
I created high-fidelity wireframes for both web and mobile versions using Figma, following the company’s graphic style. I developed a prototype to help the company visualize the overall experience.
Key findings
For key actions (creating pages and sub-pages), I chose to enable creation from both the left summary and from the content itself, with two prominent buttons at the bottom right. This approach accommodates teachers who might not think to look for small "plus" buttons in the summary.
Internal finalization and mockup with the design system
When I took over the project with the Product Manager, several steps were needed before moving to the delivery phase:
- Review of new features and updates: Discuss with the Product Manager the integration of new functionalities.
- Three main issues:
- Placement of main call-to-actions (creating and modifying pages or sub-pages) : should be intuitive but also consistent with other apps on the platform.
- 'Page List' feature: decide whether to keep it, where to place it, and how to make it more engaging.
- Homepage: determine if it should remain fixed as the first page or be a movable page.
I created multiple mockups and selected the two best solutions. Then, I presented their pros and cons to the Product team, leading to a vote and final decision.
Results & Learnings
Approval for development and acquisition of a client
By going beyond the initial brief and proposing a product vision centered on course creation, I significantly contributed to the development of a simplified LMS tailored to education. This allowed us to move to the development phase and helped in acquiring a new regional client.
The solution now simplifies the creation of pages and subpages, as well as managing their order, with a clear and easily visible structure.
With the Product Manager, we added the 'Visible to All' feature, which saves a page as a draft, thereby offering more flexibility to teachers.
Key learnings
Thanks to the experience gained from other internal projects, this project ran smoothly. I was able to work faster on mockups and present more clearly various solution options, which helped in making decisions on the final aspects of the project.
