Maoz

UX/UI Design, UX Research

Introduction

'Mauto' is a web app that makes the optimal candidate-reviewer sorting and assigning for Maoz organization using an especial custom algorithm. Maoz is a non-profit that acts to encourage leaders from all population groups to integrate social and environmental interests into their initiatives.

My Role

UX/UI Design, UX Research

Dates

Jan. 2020 - Mar. 2020

Tools


Figma

Challenge

A group of Computer Science students asked for my help in identify and analyze their customer's needs to create a full experience for the users and an enticing interface for their final project web-app.

Creating an optimal balance in the candidate-reviewer-class matching (referred to it as a session) was not an easy task for Maoz employees. They would usually describe this work as playing a tricky Sudoku game with multiple excel sheets, hand notes, and printed data. These game usually took them about half of a day on average and was all done by hand.

While using this Non-optimal matching system Maoz employees had received a lot of user feedback, stating that most of the candidates felt discomfort with the group they were assigned to, making it harder for them to express their full potential.

Leran more about maoz

Maoz is a non-profit organization which acts to encourage leaders from all population groups to integrate social and environmental interests into their initiatives. They strive to achieve this by creating a network of leaders from all population groups and sectors of Israeli society, in collaboration with Atudot Le'Israel, that builds trust among decision-makers and creates changes and multi-sector solutions for citizens and systems in four core areas: local governance, health, education, and employment. In order to guarantee a network consisting of the best and most qualified leaders, Maoz’s admission team acts to recruit diverse, high-caliber candidates who have the potential to lead socio-economic change in Israel. For more info see their site.

Less about maoz

Project Goals

1
Shortening candidate-reviewer-class matching and sorting time
2
Creating an optimal candidate balance & diversity in the exercises and interviews as possible
3
Improving candidates' experience
4
Presenting the exact diversity rate in each parameter

Research

After hearing my new team members’ problems and difficulties, I had concluded that their struggles were caused by a lack of knowledge, resulting from defective research. Therefore, before diving into their proposed solutions and designing the UI, I encouraged them to reconduct the research phase together by doing more stakeholder and user interviews.

Key focus areas

Which parameters the algorithm needed to take into account?
What are the stakeholders' critical success factors for this project?
What are Maoz employees' needs and unmet needs?
How many people are being sorted at each stage?
How long does the whole process take (the exact hours)?
Describe your current Excel file format, are there many spreadsheets or different files?

Core customer needs


The need for statistics
Before this project, there wasn’t accurate data about the sessions at all, which is an essential requirement for an organization that diversity is their calling card. For example, there wasn’t an exact representation of the diversity rate in each category.

The range of sessions’ data
The number of classes in each session ranges from 2 to 3, of candidates from 14 to 21, and of reviewers from 14 to 21.

Flexibility is the key
Although the algorithm, which our team will develop for this project, is expected to have a high level of accuracy, users must have the ability to change the matchings session at any moment in the process due to its dynamic nature.
The expected behavior of the algorithm
We characterized together with the client each category, their parameters, and the connections within each one of them, in order to achieve an optimal balance.

After we finished this project, I  conducted more user interviews to refine the design and iterating the UI for learning purposes.

Initial Sketches

Before moving to Figma for designing a high-fidelity prototype, I've started by sketching designs to see what ideas I can come up with.

Mini-Design System

I had created a mini-system that allowed us to quickly access the exact font styles used across the site. Though it would be small, my mini-system would empower us to focus on the experience and usability, rather than having to guess at colors and font styles.

Typography

The slightly rounded edges of Rubik typeface make it unique and fun to use while keeping things classy and sharp. Moreover, Rubik supports both Hebrew and English letters, therefore if will be needed, this web app can be easily translated into English in the future.

Rubik
א ב ג ד ה ו ז ח ט י כ ל מ
Aa Bb Cc Dd Ee Ff
0 1 2 3 4 5 6 7 8 9
! @ # $ % ^ & * ( )
H1
24px bold
H2
18px Medium
Buttons
16px Medium
Paragraph text
16px Normal
Small text
14px Normal

Colors

Primary and grays

This color scheme was inspired by the Maoz brand and website color scheme.

Light Blue
#6699FF
Very dark blue
#002E52
Darkest blue
#222241
Black
#000000

Secondary colors

Alongside the primary and grays colors, I've added eight more colors to represent the categories' parameters while using red for error state and green for success state.

#EB5757
#FC4470
#EC61DE
#C54AFF
#02A4FF
#56CCF2
#07DE37
#FFCA28

Icons

Buttons

Candidate / reviewer Card

Nav Item

Dropdown Item

Class Component

High-Fidelity Design

Keeping users’ needs and pain-points in mind, I settled on a final version of the design, creating a high-fidelity prototype.

Creating new sessions never was so easy!

At first, Maoz employees will upload or drag an excel file, which is in a format Maoz’s members agreed upon, to the drag and drop area, and then, they will insert the metadata about the session like date, plan, and the specific time. Each session includes an exercise part and interviews part, each part showing the division into classes created by the linear programming.

Sort session by category

Maoz employees can choose a category to sort by, such as gender or sector, in order to see how diverse or balanced the session is per class (in percentage). Each person's card's bottom border is colored correspondingly to his or her belonging to the category's parameter.

See conflict of interest

A yellow dot will appear on a person's card to indicates the conflict of interest with at least another person in the session. Maoz employees can click this yellow dot to see the acquaintances that have a conflict of interest with this person. That was a primary feature that Maoz wished to see at a glance.

Make changes in the session

Maoz employees can click on a person's card to see more information about that person like gender, group, or phone number. Also, they can manually change the matching by dragging a person's card between classes. But if the new matching will create a conflict of interest, an error message will appear.

User Testing

In order to make sure that our solution is suitable for the user's needs, we tested the web app on 4 representatives from the admission team.
We asked them to simulate 2 different sessions, given that each session included scheduling an admission day.

We found out that:


The representatives were impressed by the quickness of getting a good and balance matching and expressed their satisfaction from the visualization session view and the ease of making changes.

The representatives want to display the class arrangements in the meeting room when the admission day occurs. To answer this need, we added the ability to print the output of the exercises and the interviews to will easily display this information.

Learnings

The importance of asking meaningful questions through the process
In the beginning, the team thought about creating a web app with a linear programming algorithm without trying to get a deep understanding of their users' problems or needs, which caused most of the difficulties they had experienced. After I had joined the team, we reconducted the research phase together, and I immediately noticed the difference in their perspective about the importance of this stage and their growing confidence in the product.

Thank You

I want to say thank you especially to Tali, the representative of our development team, and Nissan, the representative of our client, for being thoughtful and cooperative teammates!

I’m grateful for your feedback throughout the process and the supportive environment. I believe we had created such an incredible web app, and I happy to know that I could help an essential organization like Maoz.

Oneshot web app

view project