Luis Uribe
UX Designer
Made with

Cario: the calendar
that helps you decide what to do

Case Study - December 2019

Design Process

My Role: UI/UX Designer 

Duration: 2 Weeks

Team or solo project?: Personal solo project 

Tools & Devices: Figma & Photoshop

Context

CARIO (a play on the Spanish word “calendario” which means “calendar”) is a proposed fun and practical to use calendar app that would also facilitate and enrich going out. The app would have an optional survey feature that can help you decide what to do; it's a fun two-in-one app.

Key Objective/Problem

The problem is that many people sometimes struggle coming up with what to do when hanging out with their friends and CARIO aims to help that. You can use CARIO as a standard Calendar app, or you can do a quick three-question survey that will give you an idea of what to do that day. The beauty of having the survey feature is that it allows users to get an idea, and then put it down on the calendar portion of the app. Both portions of the app work synchronously. The inspiration for this app came from personal experiences where my friends, family, and I all have stumped around thinking about ideas for us to possibly do that day.

Step 1: Research
*A glimpse at the form I created

*A glimpse at the form I created

Surveys

I decided to start a survey first and ask people some questions regarding good calendar UX and what their thoughts were on my idea. My target demographic was calendar users. The Google Forms survey was posted on my social media and a good modest amount of 15 users responded.

Surveys (cont.)

Since I wanted to understand what calendar app users require of such an app, I had this question as one of my most important to look at: "What is REQUIRED for you to use a calendar app? (Select all that apply)". Without further ado, here are the top three answers for that question (with the percentage of survey takers who answered):

"Nice looking and easy to use UI"
(100%)
"More than one calendar view"
(93.3%)
"No/little learning curve"
(73.3%)

Surveys (cont..)

And since I wanted to see if people were even interested in this concept, I asked: "This app would be a calendar app AND an events app that would help you decide on what to do that day. Would you try an app like this?" And the survey responses showed that:

73.3% of users who took my survey would use an app like "Cario"
From my Google Forms survey

Personas

Based on the responses from the survey I decided to create two personas inspired by them. Keep in mind my survey's first question ("What do you use a calendar for?") was also taken into account.

Cario: The calendar that helps you decide what to do

Personas (cont.)

What I learned from this persona:

Give people simplicity; tools that make their life easier

Cario: The calendar that helps you decide what to do

Personas (cont.)

What I learned from this persona: Give users some customizability when you can; people love expressing themselves


Step 2: Design

Information Architecture

I decided to map out the layout of the app digitally first before doing a mockup of some sort. Right below, you'll see my layout plan.

Cario: The calendar that helps you decide what to do
Notice the poor placement of icons; we'll get back to that soon :)

Notice the poor placement of icons; we'll get back to that soon :)

Low Fidelity UI Design

After doing a few rough sketches on paper, I decided to do my further brainstorming digitally and constructed this design to the right. 

I also had a question that basically served as an extra comments field and one respondent said that they like seeing progress bars in surveys; I ended up using one in my final design thanks to them!

I also had a question that basically served as an extra comments field and one respondent said that they like seeing progress bars in surveys; I ended up using one in my final design thanks to them!

Low Fidelity UI Design (cont.)

My original survey design was intended to be one where each question would load once completed. However, since I didn't actually know what type of survey format users preferred, I decided to do another quick survey with this question at the forefront:

Interviews

Nearing the end of my discovery phase, I asked my father and my good friend Carlos Gabriel Godina (his LinkedIn) to look at my first design iteration (after explaining Cario to them) and to tell me what could use improvement. I interviewed them because they both use calendar apps. The interviews consisted of me running through some questions about the design with them. Some of the questions included: "Can you tell what this app is for by looking at it?" and "what do you look for in your calendar apps?". Anyhow, my dad told me that the design was too 'flat' and that I needed some more depth in the design if I wanted to keep an individual color as the background. As for Carlos, he told me that the survey icon (the lightbulb with the '!' on the top-right) was too small and confusing for it to be such a key feature. Needless to say, this put me back on the drawing board and made me write some notes regarding what to implement on the final design. And after careful consideration, I started to design some low-fi iterations and came up with the final iteration.

Final UI Design
Cario: The calendar that helps you decide what to do
Cario: The calendar that helps you decide what to do

