The Story
This app is part of a capstone project from Interaction Design (IxD) course that I took from Coursera and offered by University of Sand Diego California.
I started my project with this question:
What is our perception of time in era of technology?
Time has become one of the major issues of each individual nowadays, and we have been fighting so long to control. In fact, through past decade, technology and digital world have done so much to defeat time and make our life more efficient.
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 users schedule their event via Google Calendar, Hotmail or Apple calendar. Surprisingly, there was person form new generation who still use a notebook with a calendar, and when I asked her why don’t you 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 the process of 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 users, and empathize with them when it’s needed. I thought we can turn time management and scheduling into more meaningful and personalized 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 creating more anxiety?
Storyboards
For the next step, I created a few storyboards around the topic of ““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 ahead?
Paper Prototype
From one of the storyboards, I created a paper prototype. This helped me to get an actual experience with flow a task in the app. In the following prototype, I focused on a user who wants to create an event for upcoming job interview:
Heuristic Evaluation
In order to have a better usability inspection, I analysed my paper prototype with regards to Heuristic evaluation factors. With help of Nielsen’s Heuristics . I could evaluate my user interface and its interaction design. Ten Usability Hueristics are listed in following link for the reference:
https://www.nngroup.com/articles/ten-usability-heuristics/
https://uxknowledgebase.com/heuristic-evaluation-897bcd3ffcf4
After going through the evaluation, I managed to change a few items to meet Nielsen’s heurestic criteria.
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 rest of the pages , I planned and scheduled a deadline for every single deliverables 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 following chart:
Low fidelity Prototype
I added more pages and details to my prototype. In this stage, I also made the prototype interactive in order to be used for usability testing.
User Testing
In Person
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 user to “Think Out Loud” as they’re performing the tasks. In this way I could also listen to their trains of thoughts 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 possible changes and revised the mockup. In the next stage I continued the user testing process in an online form.
Online
In order to have a more efficient user testing process, I used 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.
Polish and finalize
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 the interactions and transitions were improved based on the feedback.
So, here it is:
Happy Planning!