Andres Navarro’s UX Design Portfolio

Home

About

Contact

Unleash the digitized brilliance of your planner.

A Digital Frontier for Planners

Welcome to the captivating journey of creating the ultimate digital planner for iPad. This UX case study explores the mission to craft a digital solution that benefits both avid users of physical planners and digital enthusiasts.

Through an iterative design process that lasted 8 awe-inspiring weeks, our dedicated team transformed countless rough sketches and ideas into a polished, high-fidelity prototype.

Prepare to embark on an adventure through planning reinvented, as we uncover the secrets of designing for the digital and physical aficionados alike. Dive into the mind-blowing process that led to the conception of this one-of-a-kind digital planner for iPad.

My Role

For this project I was the Lead UX Designer.

I was responsible for establishing the design system, managing components, advanced prototyping based on user flows, user testing and implementing user testing insights. I often led a lot of the design thinking exercises such as identifying trends and patterns from user feedback, understanding how our product fits into the market, and defining the research questions that would propel our work.

I was also responsible for managing our product schedule, organizing meetings, delegating work, maintaining documentation of our process and ensuring team was in alignment and coordinating our pizza parties :)

Context

Basics

8 Weeks

Intensive Design Sprint

2 Sides

Physical & Digital United

1 Goal

Ultimate Planner Experience

This was a passion project that 5 brilliant individuals came together to make the ultimate planner experience.

Key Deliverables

For the proactive planner, picking between digital and physical planner can be a difficult choice.

Physical planners enjoy the freedom enabled by freehand writing (color coding, drawings, arrows), the satisfying joy of crossing of a difficult task from their checklist, and customizing their planner how they like it. However, physical planners are required to have their planner on their person at all times, meaning forgetting your planner can be a hassel when it comes to remember what their agenda is for the day or even writing in new tasks.

Digital planners like the convenience of synchronizing their agenda across multiple devices but miss out on the freedom and customization options that are possible with physical paper planners.

The project objective is to create a practical digital solution for users of paper planners that reaps the benefits of both mediums while allowing the interface to be clean, uncluttered and user friendly interface.

The Problem

Based on our research, we learned that there would be three main challenges to consider if we wanted to create a product that was viable enough for users to want to switch.

Users Are Fearful And Overwhelmed With Learning New Tools

Some tools have a huge learning curve and the change that is supposed to make things "better" can ultimately slow down progress and inhibit efficiency, because of all the time spent having to relearn things.

Feeling that Digital and Physical are Very Different

How digital planners and physical planners interact with their respective tools can be wildly different and asking them to switch to a different medium requires careful thought with how their planning methods will look like interms of planner layout, interactions, inputs and more.

People are not always fond of change

Users of planners tend to have their own established system that works well for them and having to impose a drastic change in how they do things currently can mean a lot of resistance when it comes to how the new solution. This is especially true when people have committed to a system for several years.

Goal

We want to create a digital planner that has:

An Intuitive and simple UI

We want users to be able to pick up the planner and immediately understand what is they are looking at and how to interact with the planner without having to search for help.

Find a Happy Medium between Digital and physical planner interactions

We want to empower the freedom that users receive with pen and paper (sticky notes, drawings, etc) while still granting users the many useful benefits of having a digital planners (different calendar views, tags, reminders, etc)

make this "change" as painless and possible

We want to consider how users currently interact with their planners, understand what tasks and features are most important to them and make Plan.it's version as similar as possible. We want it to feel natural and like the users are using an upgraded version of their current system.

How might we...

create a digital planner that is intuitive and user-friendly for physical planner users?

Result

A digital planner for iPad that empowers users of traditional paper planners by implementing all their favorite features based on our research.

A lot of these features were designed with understanding the behavior and psychology behind how people interact with their planners. Planners are a highly personable medium and how people use it can vary wildly between different people. Thus we wanted to create an experience that captured some of the great ideas that physical planners used that were not currently possible on most digital planners and decided to implement those in a digital medium with Plan.It

Adding Tasks

Adding task was specifically designed to require as little effort as possible for those who are seeking to jot something down before they leave class. However, for those who are more interested in adding more details were empowered with labels, reminders, descriptions and even the option to schedule a time to work on the assignment!

Calendar Views

A benefit of digital planners is having multiple views of your agenda auto populate. Physical planners can take comfort knowing that they will save a lot of time by eliminating the need to write their agenda multiple times for the daily, weekly and monthly views of their current system.

Creating Memos

Users can add notes to assignments by using the sketchpad. This allows for any last minute notes or ideas to easily be associated with the assignment for later. This was based on our research that showed that some physical planners enjoy annotating their planner with sticky notes

Early Ideation

Timeline

We created an 8 week timeline at our initial meeting to better understand how we wanted to pace ourselves and understand what we would have to do on a weekly basis. At the start of every week, we would debrief our progress from last week, where we are in the bigger picture, what needs to be done and how we want to divide up the work. This was very helpful in keeping us accountable and helped us make a new game plan when things did not go as planned, in other words, we had to constantly shift the schedule to stay on track and I am really glad everyone was onboard with this method of running our timeline.

Competitive Analysis

We started our research with a competitive analysis to see how other products had attempt to approach our problem and understand what their respective strengths, weakness and planning capabilities were for users.

Defining our intended users:

Considering that user of planners can in exist in virtually any environment (employment, education, personal, fitness, financial and more), we chose to focus our early research on college and graduate students that we identified as “Proactive Planners” according to our screening criteria.

Getting Insights from Proactive Planners

We inquired about their organizing habits, usage, and toolset they used on a regular basis. We were lucky to have some participants share actual images of their planners, enabling us to get a deeper dive into their unique planning styles not may not have revealed themselves through survey answers. This encompassed distinctive aspects like using sticky notes, illustrations, and color coordination to aid in handling their schedules.

