Client: DevMountain UX/UI Course work

PROJECT OVERVIEW

When traveling to different time zones with a busy meeting schedule in different cities, it can be challenging to keep up with showing up to the right places at the right time. The design challenge is a calendar flow and interface that is smart enough to suggest meeting times, accounts for changing time zones, and is proactively working for the user to make sure they are always on time for their meetings. With a full schedule and always on the go, the user finds it difficult to manage and create new meetings on the calendar.

WHAT IS THE KEY OBJECTIVE?

Create a calendar planning app that can be processed at a glance. The user will be able to create events in different time zones without schedule conflicts and be able to account for travel in a few easy steps.

Constraint: Solution has to be mobile-friendly for both iOS and Android. Also it has to use current viable technologies.

Timeline:

We had four weeks to complete this task. This included user research, design ideation, wireframing, low fidelity mockups, testing and finally high fidelity testing.

Team + My Role:

Two UX designers including myself and Ted Sneed

The team worked together on research, information architecture, interaction design and user testing.

I believe some of my strengths are in the visual design and prototyping aspects of design. As a team we split up our efforts to complete an iOS and android version. I focused on the iOS version.

Produce a Creative Brief

The creative brief is a important part of any design process because it sets up established goals that can be adhered to when creativity tries to fly away.

During the brainstorming sessions it became that there was plenty of ways to branch out from the normal functions of a calendar, and build an end all be all travel calendar.

The constraints of the brief brought the team back down to earth more than once when great ideas did not fit our primary purpose and time constraints.

Project Brief

The Design Process

Step 1: Build Empathy

During this step we need to find out about our user and discover what it is that they want in the application. A base line persona was provided to start with but we also wanted to design the app for a more broad group of users that would have similar needs as the base user. Further research was conducted to get to know the users more.

Assumptions

When I was first assigned this task I made the assumption that all calendar apps are the same and all have the same basic functionality. Another assumption is that most people just use whatever app they have that came preinstalled with the OS.

Research

To start we looked at several different calendar apps, this included Apple calendar, google and windows. Several lesser known apps where also researched to see if any had features we were looking for. For the most part we just stuck with the more widely used calendar apps.

One thing that became apparent is that they do not all share the same features. The most surprising thing we found was that one useful feature was found on one platform, but not found on the competitors app.

Survey

Google Forms was utilized to create a survey that could sent out over social media and to professionals.

The response to the survey was amazing and a lot of information was gathered from it. The survey was also helpful to see preferences and pain points people have while using a calendar app.

A couple of the big takeaways from the survey

It was interesting to see the breakdown of these questions among the different users.

If you put something into your calendar while traveling do you use the destination time or the your local time?.

It was interesting to see the almost split response to this question with 43% saying they use the destinations time zone.

2. What frustrations do you have with your calendar when you travel?

This reinstated that time zone management was a issue for roughly 49% of the users.

Step 2: Define

All of the information gathered was then used in conjunction with the initial persona that was given to us. The results were focused into a single minded persona that encompassed the project’s baseline needs.

Xtensio was used to create the persona because it has simple templates that are easily adjusted to user needs.

The persona along with some project goals became a guiding force while designing this app.

Projects Goals:

Easily processed
Informative
Clean
Predictive
Professional
Made for the late adopter

Key takeaways from the user were:

The user is always on the go and has a very heavy schedule.

She is a very driven individual with a strong work ethic.
Wants to spend more time doing and less time thinking.

A couple of the key frustrations she experiences are:

Not having enough information on events.
Time changes and keeping up with events.
Creating events that do not conflict with others in a different time zone.

Step 3: Ideate

The design process starts with brainstorming sessions. During these brainstorming sessions we had many ideas. Each session would yield new ideas and concepts that we wanted to include in the app.

based upon the information gathered during research and sticking to the persona and goals we had set up, it was decided to not take a radical approach with the design. Instead, design it so that it was intuitive and felt comfortable for the user.

With this in mind we focused a basic calendar design with added features to help the user create, edit and navigate scheduling in different timezones.

The app was to focus on helping the user accomplish three MVP tasks:

1st: It had to be familiar to the user without a steep learning curve.
2nd: The user should be able to create and easily view scheduled meetings and be able to see what time zone the meeting is in.
3rd: The user needs a way of being able to see what time it is in different time zones to help them schedule meetings that would work for all parties.

Creating a user storyboard is a key way to visualize how the user would navigate through the application. It also helps to list out all of the features that would make it into the minimal viable product (MVP).

User Flow Diagram & Sitemap

One of the goals of the project was to keep the app easy to use and process as much information on one screen as possible.

The research showed that the most common calendar view used were month, week, day and agenda view, respectively. Responses during research were not limited to one choice, since it was likely that no one view could solve all organizational needs.

Month and week were the most favored views so focus was put on those views first.

The user flow diagram and sitemap for the bulk of the project was pretty straight forward due to the nature of calendars.

The flow was modeled after the most common systems, while improving on them to maintain familiarity with users.

