MadLipz | UI/UX Design
An App to Make Video Parodies Share Them with Everyone
My Role
UI/UX Designer: Product Thinking, Competitive Research, User Flow, Wireframing, Visual Design, Prototyping and testing
Client & Duration
Eigenuity Inc.
May 2017- Dec 2018
Project Summary
MadLipz is an app where users can dub their voice on trending videos. It's a fun and very entertaining app that could attract a lot of users on their first release. They already had a millions of views and over 1 million users when I started working on the project.
-
Make the app social
-
Better discovery for videos
-
Personalized profile
-
Improve user experience and user interface
-
Improve visual designs
As a result, the app was redesigned to create a platform that is not only entertaining and engaging to discover parody videos, but also creates a more social environment for users to interact with users, create profiles and have a personalized experience. The app was also visually revamped by introducing a more engaging and fun look and feel which was more aligned with the personality of the app.
Challenge
The app was initially developed as just a tool to create dub videos. The user could also discover videos and dub voice-over on it without any sort of engagement and interaction with other users.
MadLipz team came to me with the idea of making their app more social and engaging for users. A lot of deliverables and proposed features were evaluated based on user insights and feedback from the existing app. A detailed competitive analysis was prepared by listing major features and functionality that their product team had in the pipeline.
Strategy & Ideation
I worked closely with the product and developer teams of MadLipz in order to understand their users’ needs and pain points. A list of deliverables was created based on what MadLipz team briefed me. To analyze and visualize the main features, I created the information architecture, user flow, sketches, and wireframes. We’ve had weekly meetings with the product and dev team and discussed the tasks and roadmap of the design.
In each stage of design, I briefed the team on the design challenges and solutions. From initial wireframes and low fidelity prototypes, I gathered my feedback and insights from their team and users.
Information Architecture
From what I’ve discussed with the stakeholders, I created a user flow and an information architecture to give all the features and contents a structure. This way I could define a hierarchy for all the sections of the app. You can see the user flow diagram in the following picture:
Protoyping
Once the features and deliverables were finalized, I started sketching ideas for different layouts and placement of elements on the paper. All the pages and elements of the app were drawn with annotations and comments, and they were presented to the stakeholders before we start working on the low-fidelity version.
A digital wireframe and a user flow were created from the sketched design and ideas.
Visual Design
One of the goals of the project was to re-evaluate the existing visual design and improve it to be more aligned with the new features and personality of the app. MadLipz app tends to bring joy, fun, and laughter to the users, and for that, the look and feel of the app have to be aligned with these attributes. The new color that I introduced is more vibrant with higher saturation. The designed set of icons also tends to bring more feelings of joy and fun to the app.
High-Fidelity
A high-fidelity version is where the UI elements from colors, typography, buttons, etc. were added based on the defined visual designs. In addition, interactions and transitions were added to the interactive prototype to prepare the design for usability testing.
Usability Testing
An interactive version of high-fidelity was created on Adobe XD to perform usability testing on the latest design.
The test was done with selected participants in person. Prior to the session, a list of tasks was created to be briefed with the testers. Users were asked to “Create a Profile”, “Browse the Discovery”, “Create a dubbed video” and “Share it with a friend”.
I made sure to ask users to “Think out loud” as they were going through each task. In this way I could also listen to their trains of thoughts as they’re tapping/swiping on the prototype. I took notes to analyze them later on. I listed all the possible changes and revised the mockup. In the next stage I continued the user testing process in an online form.
Final Delviery
The very last stage was to apply all the changes from the user testing and other feedback and finalize the high fidelity version. The UI elements from color and icons were finalized, the interactions and transitions were improved based on the feedback. I've been constantly in touch with the developer to ensure all the features are feasible to be implemented. Madlipz app can be downloaded on Google Play and App Store.
