Plantr-mockup-2-1.png

Planrt | Smart & Thoughtful Planner

Product Design
The Story

Time has become one of the major issues of each nowadays, and we have been fighting for so long to control it. In fact, through the past decade, technology and the digital world have done so much to defeat time and make our life more efficient.

I started my project with this question:

What is our perception of time in the era of technology?
Observing Users

To start, I chose a time-related activity to observe people do their day-to-day tasks. “Scheduling a meeting or creating an event” was the activity. From my observation, most of the users schedule their events via Google Calendar, Hotmail, or Apple calendar. There was a person from the new generation who still use a notebook with a calendar, and when I asked her, why don’t use a digital version, she answered me, “ The notebook is more tangible and I don’t want to be too attached to my phone”.

What I’ve observed from other users was that making an event seemed to be easy, however, the planning and getting prepared for the created events were stressful and complicated. Some mentioned that they’re burdened by a lot of reminders from their personal and work events and reminders.

The Idea

I was looking for a solution to create more humane interaction with the users and empathize with them when it’s needed. We can turn time management and scheduling into a more meaningful experience. I How can we make a simple dentist appointment or an upcoming job interview less stressful and more joyful.

How a calendar/planner can emphasize with users rather than create more anxiety?
Storyboards

For the next step, I created a few storyboards around “Meaningful and thoughtful event planner” to visualize a scenario where users get help from my app. Here is an example of a user who got a “Job Interview” and wants to plan it?

planrt-storyboard.jpg
Paper Prototype

From one storyboard, I created a paper prototype. This helped me to get experience with the flow tasks in the app. In the following prototype, I focused on a user who wants to create an event for an upcoming job interview:

planrt-paper-prototype
Plan, User Flow and Wireframe

I used Adobe XD to create my very first digital mockup from the paper prototype. I started with the home page, but before creating the rest of the pages, I planned and scheduled a deadline for every single deliverable and features Based on my planning, I also created a user flow to have a better understanding of the user journey across the app. Whimsical is a great tool for creating flowcharts, and that’s what I used to create the following chart:

Planrt-user-flow
Low fidelity Prototype

I added more pages and details to my prototype. In this stage, I also made the prototype interactive to be used for usability testing.

planrt-lofi-set.png
Usability Testing

At first, I made the mockup ready for in-person user testing. I defined an interview protocol for myself and created a consent form for users to be confirmed and signed before the test.

I briefed my testers and asked them to go through two tasks, “Create an Event” and “Plan an Event”. I also asked the user to “Think Out Loud” as they’re performing the tasks. In this way, I could also listen to their trains of thought as they’re tapping/sliding on the prototype. I took notes and record videos on a few tasks to better analyze them later on.

I listed all the changes and revised the mockup. In the next stage, I continued the user testing process in an online form.

In order to have a more efficient user testing process, I used the A/B testing method for the online usability testing. I created two versions from the home page and used usertesting.com to send each design to a group for evaluation and getting feedback.

High Fidelity Prototype

I gave my app a name. I’ve been looking for a smart and thoughtful planner, so I called it Planrt.

The very last stage was to apply all the changes from the user testing and other feedback and create a high-fidelity version. The UI elements from color and icons were finalized, and it improved the interactions and transitions based on the feedback.

planrt-Prototype.png
planrt-hifi-set.png
Planrt-onboarding
planrt-UI.gif