Reducing the number of pages and using partial transitions helped to optimize the flow. the idea was that the page flow would proceed from the most used page to the next desirable pages coming next.

Sketching

Since the app used basic shapes a lot of the sketching was done in the sketch app. Both of us worked together during pair designing sessions to come up with the basic design.

Calendar view
Two month calendar view
Calendar with day agenda view
Agenda view
Landscape day agenda view with options
Landscape half agenda view

Step 4: Design & Prototype

Wireframes

A fair amount of time of the team was spent on wireframing. Though the initial design was to be very minimal there were a lot of different screens for forms, settings and menu options that had to created.

I love this stage of the design process because it allows me to creative and see the ideas I have come to life.

Also you can use prototypes in Invision to see how the design would look on the phones and to make adjustments to the design.

This is just a few sketch low fidelity screens we created for this project. Nearly a hundred screens were created to show the different iterations of the screens.

After we made changes to the design, following the wireframe testing, we began work on the high fidelity screens. Colors and the basic look and feel of the app came together at this point.

Multiple prototypes were created in Invision for basic high fidelity testing.

This was done to test:

Individual features
Calendar flow
Menu options
Creating events
Metting planner flow

After about a week of iterations, further research and user testing, the calendar app tested with a success rate of 4 out of 5 users understanding how to use it.

That not to ay there were not any issues. One example of this was that users did not like the look of the floating action button menu, they found it hard to read. Based upon this feedback it was changed to to a flatter looking menu with the items on it.

Principle was used for high fidelity prototyping with micro interactions on the calendar.

Some of these interactions included creating the the sliding and scrolling effects of the different views of the calendar.

Examples include (these can be seen below):

Calendar from full screen to half screen and then to full agenda View Here
The scrolling of the days on the week view View Here

During my time with Principle I learned more about its powerful features to help in prototyping. Learning how to use the time line and animations tools were very insightful.

When you finally see your app come to life the way you envision it is a great feeling of accomplishment.

Step 5: Test

Conduct Usability Testing

Testing is part of everystep of the UX process and it helps to work out any of the issues with the design. The prototypes were taken to random people and asked them complete certain tasks.

These included:

App navigation
Creating a new event
Finding the best time for a meeting in multiple time zones.
Access settings
Viewing current meetings.

As expected no design is perfect and there are going to be users that have issues.

Some first round tests showed that users were not sure how to use the Meeting Planner functions. The whole concept seemed difficult to relay to some groups, but I was able to get some useful feedback.

Another interesting issue that came up was the amount of users that unfamiliar with app calendars as a whole. It was interesting that we did not run into this issue during our research phase but instead experienced it in the final stage.

Conclusion

Calendars are not as simple as you think and the way users utilize them is even more complicated. Some users are very passionate about the use of calendars while others just use what they have by default. In either case the information needs to be presented to the user in a meaningful way.

Once finished, I believe that we delivered on the design goal given to us for the project.

Overall the app worked the way it was designed to work. The users felt it was clean and easy to understand. They liked the features that we had added into the calendar.

Making time zones easily readable on event cards and also showing what time that meeting would occur in other timezones was key to fulfilling the goals.
The addition of the meeting planning page was a powerful tool for the user to easily find slots of time in all zones to schedule or plan for a meeting.

I am proud of the work I have done in this project and it was nice to work as a collaborative team where we could work together to create something useful for the end user.

With further development, further refinement, and the addition of extra features would result in even greater benefits for the user to be even more productive.

Some of these could include:

Links to booking flights and hotels
Places of interests of destination
Restaurant locations near meetings
Tips for coping with things like jet lag

A few powerful insights surfaced during the four weeks given to complete this project:

Time Challenges - Unfortunately, this is the enemy of every project but the UX process is great for helping to tackle the project in smaller parts. While being pleased with the application I would have loved to conduct more testing and further prototyping. I know that most projects are never complete and that is the nature of design, But I believe you should always try to get as close to complete as possible and to always strive for even better designs.
Learning and Practicing New Skills - The need to continue learning and honing my skills became clear fast. At times I was slowed by trying to figure out how to create micro interactions in the prototype. One is never done learning about UX, but with time and practice I believe my workflow can be faster and more efficient.
User Testing and Lots of It - From the moment you start sketching and creating different iterations, user input is valuable. Taking the time for crucial testing can reward the project in many ways. User testing can result in changes to the application that you may not have thought of. It also helps connect you more with the target audience of the app and to have more empathy for the needs they have.

Special Thanks

There is no way I could have done this project alone! My team member, Ted Sneed, was amazing to work with. Check out his work here: Ted on Medium

I believe we built upon each other’s strengths and provided each other with needed laughs throughout the whole project.

Design Toolkit

There are many amazing resources in the UX Designers toolbox. Principle was one of my favorite ones to use. I love learning new software!

Here’s a full list of the technology we used to complete the app:

Pen and Paper, Trello, InVision, Sketch, Slack, RealtimeBoard for Sitemaps, Principle, Google Forms and of course the always valuable, Google.

Case Study: Designing a calendar app to manage meetings