Sole Designer (Research, Wireframing, Prototyping, Visuals, Motion)
2 months (March - April 2024)
Giselle is a teacher and a single mother of 3, and two of them still attend elementary school.
She has to take care of everything, and this is how a visual representation of her average day looks like.
That is a lot to manage, no wonder she's gonna forget something. 🤯
For this project, interviews have been the best tool for getting precious info about families and how they communicate and manage their time. But families are not composed by just adults.
Family is all about collaboration, so I made sure to include a younger audience too.
People, especially parents, are afraid of forgetting important tasks and appointments.
Sometimes wrong or poor communication can lead to misunderstandings. Every family can experience it.
Parents admit they hate when their children act "mysterious" over their schedule, while children hate when parents forget their chores.
Giselle is the result of interviews to different people, both parents and children. Their experience has been crucial for writing Giselle's story and details.
Family: 3 children
Personality: easygoing, extrovert, caring, empathetic
Hobbies & interests: running, cinema, reading
Giselle loves spending time with her family doing what they all like: days out, visiting new places, and doing things together. But because of her being a teacher, she often feels overwhelmed by all the work she has to do outside school and struggles to keep track of her own schedule and her family’s. Sometimes the lack of effective communication between the members of her family makes it difficult to be organized and make the most out of their free time.
During the research, I wondered why people should choose my product over well-known alternatives such as Google Calendar, which gives the basic features families need - this was the premise of the whole ideation phase.
Families don't only talk about personal errands, but also small things such as groceries to buy, things to do during the day, trips together and much more.
A lot of them store things like these on a fridge, but what if it looks like this?
Reinventing the wheel sounds fun, but as Jakob Nielsen once said:
"Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know."
Competitive audits are fundamental to get to know both direct and indirect competitors and how they work, what they do good and what they should improve.
.svg){kind=icon}
Events management
Collaboration options (view collaborators schedules)
Too complex for some use cases
.svg){kind=icon}
Different types of notes (pictures, drawings, recordings)
Collaborative notes
Unique pages like Meal prepping, Gallery, etc.
Overall outdated design
Basic features locked under paid plans
Customizable "Today" page
Over-customisation can lead to a confusing view
Overall outdated design
The audits helped me understand that is a rarity that apps with this scope have a polished design and well-thought navigation system - everything is thrown into an hamburger menu, making the app less engaging.
The Prototype phase has been the most challenging: because of the nature of the product, I had to make it as simple and intuitive as possible.
You don't start building a skyscraper from its roof, right? You should start from its foundations.
That's what happens in design: starting from the "skeleton" of the product helps massively to better understand how features and options should be implemented before diving into the UI.
User flows help designers consider the best path to make the user reach a goal: in this case, this is the onboarding process.
Information Architecture is the pure skeleton of the product.
This has been the most fun part - trying to get out as much different ideas as possible was overwhelming, but at the end I was able to choose some of the best ideas.
After getting the starred ideas together, I dived into Figma to traslate those ideas into a working prototype.
Agenda
New event
Event overlay
Calendar
Notes
Photos
Map
Agenda
New event
Event overlay
Calendar
Notes
Photos
Map
Before moving on to usability studies, I analyzed some of the screens in case of missing features or lack of accessibility, or general improvements that could've been done.
Families' schedules do not only consists of occasional events and appointments. People have routines too and the above are some questions people ask themselves almost everyday.
For this reason, I iterated on the design by allowing users to input their weekly schedule during the onboarding process, and by adding a quick view of the family's routines before the events list.
Before
After
Having different perspectives helps a lot. To eliminate possible biases, I gathered 4 people who tested the prototype in order to understand where I did good and where there should be improvements.
The only complain was about the "New event" page, that felt too complex for what was meant to do.
What an event basically needs to answer is 'what' it is, 'when' it is going to happen, and 'who' is participating, so I made those info more obvious while making the other ones available if needed.
Before
After
After determining the layout based on feedbacks, I started building the actual product.
For this product, I wanted something that made the platform to feel like a welcoming environment, that resembled already familiar concepts. The result has been a combination of different aspects:
Picking the main accent was the most difficult part of the color system building process - I wanted something that made the platform to feel like a calm and welcoming environment. So I did some reserch in color psychology (colorpsychology.org).
Another thing I wanted this platform to feel was "personal". For this reason, I crafted a range of color the users can choose during the onboarding process.
I spent more time on crafting materials as I wanted to resemble real life objects.
A note item resembles real paper, with a texture and a pattern picked by the user.
A frozen glass effect is used for emphasizing elevation in several UI elements.
To help establish hierarcy between elements, I also created shadows for different elevations.
Agenda
New event
Event overlay
Calendar
Notes
Photos
Map
Agenda
New event
Event overlay
Calendar
Notes
Photos
Map
Notes in Carily can be either simple as a checklist, or complex with different layouts and items inside. They adapt their thumbnail according to the content inside them.
Moreover, voice notes feature a transcript option for deaf people.
Need to pick up your family? Carily will suggest you the fastest route.
Choose who you want to pick up, and choose a destination - Carily will also suggest you the location of an event close to that time as a possible destination.
Each person can choose their preferred color, which will be shown on routines and events cards.
Adding family members is really easy: just send them the family code or make them scan the QR code.
No looking for emails or long invitation processes.
Get a quick glance of what your family's day looks like, or just remember good moments together: widgets are for everyone.
The app also features dark mode for less eye strain.
It's not as easy as doing a color switch: materials have been revisited in order to deliver the same effect, and different shades of primary colors have been chosen to guarantee contrast and legibility.
Agenda
New event
Event overlay
Calendar
Notes
Photos
Map
Agenda
New event
Event overlay
Calendar
Notes
Photos
Map
I think we all agree that smartphones have become the go to devices for almost every task.
However, a good product does not rely on just small screens but offers a great experience anywhere. It's not about just zooming the UI, but adjusting it to make it more comfortable to use, from swartwatches to large desktop monitors.
Animation explaining how the content adapts to the screen width: destinations move to the right, and the content spans across multiple columns to use otherwise wasted space.
On larger screens, the day grid item transforms into a card to get a peek of that day's events.
Cards also span their content to the sides.
Even though I had so much fun building Carily, not everything went as expected.
Crafting a user story that aligned with the research results was not easy - I wanted the problem to be clear and to create a user persona that could "reflect" the importance of fixing that problem;
Exploring different options for the UI took longer than expected. I did not want the product to be a copy-paste of other products.
Carily really helped me improve my overrall skills as a designer, in different ways.
I started giving more attention to the research process, how to communicate with users and asking the right questions;
I realized that every part of the final design matters, and not just the main screens;
I gained confidence in following common UX patterns while adding some personality.
I improved my storytelling abilities.
I hope you appreciated this reading as much I enjoyed building Carily.
I put a lot of effort into the whole process that helped me shape myself as a UX designer.
