HomeProjectsAboutContact
   
View projects  

Pobble

UX, UI, WEB

Pobble makes writing exciting for children by allowing them to proudly show their written work to a global audience.

It allows teachers to moderate pupil's work online with colleagues and find resources for teaching lessons.

Overview

As the only product designer, I worked on the whole user experience design process, including user journeys, wire-framing, mock ups, full user interface designs, prototypes and handoff to the developers.

In my time at Pobble I designed around 10 new platform features, which have launched with a positive impact on Pobble's progression.

Workview

Children using Pobble in the school can proudly publish their written work and share it with other children & teachers around the world. A teacher can publish several pieces of work each week written by their class.

I redesigned the old Workview section to allows users to read an overview of the author, view comments and leave their own, all whilst still being able to see the written work on screen.

The previous version

The work was at the top of the page and the information and comments were down below, meaning on pages with long photos of work and a lot of comments users wouldn’t be able to see the work at the same time as leaving a comment. This can be especially problematic for younger children when wanting to comment on work.

From here it was redesigned (as seen above) to allow the user to see the work, information and comments all on screen at once. This makes it easier for the user to refer to the part of the work they are leaving a comment about.

The new sidebar

The new sidebar contains an overview of the work.

By default this only shows the author, age group, title and description. On expansion the school, upload date and tags are revealed.

For the comments section the speech bubbles were given a fresh look. Adult comments are represented by a dark blue bubble and children's by a light blue bubble. If the author leaves a comment their bubble is flipped and coloured grey, making it feel more like a conversation, as seen in chat interfaces.

A flag is shown alongside the comments date. Pobble has schools all over the world and pupils get very excited when international users leave comments on their work.

Anas Alaoui
Senior Front-End at Pobble

“I really enjoyed working with Josh, he was a brilliant designer. He consistently went the extra mile with setting out every detail that that we needed at Pobble.”

Moderation

The Moderation feature of Pobble we created allows teachers to assess and moderate pupils writing against the criteria set by each School. Users can now even share a piece of writing with other teachers in their School allowing teachers for the first time to moderate work online from their own home after work.

Users can moderate either against each criteria generally in the sidebar or, by dragging and highlighting excerpts of writing, they can link the highlighted area to a criteria on the sidebar.

Moderation sidebar

Built upon the UX foundations created for Workview, the Moderation sidebar expands the functionality some more.

Only teachers have access to this view and only teachers invited by the original uploader of the work are able to collaborate on moderating the writing.

A user can generaly Tick or Cross against each bit of criteria rating the child's works. Once rated the user is allowed to leave a comment.

Resources

Pobble were looking to help teachers throughout the entire lesson process from preparation to delivery. With this in mind we built a new Resources part to the platform, allowing teachers to quickly find teaching resources from a wide pool of suppliers in one place.

We hand selected a multitude of education resource providers for teachers to choose from, which they can add to their lesson builder and display to their pupils.

Brainstorming

Resources was a whole new project, we built from the ground up.

We added a sidebar with filters to enhance the power of the search. This allowed users to filter at a high level which resource provider they want to search within, with a more detailed set of filters opening up for each high level option.

We also created cards to show off each teaching resource link, whilst also displaying useful information on the card for teachers.

Sign Up/In

Pobble has three main types of users. Pupils, Parents & Teachers. Pupils have a separate sign up/sign in flow already but Parents and Teachers sigh up flow was too basic and the same as one another.

We needed to create better initial sign up/sign in flow for teachers so we could differentiate them from parents and assign them to the correct school with teacher permissions instead of just a standard account.

The Previous Version

I updated the layout and asked the brilliant illustrator Dan Benney to create a set of illustrations that would hug this page. We had around 4 different illustrations which would change for the user each time they returned to sign in.

The main issue with this page was Parents or teachers would sign up using the same form resulting in a lot of manual backend work to move a teacher over to a teacher account for their school.

New flow for Sign Up

I redesigned the sign up flow into a single adaptive modal that changes size in height, depending on the step the user is on, as well as adding in additional steps for the teacher to take when signing up, saving a lot of admin time behind the scenes for the Pobble Support team.

Step 1: Choose account type

By clicking ‘Join today for free’ on the Sign In modal the Users are now presented with two options. To sign up as a Teacher or a Parent.

Once the user has selected the type of user they will be signing up as the modal splits into a different flow for each type.

Step 2: Basic Account Information

It begins the same for both but depending on selection from the previous step we display either the Teacher or Parent banners at the top of the modal.

Once they have filled out the basic information and created a password for their account on the next step the flows really split.

More info below.

Step 3: If a parent

If you are a Parent then all you need to fill out is the basic information and you are done.

This screen basically confirms that and clicking the main CTA takes you into Pobble and completes the accounts creation.

I mainly created this screen to serve as a reminder to a user that might have incorrectly selected parent when they were in fact a teacher. By clicking ‘I’m a teacher’ they will be taken into the flow the teacher would be on.

Step 3: If a teacher

If you are a Teacher the next step is to locate your school on the Pobble system.

Every step of this process will have a link to get back to a parent account if the user clicked into the teacher flow by mistake.

Finding your school

A teacher starts by searching for their school. If it appears in the list then it means other teachers in their school are already using Pobble and they can simply select it and be added to that school.

Narrowing results

As there are a lot of schools, with similar names in the world, we decided to build in a location based filter for the search results. This allows users to search school names within a radius of their choice based on their current location.

Finally if the users school is not yet on Pobble they can click ‘My school is not in the list’ and get their school added once verified by the team.

Final words

I had a great time working at Pobble, it was interesting creating user interfaces for younger audiences, parents and teachers all in one shared platform.

I got to work on the UX and UI for a vast range of features from Work View, Resources, Lesson Planning, Lesson Sharing, Work Sharing, Moderation, Classroom Management, Image Uploading/Editing, Sign up/Sign in and even the marketing website design.

Have a project in mind?

Fill out the following form and lets work together.