Final UI Design - Home page

*I will go over some of my screens to explain my design decisions starting with the home page. 

Design Decisions: 

  • Designed an aesthetic but simple to use UI. The purple color theme represents creativity which goes with its function: an app that is designed to help you come up with events while using an easy to use and nice-looking calendar

  • Took my dad's depth design considerations from my interview with him and decided to add depth to the top and bottom navbars to make the separation between them and the calendar clear

  • Took Carlos' advice and added a clear label to the 'event helper' feature

  • The italicized '2' indicates the current date, the red circled numbers represent user-inputted events, and the numbers in the blue circles represent holidays

  • Swiping left or right would take the user to another month in addition to the top-left button

Cario: The calendar that helps you decide what to do

Final UI Design - Upcoming Events

Design Decisions: 

  • The 'Create Event' and 'Event Helper!' buttons stay present when a user swipes this navbar up from the previous screen above

  • The calendar itself would be responsive and shrink to a size where it can still be seen when the bottom navbar gets pulled up

  • The arrow below the 16 in the red circle at the bottom represents an indicator telling the user that another event is scheduled that day

  • "End of events." label at the bottom is set there to make the user experience smoother

  • *If this person had more events scheduled, an indicator to 'swipe to see more events' would be present instead

Cario: The calendar that helps you decide what to do

Final UI Design - Create Event Page

Design Decisions:

  • I made sure to add enough context to features by using labels and symbols to represent their meaning

  • User can select event color to differentiate between events more easily

  • If no end date is required for an event, the end input-field would remain grayed-out


Cario: The calendar that helps you decide what to do

Final UI Design - Settings Page

Design Decisions:

  • Gave users some theme options (if this app were to launch for real, more colors would be considered), the 'dark mode' option, calendar view option, calendar import feature (Add new account), and other necessary features.

  • Put a home button icon for a quick transition back into their calendar if desired (swipe gestures that are default settings on their respective phones would work to go back as well)

Cario: The calendar that helps you decide what to do

Final UI Design - Alt Home Page

  • Tapping the 'Event' button at the 'Calendar View' option in the settings page would give you this view

  • Scrolling up or down anywhere on the calendar canvas would move the calendar up and down dates

Cario: The calendar that helps you decide what to do

Final UI Design - Survey Page (start of the survey)

  • I'm showcasing a completed survey to give the full picture but essentially, further questions would depend on previous answers

  • A user would be able to go back to previous answers and switch them which would erase all the questions and answers after it and give them a new question to answer

  • Progress bar to give a user extra confidence in completing the survey

  • Scroll icon on the bottom right that gives the user more context in terms of how the survey layout works

  • Answers have a blue circle next to them along with italicized text to make them visibly clear

Cario: The calendar that helps you decide what to do

Final UI Design - Survey Page (end of the survey - 1)

  • The bottom-right 'scroll' indicator disappears when a user scrolls

  • When a survey's done, a further card displaying the survey's recommendation/answer would be shown

Cario: The calendar that helps you decide what to do

Final UI Design - Survey Page (end of the survey - 2)

  • Clicking on the green text would allow you to search the answer and the red text would allow the user to start a fresh new survey

Final Reflection

What I could have done better

While I'm pretty happy with this project, I think that I could've done some further interviews with the same people I interviewed earlier (or even other people) after my final UI iteration. While I did show them my final UI design, all they said was that "it looked pretty cool" which isn't very helpful in terms of judging its UX. I should've gotten those (or other) interviews to see how the final UX holds up.

I also think my design could've had a bit more uniformity. But maybe that's just me overthinking things here (most of the people I showed my design think it looks fine in that regard). Regardless, as I practice my skills more and more through college and my free time I know I'll see further improvements in my UIs.

And my biggest regret is that I perhaps got too ambitious with my idea. If I were to do this project again, I would make a stand-alone survey app that helps people figure out what to do. That way, I could enhance the user experience, survey features, etc. 

All that being said, I had a lot of fun doing this project as it made me more accustomed to the UX process and pushed me to design something that's neat-looking that also has an easy UX. And it taught me that just because an outcome isn't the greatest, it does not mean that you can't learn from it and enhance the same project, future ones, or simply your skills.