How did StoryWeaver come to us?
Storyweaver is a part of Pratham Books and on its mission to fight illiteracy it uses technology to provide children with thousands of books that are age appropriate and in local languages. Apart from providing its own curated set of stories it also allows a much wider community to create, illustrate and translate their own stories. On its mission to become a truly tech enabled company they have partnered with us to help them on that journey.
This engagement was not the first we had with Storyweaver. After redesigning their entire online presence and introducing features like the offline library and lists it was a natural continuation of a much longer engagement. This time we started knowing that the translation feature had to be improved, but to truly capture what the next step would be, we conducted a design Sprint. On the first day we were able to conclude on the one central question that would define the coming weeks of work.
How might we enable our platform and community to support high quality user generated translations at scale?
Over the course of the 5 day Sprint we decided on 3 key areas that we would work on.
A translation Assistant helping users with meaningful suggestions
Redesigning the user interface to make it scalable
Allowing the community to suggest edits to existing stories
During the Sprint
Storyweaver is blessed with a very active and involved user base. To take advantage of this we organised multiple rounds of user interviews and usability testing to ensure we have a solid concept before starting the product development marathon. In total we were running 4 cycles of prototyping each concluding in a user testing. The results of those interviews were synthesised and built upon in the following cycle.
The Interview Setup involved Screen-, and user recordings making it easier to revert back for crucial insights. In total we had 4 rounds of interviews.
The engagement was time boxed to three months so it was essential to have a solid picture of what needs to be built so that planning could happen accordingly. The conceptualisation cycles helped us to built this picture, so by the time we started the visual design we had a very clear picture of what to built.
Introducing the translation assistant
The data indicated that one of the biggest challenges with translations and user generated content are simple errors such as spelling mistakes and wrong translations, that are either contextually incorrect or age inappropriate. Especially when translating from, or into, non-latin scripts we encountered a lot of confusion when it comes to transliterations. To curb with that we introduced a translation assistant that suggested common translation based on open source dictionaries, as well as providing clues for pronunciation and meaning of the word. Clicking on any word in the original text would open a dialog giving the user opportunities to avoid mistakes and make the translation richer.
We built a multi screen on-boarding processing and went through multiple iterations to make sure the new translation experience is well understood.
After realising the difficulties with introducing this feature in our usability tests, we settled on animated on-boarding screens to make sure users understand how it works.
The translation assistant opens on click on any word in the original.
Building a scalable UI
The interface of the translator had become scalable, so we wanted to overhaul the information architecture to make it easier to understand and less prone to errors. That meant to strip away all functionalities that weren’t essential to translations such as layout adjustments and very advanced settings. The previous layout caused too much confusion as in to where to write what, so after understanding professional translating software and speaking to translators we realised that a side-by-side layout for translations was inevitable.
Translations with non-latin scripts can be difficult as a sentence in Tamil will be significantly longer then its English counterpart only because of the inherent properties of the script itself. That leads to much longer texts and hence layout originally intended for english won’t work. We solved those edge cases by progressively disclosing advanced functionalities for layout adjustments only when they occur
The new side by side layout (right) makes translations much easier and the decluttered layout helps the user find what they they need.
Boosting UGC quality by introducing suggestions
Data showed that user generated content as well as translations often lacked a certain quality that prevented them from becoming featured stories. The vast majority of those mistakes are only small typos and slightly awkward translation that could be easily fixed if the author would be notified about it. It wouldn’t be feasible to leave that task to the Storyweaver team, especially looking at the rapidly increasing number of stories on the platform, so we decided to open this feature up to every reader. That meant that we also open ourselves up to a the unfiltered nastiness the internet can provide. We tested this in extensive interviews to make sure we are minimising the potential danger. We did so by calling it suggestions and disclosing them only to the author of the story or translation. To retain the autonomy of the author the entire feature can be disabled for certain stories and users can be blocked.
From a readers perspective we didn’t want to disrupt the reading experience so we added the suggestion feature as a mode one first has to enter. With that, the core functionality of the site, finding and consuming stories, remained the same. However we added a section on the story detail page as well as on the profile ages indicating meaningful contributions to incentivise users to give quality suggestions.
On the left side a user is giving a suggestion to a translation and on the right side the author f the translation is receiving it.
Shifting towards digital metaphors
As an effect of introducing the suggestion feature to the reader, we also used the opportunity to look at the design of the reader. To make the reader more screen friendly we added a navigation bar at the bottom. The previous reader had the UI elements over the images and sometimes the text which made reading (especially on mobile) very hard.
Opportunities and Learnings
As the new features are being rolled out, the expectations fo the coming months is to see improved ratings for user generated content, more and better translations as well as a more engaged audience.
Looking ahead there is still challenges for the Storyweaver platform such as a mobile experience that enables smooth consumption and even translations on mobile devices.
Including children in the key target audience besides educators and parents opens up more opportunities and questions like how consumption of online content can be done in a healthy and meaningful way by children.
Overall it has been a very positive experience working on something so meaningful with such a positive impact on the life of children.
Go to the site.