In 2017, Director of Gems Genesis International School come up with an idea to help parents find the best school for their children.

I was part of this ambitious project and solely responsible for working on UX Research, UI Design, Interaction Design, Front-end Development for the tool along with two developers. The overall project duration was 2 months.

To comply with non-disclosure agreement, I have obfuscated confidential information in this case study. All the information in this case study is my own and does not necessarily reflect the views of Digi-Corp.

best school header

Best school for my child is an online tool for parents to compare selected schools and get the best one of them for their child. This tool is a response to the growing need of parents to make a better and informed choice rather than following the herd. The initial beta version was released including domain area of Ahmedabad City's schools.

Tools:  Balsamiq, Adobe Photoshop, Adobe Illustrator, Adobe XD

The Challenge

Fulfilling children's expectations for better education, it is quite difficult for parents to decide the ideal school, most times they end up choosing the school which was referred to them but have no clue about it’s system and facilities.

The challenge was to create an user friendly tool that can satisfy parents' problems by questioning them and let them rate each school with different values. Each question contains information about various facilities that school provides to the children, that way they can compare schools and get the best one at the end as a result which they can share with other parents.

The Approach

The best school for my child was initiated with the concept of User-centered design(UCD) & Mobile-First method. I followed the most efficient design process but instructed to spend limited hours on research. Parents are going to be the main users, so we started collecting information about parent’ demographics.

best school process
Early Insights

We interviewed 4 parents including stakeholders to get their views, goals and expectations from the initial idea of the tool in order to collect maximum qualitative and quantitative data. Here is the summary of key findings and comments by users which was prioritized for the next phase.

best school interview sumamry
best school persona
The Discovery
Deciding Key factor

Before I could jump into further research, it was important to define success and understanding of user’s views on the rating system. Something out of the box that matches the school theme at the same time there should be no compromise in user interaction affordance and feedback. After detailed research and discussion with developers, we end up finalizing below types of interaction for ratings.

best school ratings

Again we involved parents to decide which one will be the most suitable interaction for them by asking them a series of questions and most surprisingly they chose tap-based emoji as their favorite interaction rather than numbers and stars. Reason was that parents expect the process of choosing the school to be less intimidating and should be fun while interacting.

best school pie chart
Aligning with Goals

Based on the data we collected from users and stakeholders, I’ve created a mood board to make sure I and stakeholders are on the same page in terms of visual aspects. Before getting hands-on the UI, validating user flow and Information architecture is important.

I have intentionally omitted confidential data here.


best school moodboard

User Flow

best school user flow
Wireframing & High Fidelity Prototyping

I started creating wireframes using the Balsamiq tool from the final user flow and information architecture. Since it was the mobile-first approach, all the UI components were created in the mobile version only. We want parents to get to know about the tool first and then experience it, so I dividing information documentation and button actions into sections according to the priorities.

best school wireframes
Validating Responsiveness
best school responsive images
UI Library
best school user interface
Interactive Emojis

Initially, I started with a simple set of emojis which I modified later to make it more intuitive and aesthetical to pop up in the UI. Also, there are 14 different questions and for each question, labels are quite unique which requires different kinds of expressions from each emoji.

best school emoji library
best school video gif

In desktop, the labels are horizontally situated and while hovering/selecting emoji, the size increment was 1.3x with appropriate defined colors.

best school help question gif

In mobile, the labels are below the emojis & a button kept next to the question in case parents need more information linked to the article page.

Design roadblocks and learnings

I started front-end coding for quiz pages first as it was the MVP and then created marketing pages. Most pages uses the propeller framework which was developed within Digi-Corp. However, this was my very first project where I learned how to code structurally and document them for devs instead of following my own methods. Below are some challenges that I faced during the development:

best school learning

Five different emojis for five different schools were difficult to add on a screen, so, I decided to keep emojis commons on the side to reduce complexity & implement the mechanism where choosing the value for one school the cursor automatically switches to the next school.

best school learning

Emoji are interactive so it was rigid to use the .jpeg/.png files. Also, while hovering or selecting they were supposed to change colors. I used the SVG file format where I edited them using CSS and applied color accordingly.

best school learning

After the quiz on the result page, parents get a detailed report of their ratings as a .PDF for sharing which was supposed to be standalone file. I created a detailed structure only using table tag and it’s subtags with no external stylesheets or js.

best school learning

Choosing SVG emojis gave me a lot of freedom in terms of a CSS style and resizing the shape according to the screen resolutions. However, some emojis do not contain the same resolutions so for that I have to decide fixed paddings to keep alignment consistent.

Final Designs

best school phone user interface
best school desk view
best school ipad view
What I Learned

  • Keep users first, no matter how much we assume about requirements but it’s not always the same as what users are expecting. We guessed before the user interview to implement a star based ratings which will be useful but turns out to be a different thing later.
  • I was not aware of how to create animation in photoshop until I was given a task to create an animation either using css or photoshop.
  • Simplifying and grouping similar objects helps to reduce design clutter/complexity from the User interface.
  • Working on full front-end code, making changes back and forth & handling it to the developers taught me how to write code efficiently.

Check The Best School For My Child live.