UI UX DESIGNER
JOSEPH SOH

ABOUT ME

ABOUT ME

PROJECTS

PROJECTS

CONTACT

CONTACT

ABOUT ME

PROJECTS

CONTACT

  • REMIND APP

  • •

  • •

Smooth Scroll
This will hide itself!

  • REMIND APP

  • •

  • •

Role

UX Design, User research, Prototyping, Components

Platform

Mobile Application

Type

Case Study

Industry

Productivity

Date

March 2024

I created an app that helps users manage their time based on urgency.

I developed a mobile app to address the challenges busy professionals face in prioritising tasks by urgency. Inspired by the stress and inefficiency of reactive task management, our app categorises tasks based on set criteria, allowing users to easily identify and focus on urgent tasks. This streamlined approach enhances productivity and reduces daily stress, offering users greater control over their schedules. So, I came up with "Urgency" levels.

I developed a mobile app to address the challenges busy professionals face in prioritising tasks by urgency. Inspired by the stress and inefficiency of reactive task management, our app categorises tasks based on set criteria, allowing users to easily identify and focus on urgent tasks. This streamlined approach enhances productivity and reduces daily stress, offering users greater control over their schedules. So, I came up with "Urgency" levels.

Separate your tasks into tags of your choice.

This feature ensures that professional responsibilities are distinct from personal activities, enhancing focus and promoting relaxation. By organising tasks clearly, the app supports a healthier work-life balance, enabling users to manage their daily activities more effectively.

This feature ensures that professional responsibilities are distinct from personal activities, enhancing focus and promoting relaxation. By organising tasks clearly, the app supports a healthier work-life balance, enabling users to manage their daily activities more effectively.

Starting from the heart of the application.

Starting from the core of the application 🎯

Using epicenter design, I started at the core of our app, focusing on essential features like task prioritisation and the visual separation of work and personal life. This inside-out approach ensured that the most critical functionalities were developed first, providing a solid foundation for expanding additional features. This method streamlined the app’s development, ensuring a user-centric design that effectively supports better time management and work-life balance.

🎯

🔬

The science behind the design.

The science behind the design 🔬

In our user interviews and surveys, I initially thought remote workers would primarily struggle with time management and isolation. However, I was surprised to learn that distraction management and a need for both routine and flexibility were more pressing concerns.

These unexpected insights deeply influenced our app's development, prompting us to prioritise tools that help manage distractions by allowing users to customise their daily schedules. This revelation helped us design an app that not only enhances productivity but also supports a balanced and adaptable lifestyle, addressing the real and varied needs of remote workers.

Check out the trends I noted below! [Hover for more information]

In our user interviews and surveys, I initially thought remote workers would primarily struggle with time management and isolation. However, I was surprised to learn that distraction management and a need for both routine and flexibility were more pressing concerns.

These unexpected insights deeply influenced our app's development, prompting us to prioritise tools that help manage distractions by allowing users to customise their daily schedules. This revelation helped us design an app that not only enhances productivity but also supports a balanced and adaptable lifestyle, addressing the real and varied needs of remote workers.

Check out the trends I noted below! [Tap for more information]

Task Prioritisation

Task Prioritisation

Work-Life Balance

Work-Life Balance

Distraction Management

Distraction Management

Routine and Flexibility

Routine and Flexibility

Task Prioritisation

Work-Life Balance

Distraction Management

Routine and Flexibility

Focusing on problems that matter.

Our research highlighted task prioritisation and work-life balance as key challenges. I focused on these to enhance core aspects of time management, improving efficiency and well-being for our users.

👨🏻‍💻

User personas to make my research more relatable.

User personas to make my research more relatable 👨🏻‍💻

Meet Daniel Kim! His persona, embodying common struggles with task prioritisation and work-life balance, guides our app design to address real user needs, ensuring relevance and effectiveness in solving these issues.

👨🏻‍💻

Daniel's problem statement

Daniel needs a way to prioritise tasks because he struggles with deciding which task to complete first and as a result has trouble attaining work-life balance.

🧠

