Online Education Product Design and Prototype
Sixty Second Summary
Speech Link faced a problem. As their products grew in functionality, they also grew in complexity. Teachers, the main users of the platform, required specialist training and documentation to be able to use the platform, and many page loads and mouse clicks were required for each operation.
Working closely with Speech Link, as their Design and Development team, The Familiar used Design Thinking and Human-Centred Design to redevelop core features of the Speech Link product to be more easily usable and accessible, condensing multiple complicated pages into one simplified workflow through a process of product innovation.
Vital Statistics
- Client:
- Speech Link Multimedia Ltd
- Size:
- 10-49 employees
- Sector:
- Education and Edtech
- Website:
- speechandlanguage.support
- Team:
- 5 people
- Length:
- 18 months
- Roles:
-
Product & Service Strategy
Content & Information Architecture
Product & Service Design
User Experience Design
User Interface Design
Front-End Development
Infrastructure Architecture & Design
Database Architecture & Design
Testing
Short on time?
All our case studies are available for download in PDF format, so you can read them wherever and whenever you like. Download now to read more about how The Familiar helped Speech Link in their mission.
Full Story - 9 Minute Read
The Challenge
Speech Link’s ongoing mission is to bring Speech and Language Therapy knowledge and expertise to every school to help all children reach their full communication potential. Their main tool in achieving this mission is a suite of online tools to help teachers identify and support children with speech and language needs in the classroom.
Over the original product’s ten year life, as features were added to the Speech Link platform, complexity crept into the platform, making it more difficult for teachers to use effectively. Instead of an intuitive interface, teachers were instead presented with instructions sheets and videos, training sessions and a dedicated support desk.
The Familiar were asked to work closely with Speech Link to understand and define the problem; create, prototype and validate ideas to solve the problem; and then work with Speech Link to build and roll out the solution to their teachers.
Structuring the Project
Whilst our design work is always human-centred and design-led, we use a variety of structures and techniques to achieve our goal. These approaches are usually influenced by the project we’re working on, the organisation we’re working with, and the roles we’re undertaking in that project.
For this project, we used the Double Diamond methodology, defined by the British Design Council, as a way of approaching the problem and structuring the project.
In a Double Diamond project, we begin expanding our knowledge of the problem by finding the insights and information we need. We then define down the area to focus upon, so that we can create a Design Brief and Problem Definition.
We then expand out again, developing potential solutions to the problem, before we focus on delivering solutions that work.
In a Double Diamond project, we begin expanding our knowledge of the problem by finding the insights and information we need. We then define down the area to focus upon, so that we can create a Design Brief and Problem Definition.
We then expand out again, developing potential solutions to the problem, before we focus on delivering solutions that work.
Understanding the Problem
The first step in discovering the problem is to understand the context around it. A good foundation for this understanding is to start with interviews of the people who use the product everyday.
Discussions with Speech Link clinicians and Help Desk staff helped put us in the shoes of those people who will be using the product. It also led us to specific insights from their points of view.
During this process, Martin, our co-founder, attended a Speech Link training and feedback event. This included talking to teachers and teaching assistants, gathering feedback and options, and allowed for some informative contextual user research as we observed teachers using the product.
We began to understand the clinical requirements around speech and language therapy, as well as the practical limitations and realities of deploying technology that had to work in infant and junior schools.
For example, 99% of teachers do not have access to their professional email whilst in a classroom environment. This meant we had to think about how normally simple steps, like password resets, could happen smoothly and immediately in the day-to-day life of a Teacher or Teaching Assistant.
Once we begin to understand the Human-Computer Interaction (HCI) elements of a project, we need to understand the business goals as well. For over 10 years they had won customers (and awards) from around the World. Now they wanted their products to deliver even more clinical and functional value.
Also, as web technology and understanding of the importance of human-centred design moved forward, Speech Link’s directors recognised that they needed an injection of new thinking in order to revitalise their product and help it better compete in a more crowded market.
Finally, we looked at the technical aspects, to understand the problem from a software point of view, as any solution we likely pursued would require an understanding of the existing Speech Link software.
A technical and functional audit of the Speech Link product helped us understand the current state of things and how they got to where they are, through the layers of software development, the structure of the databases, etc.
Defining Success
After the Understand phase, it was clear to us that Speech Link had a goal they wished to achieve and a piece of software that, after a decade of development, was holding them back in certain areas. They now wanted their products to deliver clinical and functional value to their teachers and learners.
To deliver this value, we agreed on and defined the following aims for the product:
- Improve the technical foundations of the site, making them more robust and flexible
- Improve underlying data architecture to make it more flexible
- Improve interface design and usability to enable sometimes inexperienced users to perform complex tasks as easily as possible
- Design a consistent layout and interface toolkit for new features and functions
- Improve the clinical benefits of the products
- Align the products more closely with current school procedures and processes
Working Towards a Solution
We now had six parameters that could work as constraints as we come up with ideas to solve the problem we are presented with: delivering clinical and functional value to Speech Link’s teachers and learners.
Once we understood each requirement or problem we were working to solve, we were able to consider multiple solutions for each. We worked in cycles/sprints and dealt with discrete features and functions in order of priority and when the clinical requirements became available.
For example, the original product had a very complex process for adding learners to small groups for receiving specialised help with a specific aspect of language. Then, once complete, it was equally difficult to identify the next group to add them to.
The process was split over multiple web pages. Teachers needed instruction sheets, videos, training sessions and a help desk to support them. We condensed this process into a single page for each class.
Teachers can now see which language help groups are prescribed for each learner, which groups they have already completed and which they are currently participating in.
On the same view, teachers can create new help groups, add learners to groups, swap groups, and remove groups.
For clinical reasons the groups are recommended to include learners of different abilities, different classes and sometimes different years. We therefore had to add the ability (still on a single view) to add these other learners to the same language help group.
Prototyping
We began building the products with a series of prototypes, through a process that:
- Maps the journey of a staff member or pupil
- Considers how the solution fits into the information architecture
- Considers technical requirements, such as the database or business and clinical logic
- Sketches interfaces, interactions and journeys/outcomes before writing them in code
- Builds features using a design system, back-end, and front-end frameworks
User testing helped us refine the journeys and specific interfaces for staff members and pupils as we developed them.
Speech Link’s Speech and Language Therapists refined their clinical models as the project progressed. As their requirements evolved we iterated on application logic, information architecture, and interfaces.
These therapists also were re-evaluating and innovating the clinical and educational requirements and goals of each feature due to:
- advances in clinical learning and understanding around speech and language issues, and
- changing educational and Ofstead inspection requirements
The design system was refined and expanded as the clinical requirements for different features of the site evolved. New additions to the design system were documented in order to make them easier to reuse in the future.
Validating Our Ideas
When time came to validate our ideas and prototypes, we had three sets of criteria against which to test:
- How does this solution help teachers and learners use the platform?
- How does this solution help Speech Link’s goals and vision?
- How complex is this solution to implement on the Speech Link platform?
Part of the final design, which brought many of Speech Link’s group controls into one easy-to-use page, was one of the prototypes to be validated by this test.
By bringing commonly used features together into one page, and designing them around a logical flow, our new design helps teachers easily sort their learners into the right groups, ensuring that they receive the correct support and help through their speech and language journey.
Whilst the front end of our idea would be easy to implement, it would require some changes to the back-end databases that deliver the information and respond to the actions. These changes led to a more complex database, but one that is more efficient and more flexible, allowing for faster response times by the platform.
Building the Solution
Aligned with our software strategy, we built our solution for Speech Link using open-source software. From our knowledge and experience, we were able to agree on a set of best-of-class open source frameworks that worked in unison for:
- Application development
- Real-time data manipulation
- User interface and layout design
Then we set about rebuilding the product, feature by feature.
To help us execute quickly and identify any problems as soon in the process as possible, we work in a rapid Build > Test > Build environment, where everything we build is tested through our Quality Assurance (QA) process as soon as it is finished. This process allows us to quickly identify any errors or software bugs and remedy them before they cause further trouble down the line.
By working through the solution feature by feature, we are able to create each one as a module, that can be used again and again in various page configurations. This means that there is less redundancy in the work we create, leading to a more efficient lightweight end result.
After each feature is prototyped, it’s time to evaluate the feature and its tests. If all goes well in testing, we then accept the feature, document the technical, clinical, and design information and move on to the next feature. This allows us to work quickly through the proposed features, and gave Speech Link opportunity to reprioritise features when needed.
If testing shows that a feature needs improvement or revision, we’ll take it back and revise the feature. This can happen because the underlying requirements have changed since they were defined or if it becomes clear that the requirements were poorly defined before testing.
On Reflection
Through our Human-Centred Design process, The Familiar was able to deliver a software solution for Speech Link designed around the people who use it most, with respect for the company’s vision, and an understanding of the business goals we were working to achieve.
By helping teachers and assistants deliver the correct support at the right stage in the development of each learner, our idea helps Speech Link in their ongoing mission to bring Speech and Language Therapy knowledge and expertise to every school to help all children reach their full communication potential.
Speech Link hired their first in-house developer role around the time this project began. Whilst their initial role was to maintain the existing application, they were soon integrated into our project team. This means they got an immersive introduction into the workings of the prototype, allowing them to support the new product on an ongoing basis.
We continue to collaborate with Speech Link as their in-house development capabilities grow. This has helped create a smooth product development transition and co-working relationship between their team and ours.
Need help with a design problem?
The Familiar are experts in strategic and practical design, helping you and your business create solutions to your design problems. For more information on how we can help you, get in touch.