User experience design

User interface design

team: Astrid Sercu, Remco Van Bogaert,
Elias Meire, Brysen Ackx and me

client: Provincie West-Vlaanderen

made during oSoc2017

July of 2017

Snipstory is a webapp where children can discover stories of people who lived in history in an interactive way. After they read the story they can make something inspired by the story and then upload this as a "Snippet" on Snipstory. This project was fully made in one month, this at Open Summer of Code 2017.

What we had to do

Our client wanted us to make a website for children (9-12y) to use in class so that they can learn more about history, but in a fun way. We had to focus specifically on World War I, later this will include other historical events as well. Our client gave us a database with stories of people who lived during the first World War. Our client wanted a lot, but they let us free to do whatever we wanted with the data we got.

“How can we make learning about history interesting and fun for children?”


Our client already went to some schools and tested what kids think about when they hear "World War I". She delivered us a lot of drawings and craftworks the kids made during that workshop. What we saw was that a lot of children drew canons, blood, guns and so on. We know (from stories) that war isn't only people fighting. There are people who help, people who have their own stories within war. This is what we wanted to give to the kids: A knowing that war isn't only guns and fighting, that there are people in war with their own stories. What we came up with (after a week of brainstorming… a lot) is a webapp where children can discover stories of people who lived in history, in an interactive way. After they read the story they can create something inspired by the story and then upload this on Snipstory. This way war isn't only pictures as guns, death and canons. This way children get to know people who lived in war and have a better view on history.

Wireframes and tests

We spend a whole week making wireframes, testing them out with children, adjusting them, testing again and making sure everything worked well for the kids. I personally learned a lot during this week of testing. Designing a webapp for kids is totally different from designing a webapp for adults. Realising children need more guidance, get distracted really fast and work better together. Taking this into account when further designing the app was a great learning curve for me.

testing wireframes 01 testing wireframes 02 testing wireframes 03 testing wireframes 04


Make it fun

Most school websites on history are plain, boring and grey. Therefore we wanted the website to be bright and colourful to stimulate the senses of children and keep their attention with the stories.

Be creative

By having the children create something (a so-called snippet) that fits whit the story they chose, will help them remembering the story without having to study from a book.

Spark an interest

History can be quite boring for children. Having a teacher reading from a book or giving a presentation isn't really a good way to spark interest in history with children. With our concept we want to change that.

Let's work together

Working together is something we want to stimulate with our app. Learning to work together with other people is an important part in life. We saw the children stimulating and helping each other while keeping attention to the stories.

Guidance with steps

After all these tests with children we came to the conclusion that most children really need guidance and structure but without making it boring. Therefore we work with steps on the webapp.

guidance with steps

Choose a person

Firstly you choose a person whose story you want to read.

choose a person

Discover a story

Secondly, you discover the story of the person you chose.

discover a story

Create a snippet

Then you create a snippet inspired by the story you read.

discover a story

Share your snippet

At last you share your snippet on the webapp.

share your snippet

The stories are interesting

The stories are divided in short pieces of text, this is easier to read for children and makes it more interesting.

guidance with steps

The stories are interactive

We slipped in some facts and questions linked to the stories so the children stay focused on the task at hand.

choose a person

The stories are creative

To make it even more interactive we let te children choose which pictures they think fit best with the story.

discover a story

Now revisting this project, I would've handled the design differently. Just changing the UI and branding a little to make it a bit more modern. What I still am proud of though, is the concept of Snipstory, the flow of the webapp and how it came to life. Focussing on children and their experience. Testing and re-testing and again re-testing, until we got to something that worked for them. I learned a lot while working on this project!