🧠

So, how might we solve his problems?

So, how might we solve his problems? 🧠

Daniel's problem statement

In developing this app, I introduced urgency levels to help you prioritise tasks effectively. For work-life balance, I added color-coded tags to visually distinguish 'Work' and 'Life' tasks, streamlining your daily planning. This approach simplifies managing your professional obligations and personal time, ensuring you can focus on what matters most each day.

Daniel needs a way to prioritise tasks because he struggles with deciding which task to complete first and as a result has trouble attaining work-life balance.

Task Prioritisation

Task Prioritisation

Work-Life Balance

Work-Life Balance

Task Prioritisation

Work-Life Balance

🤔

What are my users thinking about?

What are my users thinking about? 🤔

In designing the user flow, I focused on understanding users' daily challenges. The app guides users from onboarding through a balanced schedule of work and personal tasks, with visual cues and feedback opportunities for continuous adaptation. It's tailored to help users feel supported and efficiently manage their time.

1️⃣ Time management

2️⃣ Work-life balance

1️⃣ Time management

2️⃣ Work-life balance

Microsft-inspired design.

Microsft-inspired design 🎨

My design inspiration leverages Microsoft's vibrant palette, using bold colours that enhance usability and focus. These hues, chosen based on colour psychology, make the interface more inviting and optimally efficient for user interaction :-) These are colours of productivity!

🎨

The moodboard.

I put together a moodboard because let's face it, diving into design without one is like trying to paint with your eyes closed—messy and surprisingly not abstract art!

🎨

Systematic design principles.

Starting with low-fidelity black and white wireframes, I gradually refined the designs into high-fidelity mockups, adding detail and colour to enhance usability and visual appeal. You can't rush success. Success takes time and patience.

🎨

My trusty UI Kit!

My trusty UI Kit! 👨🏻‍🎨

I created a UI kit with empathy at its core, ensuring that every colour, typography choice, and interface element resonates with our users' needs for consistency and comfort. I pretty much just wanted to make my designs pop 😃

H1

23px

Inter BOLD

Line spacing -0.66px

Line height 23

H2

20px

Inter Regular

Line spacing -0.66px

Line height 23

B1

16px

Inter Regular

Line spacing -0.44px

Line height 23

H3

23px

Inter Regular

Line spacing -0.66px

Line height 23

B2

14px

Inter Regular

Line spacing -0.44px

Line height 34.5

Red

HEX

#E1392E

RGB

225 / 57 / 46

Green

HEX

#28A954

RGB

40 / 169 / 84

Blue

HEX

#2F74DB

RGB

47 / 116 / 219

Pink

HEX

#ED7087

RGB

237 / 112 / 135

Orange

HEX

#E56229

RGB

229 / 98 / 41

👨🏻‍🎨

H1

23px

Inter BOLD

Line spacing -0.66px

Line height 23

H2

20px

Inter Regular

Line spacing -0.66px

Line height 23

H3

23px

Inter Regular

Line spacing -0.66px

Line height 23

B1

16px

Inter Regular

Line spacing -0.44px

Line height 23

B2

14px

Inter Regular

Line spacing -0.44px

Line height 34.5

Red

HEX

#E1392E

RGB

225 / 57 / 46

Green

HEX

#28A954

RGB

40 / 169 / 84

Blue

HEX

#2F74DB

RGB

47 / 116 / 219

Pink

HEX

#ED7087

RGB

237 / 112 / 135

Orange

HEX

#E56229

RGB

229 / 98 / 41

Take my prototype for a test drive.

Take my prototype for a test drive 🚘

Take it easy alright! Just click that button below to see how the app works :-)

🚘

HIGH-FIDELITY PROTOTYPE

CHECK OUT

THE PROTOTYPE

REMIND PROTOTYPE

REMIND PROTOTYPE

HIGH-FIDELITY PROTOTYPE

CHECK OUT

THE PROTOTYPE

REMIND PROTOTYPE

REMIND PROTOTYPE

VIEW ALL PROJECTS

VIEW ALL PROJECTS