Spotlight

"Spark Your Brain!"

Spotlight is an interal platform for all employees in company to spread out their efforts during the project process.

Timeline

2.5 months (Q2 2022)

Platform

Web Design | Concept Design

Team

UX/UI Designers(4)

My Role 🧑‍🎨

Team Lead, User Research, UX/UI Design, User Testing

The Problem

A female employee needs respect for her work in her career/workplace because her teammates don't realize how much she contributes to their project.

The Scope

How might we help a female employee to spread out her consistent efforts to her team during the project process?

Highlight

How it works

Lorem ipsum dolor sit amet consectetur. Adipiscing mus dictum id feugiat magna risus ornare gravida urna. Pharetra tristique vel duis in ipsum sed egestas volutpat. Et penatibus porttitor felis sit. Feugiat nisl porttitor faucibus mi molestie orci vulputate quis enim. Est erat amet pharetra risus dolor vestibulum tortor.

Design Process 🔍

Research

About 42% working women have faced discrimination in workplace. The survey found that, women are about twice as likely as men (42% versus 22%) to say they have experienced specific forms of gender discrimination at work.

Interview

Lorem ipsum dolor sit amet consectetur. Adipiscing mus dictum id feugiat magna risus ornare gravida urna. Pharetra tristique vel duis in ipsum sed egestas volutpat. Et penatibus porttitor felis sit. Feugiat nisl porttitor faucibus mi molestie orci vulputate quis enim. Est erat amet pharetra risus dolor vestibulum tortor.

Affinity Map

Lorem ipsum dolor sit amet consectetur. Adipiscing mus dictum id feugiat magna risus ornare gravida urna. Pharetra tristique vel duis in ipsum sed egestas volutpat. Et penatibus porttitor felis sit. Feugiat nisl porttitor faucibus mi molestie orci vulputate quis enim. Est erat amet pharetra risus dolor vestibulum tortor.

Insights

From our 8 participants, we condensed the initial 216 data points into 13 final insights.

Empathy Map

To know our interviewees mind, empathy map can help me know it in an easy way.

Information Architecture

After ideation, to narrow functions down can help the audience use our website. Here is the structure about each function in text. It's easy to help our design team discuss and reduce the cost of communication.

Paper Prototype

We sketched the best ideas to show their functions. After discussing sketches, we voted to choose the ideas that best fit our design opportunities and research.

Testing

1. Login with the working email.
2. Browse 'reels' and add the most popular one to your collection.
3. Open the most popular one and comment it.
4. Go to 'Help Sessions' and book a mentor.
5. Choose your date and time and register the first event.
6. Go to 'Profile' page and check your collection.

Mid-fi Prototype

After iteration, I use Figma to create the Mid-fi Prototype for each function.

Style Guide

Lorem ipsum dolor sit amet consectetur. Adipiscing mus dictum id feugiat magna risus ornare gravida urna. Pharetra tristique vel duis in ipsum sed egestas volutpat. Et penatibus porttitor felis sit. Feugiat nisl porttitor faucibus mi molestie orci vulputate quis enim. Est erat amet pharetra risus dolor vestibulum tortor.

Hi-fi Prototype 🥳

1.Log In & Two-step Verify

2.Homepage

Lorem ipsum dolor sit amet consectetur. Adipiscing mus dictum id feugiat magna risus ornare gravida urna. Pharetra tristique vel duis in ipsum sed egestas volutpat. Et penatibus porttitor felis sit. Feugiat nisl porttitor faucibus mi molestie orci vulputate quis enim. Est erat amet pharetra risus dolor vestibulum tortor.

3.Post Page

Lorem ipsum dolor sit amet consectetur. Adipiscing mus dictum id feugiat magna risus ornare gravida urna. Pharetra tristique vel duis in ipsum sed egestas volutpat. Et penatibus porttitor felis sit. Feugiat nisl porttitor faucibus mi molestie orci vulputate quis enim. Est erat amet pharetra risus dolor vestibulum tortor.

4.Events Page

Lorem ipsum dolor sit amet consectetur. Adipiscing mus dictum id feugiat magna risus ornare gravida urna. Pharetra tristique vel duis in ipsum sed egestas volutpat. Et penatibus porttitor felis sit. Feugiat nisl porttitor faucibus mi molestie orci vulputate quis enim. Est erat amet pharetra risus dolor vestibulum tortor.

5.Help Sessions Page

Lorem ipsum dolor sit amet consectetur. Adipiscing mus dictum id feugiat magna risus ornare gravida urna. Pharetra tristique vel duis in ipsum sed egestas volutpat. Et penatibus porttitor felis sit. Feugiat nisl porttitor faucibus mi molestie orci vulputate quis enim. Est erat amet pharetra risus dolor vestibulum tortor.

More UX/UI Projects