Mindfully capture and share what matters most
App walkthrough during onboarding (made in AE and Principle)
Every one of us is unique. Every day of our life is meaningful. However, social media tend to encourage instant sharing, making it hard for us to treature the most valuable moments in our lives. We tend to care less when we know there are chances or flexibility. How might we nudge people to celebrate the moments that really matter? How might we make sure the experience is rewarding, motivating and forgiving?
On Everydaying, the user can post only ONE picture or video to highlight each day, so that we are encouraged to mindfully organize and share our memories.
This is a side project I started working on with our engineer Qi and PM Xuan since March, 2016. We launched its first version on iOS App Store in June, 2016. Two months in, the app was featured as No.2 in Hot This Week on the European App Store. As the UX and visual designer of Everydaying iOS app and website, I work together with the team to craft the experience with care, and we hope our users will be inspired to curate their moments with care as well.
I always love the feeling of holding a book, flipping through the pages, and listening to the whisper of the paper. What would it mean to you if your memories are on your hands? We have made this happen for our users on Everydaying. If the user has posted more than 25 days in a month, they will get their photos printed out, assembled in an album and mailed to them. We always keep their information private and do this for free.
A couple of album covers I drew for our users
We print out our users’ pictures (with their permission) and mail them the album
What is your moment of the day?
Teresa likes taking photos to capture moments in her life. She posts her pictures on Facebook and Instagram, and she believes her friends like them. But she also has some concerns:
“When I go over my camera roll I keep seeing similar photos taken on certain days while many others are missing. I guess I need a better way to organize them.
Sometimes my feed is overwhelmed by similar photos of selfies, food and pets. Maybe we could all be more mindful about what and how we share.”
Selfies, food and pets are taking over our social media
Instead of posting random pictures to multiple social media platforms, we need a way to reflect on the meaningful moments of our day and organize our memories mindfully. In order to achieve this we need a little bit of nudge and constraints. When you can choose only one thing to post and have no chance to make up for the missing ones, you might be able to preserve more meaningful pieces of memory.
There are also days when you don’t think you have anything special to record. Everydaying encourages the user to stay positive and keep creating memorable moments. If you don’t feel like posting anything, you won’t be able to make up for it after the day has passed.
Designing Everydaying, the challenge is to inspire and nudge the user in an unobtrusive way that is lightweight and fun. After playing around with several options, we decided to go with a timeline with breaks that stand for days when you forget to post. The timeline metaphor effectively represent the concept and achieve the goals, because they are best at emphasizing continuation; whereas the breaks could gently remind the user to carry on.
Some sketches I drew during early brainstorming
From the flow to the visual, every detail matters
Having figured out the core metaphor, we started to branch out the whole experience. I kept the flow and hierarchy as streightforward and flat as possible since the user really needs to be focused on the content rather than the process of completing a task. Before diving into details, we had many discussions over the key interactions and iterated on the high-level wireframes, making sure it feels natural for the user to upload an image/video, browse their timeline, navigate through the pictures in a swipe view, and interact with friends on their moment of the day.
In one of the early versions, Everydaying had a bottom tab bar that contains home, gallery, post, feed, and settings. This provided quick, flexible access to these functions, however, not all of them deserve such visibility and accessibility. The tab bar made the interaction unnecessarily heavy. Having the “Post” action accessible all the time sounds helpful, but in fact Everydaying doesn’t encourage users to keep posting things because only one thing is supposed to be recorded each day and additional content will over write the previous one. Given this, we came up with a flatter and lighter way of interaction:
Then I spent most of my effort translating the ideas into designs. I usually come up with multiple options, share with my partner for eedback, and analyze their pros and cons before settling on the optimzied design for the user. To communicate effectively with the engineer, I build prototypes in Principle, After Effects and Framer.js and walk him through the interactions and decision points. I’m grateful that our engineer has taught me how to come up with realistic designs under technical constraints. I also feel lucky having a developer who will try his best to implement the mockups as long as he is convinced the benefits of the design decisions.
Designing Everydaying, we need to nudge and motivate our users to be mindful while making sure the experience is flexible, rewarding and forgiving. The user can only keep one picture or video each day - if I’ve already recorded today and insisted on posting another one, the previous one will be erased. This encourages the user to think twice before posting without giving them pressure. When designing the UI I need to make sure the affordance for this concept can communicate effectively to the user.
On my first version of the timeline view, I had a big CTA button above the timeline inviting the user to post. I showed the design to some of my friends, and their confusion made me realize that this option had to rely on additional messaging to make it clear to the user what would happen if you posted again on the same day. Here was when the new option came in - having an empty slot in the timeline waiting to be filled in. Once the user has uploaded today’s picture or video, it naturally fits into the most recent item in the timeline and no empty slot will show up any more. The user can still post new things using the button, and they will be aware that additional posting would replace the original one.
If I’m able to post a picture or video every day, the timeline will form a continuous collection of the valuable moments of my life. But what if I had nothing to post for some of the days? Should it show up in the timeline at all? The answer is yes, since Everydaying encourages the user to try their best to record and memorize the highlight of each day. Showing the “disconnection” will remind the user and nudge them to make the timeline intact.
Then the next decision is how to represent the days that have been missed out. My initial design was to show a break in the timeline, with the date and a prompt. But if the user had many days missed out in a row, the breaks would be repetitive, making the timeline look fragmented and disappointing. If I just grouped the empty days, it still didn’t resolve the situation where I have many missing days spread out, which would make the timeline even more fragmented, text heavy, and demoralizing. Eventually we removed the text and only kept the “break” icon, thus minimizing the impact of the missing days on the timeline. This made the timeline less intrusive and saved vertical space for more content as well.
Without accounting for real data and edge cases, the timeline would be cumbersome and discouraging
However, when we tested this screen, several users were trying to tap on the breaks, expecting more content to be revealed. Another downside of this design is that at a glance the user would have no idea how many days have been missed out. Therefore, the user needs more information along with the disconnection indicator, although they don’t necessarily want to surface it. So I designed a popup showing the missing days and an encouraging message as well as an illustration. By tapping on the disconnection icon, the user will get more information and stay motivated.
Everydaying lets the user set permission for individual posting instead of only being able to set it for the entire account. This gives our users more flexibility and motivates them to keep posting. They don’t need to worry about switching the account to private only because they don’t want to share something specific.
After using Everydaying for a while, have you thought about what meaningful moments you have been capturing and how you have been interacting with people around you? In the Growth tab, our users can flip through pictures retrospectively, and see how they have been recording and interacting with friends. In the World section, you can see your friends’ activities and understand what matters to them.
To add more fun in sharing and interacting with friends, I also played around with the Like and Comment actions. However, with our product identity in mind, we don’t want to make the social aspects too heavy. We had some iterations to figure out the right treatment for the right amount of social actions. Having them inline can show the actions in the context, but they can be scrolled away together with the content. The user might have to scroll back and forth to find the button, which can be frustrating especially when they are looking at a long page and simply want to like the picture. Then we tried putting them in the top header, thus making the like and comment actions always visible. But the placement made it hard for the user to reach the buttons with their thumb. We finally placed the actions in the bottom right as floating buttons. They are transparent and the content underneath can be scrolled until they are higher than the buttons. Therefore, the actions can grab the user’s attention but won’t get in the way too much.
Learn from the user and keep improving
During the design iterations we kept collecting feedback from our friends and families. When our engineer has developed the entire flow we decided to run user testing to refine the UX/UI and clear bugs. We asked a few friends to download the Alpha version of Everydaying and use it for a few days to weeks. We also did quick tests with people to let them go through the major flows. Questions I wanted to address included the key functions/flows, debatable design decisions, and the value of Everydaying:
One of the questions raised during the testing was, when other people are viewing my timeline, if I had private photos or things that were only visible to friends, what will they see? Will they end up seeing a broken timeline as if I didn’t post anything? According to our participants’ feedback, they still want to tell their friends they are posting their moments on Everydaying because it means something different to them - a positive and mindful attitude towards life.
“Maybe I don’t want to share the content with everybody, but that doesn’t mean they can’t know that I’m still posting things. It’s like I’m willing to tell people I keep a diary even though I’m not sharing with them what I write about.”
So we decided to show a smiley face with closed eyes (they have genders too) to tell others this image/video is only visible to the user, and to keep the timeline intact. Also, this makes it clear that it’s the user who decides to hide their content, not the viewer’s mistake that they are blocked. For multiple private images in a row, instead of surfacing them all, we show a pile of smiley faces and the number of hidden images to minimize the impact to the timeline experience.
Empty state is another important thing to tackle. Seeing an empty timeline is discouraging and confusing to the user. Even after the user gets started, it’s still not a good experience when there’s only one or two pictures (could be broken timeline as well). I illustrated a little camera to encourage the user to start filling moments to the timeline by tapping the big slot-like button at the top. Using the same approach, I also created the empty state design for the gallery view. After the user starts posting, the beginning of the timeline will show a rocket icon and a time stamp for the user to remember the start of this positive action and encourage them to make it a long-lasting habit.
Before any friend is added, seeing an empty feed doesn’t feel good either. By adding the Invite Friends feature and a Cheers illustration, we encourage users to celebrate their moments with friends and enjoy using Everydaying together!
Instances of the empty state in Everydaying
If Everydaying can light up a smile
To add more fun and delights in the experience, I drew a set of illustrations for onboarding, empty state, adding friends, error messages etc., and created a consistent look and feel across our logo, icons, and overall visual style.
We believe the visuals help tell the story, cheer up the user, and also encourage us to be more mindful about how we record and share our moments of life. If Everydaying can light up a smile on your face and make you feel like sharing your moments and curating your timeline continuously, that would be the most rewarding thing for us.
It’s been a fantastic journey designing and using Everydaying. During this past year of documenting my moments in Everydaying, I’ve become more mindful and grateful for the little things that are meaningful and treasurable. My mom is also using it to share the moments in her life with me - since we are not physically together this is even more helpful for us to understand one another and to express love to each other. Everydaying has been helping me to live my life to the fullest. Huge thanks to Qi and Xuan for initiating the awesome ideas and working together to make them real.
Qiyuan Liu, Xuan Liu
Product design, visual design, prototyping
Sketch, Adobe Illustrator, Framer, Principle
2016.3 - 2017.2