top of page

UI
Project. 

Happy Tutor's
Website Creation.

By Irene Chong Ai Ling

ABOUT
THE
PROJECT

ABOUT

THE PROBLEM

Target Audience:
Potential Guardians/Parents 
of Happy Tutor's Students

  Tools:
Figma 

Our task is to create an interactive online forum for HappyTutors, a company offering home tutor placement services. We are required to analyze selected competitors' sites and propose a wireframe and a final prototype for HappyTutors. 

UX Tools: Site Maps , Interaction Map, Wireframe, Mock up and Prototypes

SOLUTION

I have created a sitemap, an interactive map and applied heuristics and principles to create the website. I have also decided to use the colors, brown and creams as brown is considered a grounding, mature and stable color. (I have decided to use an analogous color scheme.)

01

PROBLEM 

STATEMENT

02

SITEMAPS

TABLE
OF
CONTENT

03

04

WIREFRAME, ELEMENTS. APPLICATION OF HEURISTICS AND PRINCIPLES

MOODBOARD AND JUSTIFICATION

05

PROTOTYPE

01

PROBLEM STATEMENT

HappyTutors, a company offering home tutor placement services have engaged you to redesign their online form enabling customers to register their interest for tutors. Individually, create your initial proposal of the online
form meeting the criteria stated on the next slide.

REQUIREMENTS

The form should meet the following criteria…

Captures at least four of the following:
 

  • Requestor's info

  • Subject/s requiring tuition

  • Info on previous results of the subject/s, if any

  • Tutor requirements

  • Preference on date, duration, frequency, etc., if any.

  •  Any other info you deem needed

  • Use at least three different types of input controls appropriately

  • Consists of three to five sections

  • Has a logical flow on the order of sections and questions

  • Is a usable form

02

SITEMAP

Screenshot (2144)_edited.jpg

03

WIREFRAME, ELEMENTS. APPLICATION OF HEURISTICS AND PRINCIPLES

DESKTOP AND PHONE WIREFRAMES

Link to: https://www.figma.com/file/XJ9ihWOH4FXYOZnk4Oxg4X/Smile!-Tuition-WireFrames?t=v3x4FBXTtGCUsRIW-1

INTERACTION MAP
(WEBSITE)

INTERACTION MAP
(WEBSITE)

ELEMENTS
USED

  • Radio buttons

  • Check Box

  • Checkbox Group Labels

  • Toggle buttons 

  • Search Address 

  • Drop Down Menu

  • Buttons 

  • Progressive Disclosure  

  • Text Field 

APPLICATION OF HEURISTICS AND PRINCIPLES

HEURISTICS 

01.

Visibility of system status:

  • Provided a progression bar to allow user know where they are currently at in the completion of the form. Usage of Ticks are to let user know they have completed(Add on to the progression bar as after each step is completed, the progress bar’s section will be colored. 

​​

  • Provided Feedback for Users to let them know if they have successfully completed their form after submission.

GESTALT
PRINCIPLES

02.

Proximity:

  • Should fit comfortably in their mouths and easy to hold.
     

  • Soft Bristles (round ended or “polished” material -->cleans well without being rough on their teeth)
     

  • Overall aesthetics are important to appeal and allow children to associate brushing as a fun experience.
     

  • Emphasis on setting up good oral health habits that would be with them throughout lifetime.

MOODBOARD / UI LAYOUT

Picture6.png

FONTS AND SPACING USED 

Website
Personality

  • Friendly,

  • Open,

  • Interpersonal

  • A touch of vintage meets modern

Headings

Main Text

  • Shrikhand (66,32)

  • Fanwood Text (23, 33 - Modern Serifs)

Using Shrikhand (for a funky and lively atmosphere) with fanwood text (to offer a professional and firm typeface) was the best way to get the desired effect.

 

According to my course materials on Coursera, serifs were employed extensively in newspapers and scholarly writing in the past. Because it is written in one's own handwriting, it seems to be more intimate as well. It also feels a little bit old more old fashioned, a little bit more classical.

TREND AND COLOUR USED 

Picture7.png

All about linework

Gender Neutral Design

2D Illustrations

Picture8.png

Monochromatic Colour Scheme Used

I have decided to use a monochromatic colour scheme as, I wanted to establish consistency in my design. I wanted it to be bold and dramatic while relatively soft and elegant to the eyes.

​

 

It also creates a sense of harmony and balance in my design. As I am not good in my colour theory, I have decided to focus more on the layout than colour matching (as I still have much more to learn.)

​

 

I have also picked the colour brown due to the neutral gender design type and also the meaning behind brown. For brown, it represents Stability, Balance, Dependability, Reliability and safety. (Good for educational websites.)

FIGMA 
PROTOTYPE

*Prototype for website while mockup for Mobile

2 Main Prototype Components

Radio
Button

Check
boxes 

04

MOODBOARD AND AESTHETIC JUSTIFICATION

05

PROTOTYPE

bottom of page