Parent Interviews

Full2 Copy

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

Mobile
Some final mobile designs

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.

Visual Library Board
Mood Board

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.

Input Fields
Input Fields UX

User Flow

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:

 

Empty state
Empty State

 

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.

 

Detail Windows
Exploration for detail windows

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.

Typefaces
Typography style guide

Typefaces

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.

 

Colour
Colour palette

Colour

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.

 

Interviews UI exploration
Timetable exploration
Final Interviews
Final timetable design

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.

 

Full1 Copy

Final Design

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.

 

Indy Griffiths

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.

Visit Site

PROJECT DETAILS

Client: Parent Interviews

Start Date: 21/11/2015

End Date: 21/12/2015

Services:

  • Web design

Visit the website