June 24, 2021
6 mins

Product Design Journey: MeMix

“Aa Gaye, aa Gaye meri mehnat ka Tamasha dekhne”

This kind of line comes into mind when I got to work with this startup, Is it a correct market this startup wants to capture or it just shooting an arrow in the sky and hoping to target the aim.

But one thing is sure, It stands out and innovation is at the heart of these people. Memix, A situational-based video-making app has the concept to connect the relatable contents with existing or new videos, they make me crystal clear what they want with me in this project.

“But, Picture! Abhi Baaki hai mere dost”

So, here I come to share my journey of Product UX design with this startup and making you aware of all the tools and weapons for the successful delivery of this project.

The idea is very clear now next question what we have to do, I have collaborated with one of the former UX designers from industry Surbhi Dalvi.

We start by making TO-DO List first what we have to do, and I forgot to mention we are working on this project remotely from our homes, Hence we have to present on a common platform in order to smoothly complete this project. And you nerdy fellow don’t bother I will share screenshots of all workflow which we have done together.

So, we have to make a to-do list first now, Now here comes the awesome note-taking app dedicated to designers Milanote, where I invited her to join my workspace, the best thing about Milanote is you and your teammates can simultaneously work together on the common visual boards while keeping your notes and images organized in a creative open field way (like GTA open world) and they are taking it even further by time.
Here comes our work list:

Workflow Process

It contains freaking 13+ tasks, but we are two (Sholay me v 2 he the),
We have taken interviews of more than 10+ memers and tiktokers. And we came up with 3 different personas which are reflected based upon their common patterns:

Having lots of user information is one thing, organizing them is second and it sucks. The startup is unique so as to our work style and we have to figure out MILANOTE again has some premade templets for different job profile and Yes it has a box for creating user persona “Bhagwan 2 Laddu chadhauu tumhe”
Persona data visualization and organization is ready, and this has been done in a collaborative way.

Now we have come where we can take the client written notes about his expectations and functionality expected with Memix.
Based upon that input, we have asked our content requirements with him,

And as belonging to the UX industry, it’s very clear we have to do stand on the user shoes and see what we can expect with this app. It’s a good idea to articulate that in writing, so it would not evaporate from our mind while going further in designing and developing.

Coming to the next, Moodboard: So that we can communicate and establish ground rules with designs and able to communicate with stakeholders, the feeling of the app.
Milanote has again at its best, can save from clipper on google/Pinterest to directly on our mood board.

Minimal Moodboard

Next, Information Architecture (na baba na building nahi), ok let's be more specific we call it SiteMap.

And I am very much fond of adobe software and they are my big guns. A sitemap is about navigation and organization of information at different levels in a flowchart manner.

And we have discussed the sitemap and created it on pen-paper but now we have to make it look a bit more presentable besides rough sketchy once. And again, we have the data, we have put our thinking but again arranging it in a formal way has a big challenge in complete customization software like photoshop/illustrator, well Whimsical is the answer to that, and hella luya! they have a set of tools completely dedicated towards flowcharts and we can twerk that for our Sitemapping,(team collaboration ? yes they have) so we start designing sitemap of our side in the same arena while discussing and joking, and suddenly it starts to feel Its fun.
Have a look at the sitemap on whimsical :

Whimsical

Next, Content mapping: It's nothing but a fixation of content as per the sitemap, which will help further to create wireframes, as during the creation of wireframes we will only have to laser focus on visuals and only visuals.
Have a look, this is how we made it :

Moving towards, Wireframing: The hidden problem starts taking shape, i.e. the difference of working platform, I have mastered some other tools, software and fellow members have different taste and we are in need of something quick and easy to use Wireframing solution (Almighty ! Hakuna Matata). Balsamiq is the destination, we have to get organized and start to work without putting our valuable time into learning a new tool. Balsamiq is a fast, easy, and collaborative tool for low-fidelity wireframing.

and yes it has 2 modes one to give you a more sketchy and hand-drawn feel and others to give you a clean and elegant feel of wireframing and I absolutely love this feature.
Have a look at wireframes:

Last, but not least. High-fidelity App Screens. and Figma is a lifesaver. Usually where other platforms don’t allow the collaborative environment and even so unusual problems like slow server, complexity, and the high charge have been associated with them. But Figma is not like them, easy to use, open plugin community has opened a new portal of possibilities for it. The best things about Figma are, it’s vector-based, have plugin support, similar functions as Adobe XD and InVision and Figma Chat has made communication smooth.

Further, we have done our entire app and website hi-fi wireframing in Figma, and as Now, we don’t even have to go towards photoshop to create mock-ups.

It can also be done here, which earlier was a big challenge as we have to move outside the workflow apps, download mock-ups and then we can start the mockup. Those who are not comfortable with photoshop and illustrator has also enjoyed this part, which we do with the help of the Angle plugin. I used it earlier on XD and it was also available cross-platform, which is good.

and now we are on the stage of submission of Memix to stakeholders and developers to create give this body a soul.

Here is the link, check it out.