*A glimpse at the form I created
Cario: the calendar
that helps you decide what to do
Case Study - December 2019
My Role: UI/UX Designer
Duration: 2 Weeks
Team or solo project?: Personal solo project
Tools & Devices: Figma & Photoshop
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.
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.
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.
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):
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:
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.
What I learned from this persona:
Give people simplicity; tools that make their life easier
What I learned from this persona: Give users some customizability when you can; people love expressing themselves
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.
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.
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:
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 - Home page
*I will go over some of my screens to explain my design decisions starting with the home page.
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
Final UI Design - Upcoming Events
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
Final UI Design - Create Event Page
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
Final UI Design - Settings Page
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)
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
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
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
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
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.