Memtree — life well remembered

Memtree helps people to find and organise their most precious moments with their family and friends.

Tap to download the app


Awesome Splash animation by Balli Bhai

About Memtree

Everyone carry their mobile phone at all the time and hence it’s easy to capture photos of just about every moment in our lives. But it’s really cumbersome to collect and manage all the photos that people take. It’s also hard to share photos with your friends.

Memtree was build to improve this experience by helping people create & share memories without any hassle.

My Role

I partner with Project Lead to gather competitive analysis, user information, translate business goals and user need into user flows, wireframes, detailed designs and prototypes.

We were also helped by our awesome interaction designer Baljeet Singh, who took care of all the animations and micro interaction in our app.

I also worked closely with developers to deliver solutions and resources for final production.


Creative workshop

To gather all the information needed to design this app we had a creative workshop with client where we interviewed him regarding the inspiration behind Memtree.

This discussion leads to one of the app’s main functions that is grouping the photos in your phone’s camera roll based on when they were taken. The other thing that we found important was to group these photos in a nested way so that’s it’s easy for user to organise them.

This lead us to the approach of Tree structure and we decided to make it look more interesting by giving them interesting names. And hence we named them Trees, Branches, Events and Twigs

Brainstorming with client
Discussion of flow for tree and branch feature with client

Industry Research

Next we planned on doing some industry research by performing competitive analysis. We chose Memoir, Storyo and Moments for this to find out how our competitors are performing.

Constraints & Pain Points

  1. Too many photos, nowhere to store them in an organised manner (Personalisation/Customisation).
  2. Revisiting memories of loved ones is a very overwhelming experience.
  3. Too much time spent searching.
  4. People are quick to store photos somewhere but then they don’t go back to do anything with them.
  5. Photos are stored in way too many places.
  6. Group chats are primarily for discussion purposes.

User Persona

We created persona and made sure to use them throughout the project to guide design decisions, priorities and create empathy amongst the client and our team and to make sure that we are all on the same page.

User Persona used throughout the project

Solution

An app that allows you to keep track of memories/experiences and share them with those closest to you.

Wireframes

After getting all the details about project and had a better understanding of user goals and behaviours, I decided to make wireframes for the app. Wireframes gave me an idea that how things would look like and made my work easy for visual design.

Memtree Wireframe

Visual Designs

While brainstorming for visual screens we decided to use white colour more prominently over all of the screens because it’s probably not the best idea to have UI fighting for attention with the content our users are uploading. In this way the design becomes a distraction-free frame, so that our eye is unavoidably drawn to the multi-coloured content.

To get a sense of other design decisions we made in the process, let’s take a closer look at the screens we designed in Memtree.

Home Screen

1 — Twigs

Twigs are short videos made out of photos from users collection with a background music. People can post these twigs which other people can view. We displayed these twigs in chronological order on home screen at the top so that people can easily discover them every time they open Memtree. To distinguish a non viewed twig with a viewed one, we added a coloured circle around it which hints the user that the twig is not viewed yet.

This also plays an important role in user retention because people can discover a new twig frequently which acts as a reward and wants them to come back to the app.

2 — Chat and Search icons

We have placed chat and search icon on right side on the screen where they are traditionally placed so that user can easily locate them.

3 — Trees

Trees are the main structure of the app which has branches and events created inside it. We have designed trees in form of cards and showed a preview of images that tree have. We have also displayed the count of images and count of people with whom the tree is shared with. This helps user to easily identify the Tree they are looking for.

4 — Menu

Designing the menu for the app is always a challenge because it decides the whole navigational flow.

Few things that we kept in mind while designing the menu were

  1. Keeping the thing that is super important in centre i.e Add icon which lets user create new tree, event and add new images in Memtree. Secondary important things are placed at extreme left and right of the menu.
  2. Giving labels to the icons because it’s easy for user to recognise the icon with label then to recall by just viewing the icon.
  3. Providing enough space and allowing human fingers to easily fit within the clicking range. This allows for a clear visual feedback, and telling them exactly whether they are tapping correctly or not.

Branch Screens

In Tree Detail screen I used time indicator to divide branch sections by monthly duration(eg Sept-Oct, Aug-Sept). The bar with“Add more and chat thread” hides as the user scrolls the screen down and becomes visible when user scrolls back above.

Tree Detail, Create Branch and Branch Details Screens

Twig Screens

Creating screens for adding effects to twigs was a challenge. I decided that we have to design this screen in a way that when user adds effects, the system should update the effect to the original image in real time, so that the user doesn’t have to go back and forth to see the changes. I did similar with the other effects too.

Chat Screen

In chat screen user can see all the chat threads that he is part of and can chat with other users. We also provided the user with search button in case he wants to search his thread.

Empty Screens

Usually empty screens are pretty boring and non engaging, so to make them interesting we designed few beautiful illustrations, added a simple but powerful body copy which informs user what actions he can take and a simple button that informs user what that action it will perform.

Onboarding Screens

For educating the user about the app in a better way we used used both the function based and progressive Onboarding methodology.

Functional Onboarding
Progressive Onboarding

Lessons learned

To crack the home screen design we created loads of screens which were more visually beautiful and appealing but we chose the current layout because it was solving the problem that we had on our plate.

Often we get attached to our designs and think that what we had designed is “the solution” and forget to validate and iterate it. But the real solution to the problem is the one that works functionally and aesthetically well.

What’s next?

We suggested few more things to the client during workshop but due to budget constrain we didn’t include them in MVP. May be we can add those things in later phase.

Some of the suggestions we gave were:

  1. Like functionality in twigs as part of social rewards.
  2. Automatically syncing the photos that the user has taken on a particular time and day and asking user to add them to the new or already created branch.

Meet my awesome team

M. Nadeem, UI/UX Lead

Baljeet Singh, Interaction Designer

Yagya Dembla, Associate UI/UX Designer;


Thanks for reading!

If you’d like to get in touch or find out more about me, please use one of the links below:

Email // LinkedIn