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.
The design we have was built by me back in 2012 while I was still in school and a beginner at design work. Responsiveness was tacked on at a later stage, and the process of booking an interview isn’t as frictionless as I’d like it to be. The end goal is a site where parents can go to book their Hilda interviews as quickly and easily as possible.
Indy – Founder of Parent Interviews
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. Particularly, designing the book interview timetables was the biggest visual challenge during this project which I’ll get to soon.
Research and brainstorming
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.
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.
Designing UI elements
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.
To keep consistent with the existing Parent Interviews brand – PT Sans was used across the site for headings. Proxima Nova was used as a pairing body copy typeface.
Keeping inline with the existing Parent Interviews brand, the colours chosen were done so with intent. The UI colours in the bottom row are used through the interface to give it a clean, light feel.
Designing the Book Interviews Timetable
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.
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.
Founder of Parent Interviews
We approached The Apartment where we got the ball rolling straight away. During each design iteration, we were kept informed and in the loop, and the end result exceeded our expectations. We can't wait to work with The Apartment again in the future.