Notice the time blocking, arrows, checkmarks, color, to-do lists, and all the wonderful organized chaos that is going on in this photo

Affinity Diagram and Persona Creation:

We organized our key insights from the contextual inquiries to better understand our users goals, needs, pain points and the tools they use to plan. This then enabled us to conceptual their habitual tasks based on their behaviors, the screens needed to complete these tasks, and the features that would be on those screens.

Initial Research + Designs

Initial Designs + Concept Brain storming

We started designing using a Crazy 8s exercise and all shared our "screens" with each other to ellaborate on our ideas and get feedback from other team members.

Favorable designs were then digitalized into Low-fidelity wireframes and then we went back to the whiteboard to create a dashboard that would serve as a universal hub to connect all these screens.

We then started building out a few more screens to get a general sense of user flow. In the end we had 16 screens and some screens had two versions, we figured we would allow users to let us know which design they preferred. It was now time for user testing

Testing

This planner went through 2 rounds of testing and 3 rounds of iterating over the course of 4 weeks. The initial testing phase was supervised to confirm that our moderator guide flowed well and covered potential issues unaddressable in an unsupervised remote setting. The final two rounds employed an updated moderator script, modified according to insights from the first round and accounting for the absence of a moderator during user testing.

Testing Round 1

We developed 16 displays for user evaluations to gather insights on areas for enhancement. As our focus was on iPad design, some displays had two versions serving an identical function. We requested users to indicate their preferred displays, and continued with those designs.

This round of testing was intended to provide feedback on our designs rather than asking users to complete any sort of tasks.

Pictures

Insights

We organized our users feedback to understand what they liked about each screen, what they disliked and identified any key opportunities.

While some designs were more favorable than their counterpart, we felt it would be wasteful to scrape the other design. So we decided to look at what users liked about both versions and then merge the best aspects of each screen.

These were the screens that passed the first round of testing and we got right to iterating these designs and moving up to a higher fidelity

Iterating

Of course we wanted to increase the fidelity of our screens so they weren't so black and white, but that meant a few things had to happen:

Establishing a design system.
Our fonts, colors and spacing were all over the place, nothing was consistent so we decided to establish as space themed design system. This is where we got the name "Plan.it" as a play on the world "planet".

Consider interactions.
Since iPads have a touch screen device, we wanted to leverage touch input. We made buttons and text bigger since we do not have the pixel perfect accuracy granted by a mouse courser. We also wanted to leverage touch gestures (drag, swipe, tap, etc.) to feel like this app was specifically designed for iPad

Understanding User Flow.
While we had screens like "adding a task", they were completely stagnant and had no interactions, so we had to put our mind in the users shoes to understand how they expected to "add a task" and what buttons they would press or icons they would expect to see. These smaller interactions were the biggest change between the iterations.

Testing Round 2

Testing round one reveals a lot of insights about the user flow of the application and we wanted to present something they somewhat felt like an interactive app, so this is where we introduced a moderator script that had actual tasks for users to complete.

Pictures

16 screens we tested for round 2

Insights + Iterating

Sketchpad.
Users had a lot of difficulty accessing the sketchpad for a few reasons. First, the sketchpad was not properly labeled and did not have any visual indicators that there was a way to drag the sketchpad up to expand it.

To fix this, we added a draggable card tab in the sketchpad header to indicate that the section was interactive and could be expanded. We also labeled the header "Sketchpad" and moved the time information down below. We also expanded the interaction zone of the text labeled "Type or draw here"

Calendar.
there was a "+" button that was a non-interactive and duplicated button which confused users a lot when it came to the "adding an assignment" task portion of the user test. We also noticed there was no way to go back to the main dashboard after expanding the calendar which meant this resulted in our participants being unable to successfully complete this task

To fix this, I resolved the issue with the duplicate button by deleting it. I also added a dedicated home button to the navigation bar that is accessible from all screens in the application

Onboarding.
We noticed that the onboarding's tutorial for adding an assignment and the dashboards adding assignment screens were slightly inconsistent and this confused users a bit.

To fix this, we ensured that the onboarding was made to look more like the main dashboard's version.

Testing Round 3

I actually single handedly implemented all of the changes between round 2 and 3 by myself and I was proud of my work. I also increased the fidelity of the prototype a bit more in terms of aesthetics and design system.

Pictures

Insights

Calendar View.
There was some weird smart animate layering issues when it came to switching between different calendar views.

To fix this, I inspected each layer individually to ensure this would not be an issue.

Adding assignments.
Users reported that they were unsure if their assignment was saved or not because there was no system message that indicated their input was saved.

To fix this, I added some "saving…" and "saved!" animations to the adding assignment.

Final Designs

Development

Lessons Learned

1. Research and testing involves not making any assumptions— what’s most insightful may end up being the

most surprising.

2. UX design is more than just designing for ourselves.

3. Listening to users helped prioritize which ideas to add, remove, and move around.

4. Investing the time in creating styles and components makes implementing design changes significantly faster.

5. Creating alignment involves listening, consistency, setting healthy boundaries, and having fun when meeting.

Future Steps

This project is far from its full potential but there are a few steps we have in mind to help us get to the next stage

For Next Iteration

1. Add more detailed tasks.
"Example 3" is a decent place holder but in the future I would like to make each assignment more filled out

2. Add an assignment details overlay.
Adding a overlay or pop-up menu the moves in from the side with more details about each assignment as the user click on them.

3. Add External Calendar Sync support.
Users reported not wanted to switch planning apps because their calendars (Google Cal, iCal, etc.) made it easy to

Ready to revolutionize your planning game? Explore the prototype now!

View Presentation

View Prototype