[EN] UX Design Google Certification Study Case : School Finder Website

Project Overview

For this project, i did generate the project idea from Sharpen. For generating random and fresh ideas from a generator like Sharpen, i feel like it helps me to know what problem that could be relate with people all over the world.

From my perspective, i feel it is a good idea to build a website for finding new school. Come to think of it, there aren’t many school finder website in my area (or even in my country i live now), so it is pretty unfamiliar for me to make it happen and localized it based from where i am from. I feel challenged to actually make it happen.

Here is the mandatory steps i conduct to build the product :

  1. Emphatize
  2. Define
  3. Ideation
  4. Prototype
  5. Test

Emphatize

I conducted user research, divided into different groups of age (18–25 years old and over 25 years old). The primary user are over 40 years old, who already has experience finding school for their kids.

Example of User’s Persona based from the result of the user research.
Emphaty Map of Bowo’s User Persona

The main pain points from the majority of the users for this project are :

  1. Limited school information online
  2. Very basic search engine, so user can’t customize according to their needs.
  3. Not very informative school environment information, leaving for no other choice but to directly visit the school to see for themselves.
  4. Not many information for beginner and younger users to know how to apply and decide for the best degree or school for them.

To understand better of the whole user experience, i did ask of how they usually finding school information. Here is the example of the Persona’s user journey to help to understand better.

Example of Bowo’s user journey.

Define

Based on the result, we decided to build based on the pain points that we found from the research. Here’s our main prioritized to build :

  1. Focus on catering comprehensive information of the school page & various types of schools in Indonesia.
  2. The website needs to be easy to understand, since it will be wide range of users will use the website. It could be under 18 years old up to over 50 years old.

After that, i categorized each of every features on the website, into a sitemap. The web structure that i am gonna be using for this, i choose hierarchical structure. The reason why is to make overall overflow and navigation are well defined, organized and not scattered.

Ideation

After deciding of the basic structure of the web a.k.a Sitemap, the next step is to make the low fidelity wireframe, since it is the most basic and easy to iteration of the design.

Example of Low Fidelity Wireframe, using only paper and pen.

Moving from the Low Fidelity Wireframe into the High Fidelity Wireframe, its the digital version from the Low Fidelity Wireframe before.

Example of the High Fidelity Wireframe for mobile screen size version.

After finishing and deciding the latest wireframe to go, we need to make the prototype. As usual, we start from the first phase, which is the Low Fidelity Prototype. This first phase will allow us to links all the pages and see if our design has good navigation and make adjustment from that.

Example of Low Fidelity Prototype

To make sure of our product are delivering the features well, we conduct usability study from 4 participants. The usability study are being held from each participant’s location. From the usability study, we got 3 findings :

  1. Some pages are not fixed, so it gets messed up when you scroll it up and down.
  2. Users find it hard to go Back or go to the Homepage
  3. The content on some pages are too compact, so it is not easy to read and not pleasant to the eyes.

From the findings, we upgraded and make some adjustment based on that. And after some iteration, we can go to the next step, which is the High Fidelity Prototype or the Mockup.

Example of the result of the adjustment after the usability study.

And here is the whole pages of the website that is already linking up on High Fidelity Prototype.

Example of the High Fidelity Prototype

Accessibility Consideration

Ah, well. Of course, on this project we can’t forget of implementing the Accessibility User Friendly features on the website.

  1. Using color palette approved by the WCAG standard. Pleasant to the eyes, so it will not hurt your eyes or make the text hard to read.
  2. Using alt text in order to have better user experience. Not only the BIG. BOLD. FONT. WITH. EXCLAMATION paragraph all over the pages, but with the friendly, informative description that are easy to understand. We don’t want to give an impression as if we were screaming at you all, aren’t you….
  3. Use website landmark. Since it has a lot of pages and information on the website, we don’t want to make the users have to click all the pages to get the information they need, so we implemented the website landmark to find the exact content you want.

And….here is the website looks like!

Quite proud of this one. I went extra miles by doing lot of research to finish this project, since in Indonesia there isn’t quite a lot of website like this, so i had to make some adjustment to fit Indonesian people needs and characters.

The Takeaways

The reason i wrote this post on Medium, with hope that this will help couple of people to get *inspiration* and insight of how the whole UX designing process will look like. It is not an easy process, i have to admit. But, by challenging yourself to make something that is out of the box, it gains me confidence and a lot of experience with handling something i̶ ̶d̶o̶n̶’̶t̶ ̶e̶v̶e̶n̶ ̶k̶n̶o̶w̶ ̶w̶h̶e̶r̶e̶ ̶a̶n̶d̶ ̶h̶o̶w̶ ̶t̶o̶ ̶b̶e̶g̶i̶n̶ ̶w̶i̶t̶h̶. that you have less experience with.

And also, what i learned from this project, is the whole process made us learn to considering even to the smallest details when designing for more that one screen size. Being attentive with people’s need made us go extra miles to cater all of people’s need, and it is also good for the business as well.

Thank you for reading my case study! I hope you will find something you need from this post.

--

--

--

halftime learner, halftime dreamer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Reflection #1

Reflections on The Codesign Symposium 2017 — Part I

SMART PEOPLE APP — Part 2

Make the experience addictive and interface magnetic.

Sydney platform Sportsyear Engine helps sports fans plan their viewing itinerary

sy_engine_phone_mockup

Lego Build 61 — Quickdraw

3d modeling software for 3d printing

3d modeling software for 3d printing

It’s Time City Streets Match Our Societal Values

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Farah Amelinda Soetrisno

Farah Amelinda Soetrisno

halftime learner, halftime dreamer.

More from Medium

How to Make Minimalist UI UX Designs Better

Case Study: Custom T-Shirt Printing Responsive Website Design

E-commerce Project

Artificial Intelligence for User Interface Design: Auto-completion