Parent Interviews is a New Zealand based online parent/teacher interview booking system. First created in 2012, Founder Indy Griffiths designed and built the system with what knowledge he had of design from High School. Fast forward 3 years and Indy felt that the Parent booking site of the system needed a fresh new design.
Indy wanted to prepare the website to market it overseas in new markets. To do that, he knew that a fresh, frictionless and responsive design was needed to maintain his competitive advantage. The challenges for this project was to maintain a simple and functional design that was easy and enjoyable to use.
The final design is friendly, easy to use and frictionless. Users are presented with helpful tooltips that don’t cloud the experience but provide just enough hand-holding along the way.
Call to action empty UI states have been implemented to guide the user along and confirmation states ensure that they are aware of their actions. Responsiveness for both tablet and mobile was also designed so parents can book their interviews on the go.
Through my research of the existing design, there were immediately a few areas for potential improvement around the user experience. Students couldn’t be edited, the tool tips were quite intrusive and confirmation buttons wouldn’t appear until after something had been selected.
I wanted to keep the experience clear, clean and friendly. To do that, I decided I would instil some friendly personality (eg. Success! or Oh no – that didn’t work).
After creating a visual mood board, I began sketching a lot and considering a new visual language as they existing one lacked some branding identity. While I kept in line with the existing brand guidelines of Parent Interviews (colour, typeface etc), I also decided to bring in some additional secondary colours and icon style.
User Experience Design
In the old design, once the user logged in they were greeted with the Book Interviews page with no clear action as to what they were required to do.
In the new design, the user is now greeted with an empty state Book Interviews page and a clear call to action to add their student(s). This helps guide the user by giving them a call to action of what to do next.
While in the above use case an empty state can be used to encourage the user to perform a task, it isn’t always necessary to have empty states. When designing the My Timetable section (an area where the parent can see which interviews they have booked and when), I started by including empty states for when Parents didn’t’ have any interviews. For example:
However I decided that this was impractical as the empty state doesn’t serve any purpose or have a call to action. It just ends up taking space and causes the parent to scroll more to find the information they’re really looking for. I decided to take these out to avoid confusion and just focus on displaying the information the user really wants to know and making it quick to access.
I decided to add a notification center so that the user would be notified of any updates to their interviews (cancelled, time change etc). Keeping with familiarity, I used the standard alert bell and red notification so that it would be easily identifiable and understood.
To create a consistent feel throughout the site, I explored new UI states as part of the visual language. This included input fields with dropdowns, errors, success and error tooltips as well as button and hover states. I continued exploring the style and trying different layouts of how the UI elements could be applied.
When designing the Book Interview timetable – I went through quite a lot of variations in layout and UX before coming to the final option. There were quite a few challenges in coming up with a design choice that not only supports viewing multiple teachers, but also multiple days, times and students.
A style guide including colours, typography and form rules was created to make the development process easier and provide Parent Interviews with some styles that they could apply to other parts of the business if they wish.