MY ROLE, the team & workflow
Before We Dive In: A Bit of Context
Designers don’t work in isolation. An important step for me was to know the team. To get a fair idea, check the diagram, where the arrows depict the information flow.
The Product Owner and/or Business Analyst defined the task requirements and the upcoming priorities, focusing on the roadmap agreed with the leadership.
An initial version (screens or prototype) was created and reviewed with the Business team, Subject Matter Experts, and the Art Director in charge of platform style and branding guidelines.
I received direct user feedback and observations from the UX Researcher. The technical team and Content Managers reviewed the flows and content assets in order to confirm the technical feasibility.
The working model was following the Agile practice, with sprints of two weeks - design always running ahead the development.
BINGEL PLATFORM - STRUCTURE
Bingel DC is a CaaS (Content as a Service) Platform. It is primarily used in Dutch and Belgium markets. The core material is structured in modules called “teaching methods”, each focusing on a specific learning area such as reading, numeric reasoning, arithmetic and so on.
Each lesson offers a variety of individual and group activities, with the number of exercises, level of interactivity, and content designed to fit the typical duration of a classroom session.
You now have an overview of the setup - let’s understand who is this really for...
Meet the AudienceWho I Design For
Personas vs Users
Though many still use those terms interchangeably, truly understanding the difference between them, made me a better designer. While the user is just a person who happens to hold a login account being granted certain role and capabilities within the app - the persona is the representative figure of a group of people who share similar goals, needs, pain points and expertise.
Spending time learning about them helped me grasp real-life scenarios with the problems or uncertainties they encounter - stirring new ideas to implement - leading to better UI choices and an improved UX.
Among the opportunities I had, to learn about the people I design for, the talks with the UX Researcher, Subject Matter Experts and directly interviewing teachers in an event named “A Day with Our Teachers” prove to be most effective. Additional workshops with designers working in other projects of Sanoma was also a chance to gain more knowledge.
Challenge One
Helping the Teacher Keep Control
The exercise teachers avoided due to poor usability - a story on “Wordmaker”.
What is Wordmaker?
This activity contains an image, followed by 3 slots where the children have to place the correct letters which make up the word for the shown image. When the word is found, they could store it in a list and finish by adding the correct article preceding that word.
The reason for which many teachers skipped this one, lies with the amount of clicks one has to do in order to find the right image and/or letters. Example: if you’re looking for the 8th image in a predefined set of 16, it might take you a bit of time. Multiply this by 4, since there are 4 slots in total - the amount of clicking would make one easily give up - before they even start.
The “lock” button acts as a toggle function for “enabling - disabling” the “up” and “down” controls. It is one more click, with no immediate benefit, since the chance of accidently changing the current “item” is slim to none.
First Try - Not Entirely Sold on The Idea
I prototyped an idea - using a horizontal slider to quickly move through the list of images or letters. Though I had my doubts, since it does not give a faine grain control I decided to give it a try anyway. The interaction felt less than desirable - specially when long list of items need to be managed.
At this stage, I also found out, that Figma does not support smooth interaction for a slider that “snaps” to values. Either it could snap to the first or last item in a set or to discrete values by having to click-and-drag every time.
Introducing the "Limited Keyboard"
I decided to come at this from a different angle - still with the goal of reducing the number of clicks required to land on the desired values.
I created the “limited-keyboard” widget for the display. It acts as a group of items belonging to the slot you’re working with at a point in time - giving a quick preview of options available to populate that container.
The feedback on this approach was mostly positive, so I moved into the final design step - refining the interaction.
Hi-Fi Design & Simplified UI
The slot-containers were simplified and become interactables as a whole. If in the previous example the teacher would need to hit the keyboard button of the container they wanted to work with, now it worked by tapping the entire container.
Simulations were ran in-field and both teachers and children seemed to engage with it easily. The big win was teachers having more focus on what’s happening in the classroom, not only on the screen. This final proposal became a top priority on the development backlog.
Challenge Two
Declutter the Narration UI Player
Something as simple as a “power point presentation” - became a thing nobody understood.
How iconography, interactions, visual feedback and UI patterns can miss the target - “Picture book”.
Intertwined Issues
The problem I faced was more than I could articulate in a sentence or a phrase and made me challenge my own assumptions. I kept asking myself: “Is this how it should work?”, “If people are already using it - maybe I am the one missing something”, “What exactly happens here?”.
To find answers, I ran on guerrilla testing - fast, informal and cost-effective. I will breakdown the issues, just keep in mind that “Picture book” it’s not only static images, nor video only material - but a mix.
Guerrila Testing
I Went Asking People and Here is What They Say
Observations I Made Through Benchmarking
It took me additional hours of testing and here extra points I clicked with...
This “toggle button” tries to do too much on its own.
I benchmarked standards for video players and found that the behaviour I observed was not typical of an auto-play feature.
Moving to Ideation
Now that I could better articulate what was happening, I decided to wireframe 3 solution variants highlighting the pros and cons for each.
“Seeing is believing” - My approach offered the business a chance to evaluate options for improvement and their trade-offs.
Version 1
Version 1 consisted of adding captions for narrator voice, keeping the reset button near the pagination (current slide number) on the right and the other options anchored on the left side of the controls bar. The leading control is Autoplay toggle, since it changes the behaviour of the entire slide-deck.
It looked slightly busy, so I was not entirely convinced it’s the best I can do. I gave it another try...(see version 2)
Version 2
Version 2 comes out more balanced - having the video - narration controls and options on the left, while the navigation features are docked on the right. My aim here was to visually decouple the UI concerns - supporting a mental modal which focuses on one thing at a time.
The leading option (“first seen”) would be the play-pause button, which I noticed in the preliminary tests as the first-click intention.
Version 3 - The Winner
Final version gave a more cohesive and compact look by having the navigation controls intergrate the play-pause button as well as the play-head. Caption toggle button follows, while the global controllers like auto-play and restart the story are kept on the right.
When auto-play is turned on, it would offer a visual feedback and progression of the entire story (slide-deck) through displaying the individual segments above the control bar. When is turned off - the segments would fade away.
Wireflow
How It Works Together
Auto Play Feature - Final Words!
Note: Auto-Play should not trigger action (ex. : start / pause / stop the current slide - track).
Warning: By tiggering an action such as starting the track in the current displayed slide - it will give the user the impression “auto-play” is a substitute for play-btn, which is not true.
Note: “Captions” (another toggle for ON/OFF) - is also a flag. It is handling the display of captions.
Vice-versa: triggering an action on current track (ex. : pausing) should not change / influence the “auto-play” setting.
The Role of Auto-Play: It only informs the “global-timeline” how the tracks inside it are handled (sequential or continuous). Auto-play option should be seen just as a “flag”.
Final Result - Before & After!
Final Challenge
Making Pupils Read, Not Memorize
Freedom of choice made “Rowbook” more fun.
What is Rowbook?
One exercise in the reading activities was “The Rowbook”. It contained new words children learn. Those were displayed in a matrix with a minimum of 3 by 3 for younger groups and a maximum of 4 by 6 for an increased level of complexity.
The challenge was to improve how teachers are able to navigate the exercise in order to make the class read, not just repeat outloud a predictable flow pattern.
My First Idea
As a first attempt (and fail) - I tried introducing randomness - giving the teacher an option to shuffle the existing words from the control bar displayed at the bottom.
The idea got rejected by the business. The reason: multiple moving parts only makes the audience loose focus and adds to the cognitive load.
We need something simpler, so the teacher is always able to decide and predict the “next step”.
Let’s Have Another Try
The second attempt got me closer. I presented the option of adapting the navigation flow - at anytime by moving the highlighted word in any possible direction.
Technically it was possible, but in-field tests on this activity shown, that for navigating selected rows or columns, teachers were relaying on the control bar (at the bottom), not the display panel.
Final Re-design - The Solution
My third attempt hit the spot. The words are introduced one by one in the beginning of the activity - for all pupils to have the chance to read or spell them. Once the grid is populated, the teacher can “jump” to the row or column they decide and navigate that entry from the control bar.
The options on the control bar adapt to left & right when going through a row, up & down when positioned at the top or bottom of a column.
Final Thoughts
Conclusions and Lessons Learnt
- Shuffling items it’s good for games, but can easily become taxing in the learning process adding ambiguity.
- Reducing the number of clicks, improved the UX - teachers need to keep an eye on their class.
- Large touch targets were encouraged - making things obvious and easy to find.
- Interactable elements positioned in the lower part of the screen are easier to access by children.
- Feedback provided in visual form, as well as audio - increased accessibility.
- Tolerance to errors / mistakes - the ability to easy recover or have another attempt.
- Graphics and visuals should be kept simple, because leaning into realistic-looking characters distracts from the actual learning.
