Memori

A Music Based Social Media Platform

Music has a powerful way of evoking certain memories and emotions. With a single beat…you can instantly transverse moment in time. Some of our most precious memories are entwined with the music we listened to while experiencing them. With Memori, you can capture and share your memories, photos and videos coupled with a custom playlist for you to forever cherish.

Project: Memori [Phone Application]

Duration: 7 Months

Role: UI Designer

Tools: Photoshop, Illustrator, Balsamiq, Jira

Background:

 

In 2016, I was approached by an acquaintance from Los Angeles about working on a mobile application for a client. I was hired as the sole UI designer for this project. The concept was to create a social media phone based application called ‘Memori’. A user would be able to post a combination of photos and videos along with a music track to go with it. Another interesting feature was creating playlists that could be shared among friends. 

Preparation:

 

The first task was for the team to figure out the scope of the project based on the budget. We had several meetings to discuss the features that are viable and those which were far fetched. We drew rough sketches of the user flows, menus and page layouts.

Foundation:

 

Once we were clear about the feature sets, it was time to jump into Balsamiq. I created quick low fidelity wireframes and determined the user flow. Since Balsamiq has the ability to export wireframes with links, it became very easy to present the wireframes to the client. Once the required changes were made and approved by the team we decided to move on to the High Fidelity Wireframes.

BRANDING:

 

I started this process by diving deep into research to find various colour themes and ideas that could work for us. I was asked to focus on a dark theme with black as the background and a highlight colour. We created several iterations of the logos.

Communication:

 

To manage, track and communicate with the team in a formal way, we decided to use Jira. It kept everyone organized and we could easily track the progress of each team member.

HIGH FIDELITY DESIGNS:

 

At the time, I decided to use the tools I was most comfortable with such as Photoshop and Illustrator to create the high fidelity wireframes. After presenting a few ideas to the client, we settled on the design. I went on to create all the screens required for the app from start to finish.

 

Note: I recreated these files in Adobe XD to make these animated prototypes.

WORKFLOW:

 

As I was designing the various screens and assets, I was required to provide a pdf document which laid out the interactions and user flow at one glance. With every change, I uploaded the pdf document with an updated version number.