001. Project
Zapatapp is a software as a service (SaaS) tool that facilitates the creation of UGC and exchange of digital marketing services between brands, creators and influencers
It's a B2B2C model, with the tool aiming to create a UGC library, capitalised using Artificial Intelligence and a community of non-professional creators.
002. Info
Role
Product Designer (UXR, UX, UI)
Brand Strategist & Designer
​
Responsibilities
- Understanding stakeholder goals
- Building user personas : doing surveys, guerrilla testing, user interviews
- Making user journeys, app's information architecture
- 
Low and high-fidelity prototyping
- Designing responsive screens
- Conducting usability studies
- Accounting for accessibility
- Building design systems
- Experience testing the product
​
003. Overview
Problem
Brand exposure is largely via artificially promoted Ad content, creating a massive market gap to initiate much more interactive ways to create a bridge between creators and brands.
Solution
A bridge between brands and creators, contests as a scalable solution to engage common users to produce UGC en masse for brands.
​
004. My Design Process
I worked as the sole Product Designer and have been responsible for the complete end-to-end UX process. A startup compiled of a few team members, everyone offered their support and contributed in the execution of the product.
Given the creative freedom to tackle this challenge, I refined my design framework for every UX challenge that would come my way. My approach to this project was to research, synthesise, ideate, design, and validate a suitable solution for the current problem space.
Phase 1 -
Define The Problem
005. Secondary Research
To learn more about consumer behaviour, I conducted secondary research specific to high community focused applications and it’s market for brands. The issues that surfaced were mostly the limitations of brand to creator/user interaction. Brand exposure is largely via artificially promoted Ad content, creating a massive market gap to initiate much more interactive ways to create a bridge between creators and brands.
006. Primary Research
I interviewed 12 creators, millennials and gen x,y,z, either have made content for a few years now or have just started.
Each interview was conducted remotely through video call or in-person, and lasted about 30 minutes.
I also surveyed 26 people asking them similar questions to gather more quantitive data.
007. Competitive Analysis
To enhance the product's value and utility, I conducted a competitive audit. This helped me understand the common interactions between similar applications and the targeted user base, also helped me understand loop holes and areas of improvement.
Below is a competitive audit conducted to study other content editing or sharing platforms. Results can be read in the audit itself.
The wider public is immune to messaging, a new way to reach customers is to create an interactive experience within the message.
Phase 2 -
Synthesise & Analyze the Data
008. Affinity Mapping
From my interviews, I organised all my notes into an affinity map. This helped me identify patterns, for example, a major correlation between user satisfaction and user retention, this is achieved through likes and shares in other platforms but something like a gamification model can achieve the same.
009. Creating User Personas
Based on the interviews/user research, I created personas. Each persona is a category for our target audience, it highlights their needs, concerns, and personality traits
I often referred to them throughout the entire product development process to make sure I prioritise the users in my design decisions.
Since the target audience is vast for this project, multiple personas has to be build. Mainly to categorise people in different 'creative' brackets ranging from comedians to fashion designers etc.
Phase 3 -
Organise Ideas into Direction
010. Solutions
Creator Economy
Our creator-first approach allows us to help brands tap into the power of community collaboration.
Through creative contests and video content generation, we accelerate a brand affinity and business growth.
A new disruptive approach needed to be introduced for innovative solutions. By rewarding creators to work with brands and create good content, Zapatapp gamifies the brand-customer-engagement ecosystem.
Gamification Model
ZapLevel act as an incentive for the community to engage, collaborate and re-use each other’s content – a reward that enhances creativity and respect among peers, it also offers rewards at each level to introduce a sense of achievement in the creators.
Easy, Simple & Powerful Editor
The crux of the app is the video editor sitting in the middle of it all. It's a tool used by creators for self exploration as well as contest submissions. Our aim was to make it intuitive to use and brilliant in execution.
011. Identifying User Journeys
Showcasing the possible solutions via storyboards to our users for an initial test run, I've compiled the gathered information into user journeys.
Below is the journey for Kunal's persona when asked to participate in a contest on the app​
012. UX Mind Map
A detailed view of what the UX mind map of the app looks like. This helps identify the MVP and help give developers a fair idea of what the flow of the product will be.
Phase 4 -
Turning Concepts into Designs
013. Information Architecture
Paper wireframes are done at the beginning as it allows the designer to iterate multiple solutions, explore possible information structures, turn them into paper mockups and finalise the path forward.
014. Digital Wireframes
Lo-fidelity designs can be turned into working prototypes through Invision and tested by the team and by potential users of the product.
016. Design System
An elaborate system of colours, shapes and typography was built along with rules on how and where to use them. This, what is shown here, is a mere gist of it.
017. Accessibility Considerations
01
Provided access to users who are vision impaired through adding alt text to images for screen readers.
02
The colours used are readable and have good contrast.
03
Every action and error has a text indication with/without a symbol.
018. The Product
The brand was designed with a simple concept of 'Energy converted into form'
It encapsulates the idea of, how creators interacting with one another in this digital world, can create and sustain this energy.
The aesthetics were kept soothing on the eyes, architecture was easy to navigate, and everything was made keeping scalability in mind.
Phase 5 -
Test, Iterate, Repeat
019. Usability Testing
To discover any usability issues, I tested the product with users.
Questions asked were more subjective and open ended;
​
01. Did you find the onboarding experience to be informative?
02. What were the aspects which excited you? if any.
03. Was the concept of zapping clear and did you end up zapping someone?
04. How was the editor experience?
​05. Did you participate in a contest? How was the experience?
020. Usability Testing Findings & Iterations
01
Users needed a little more clarity on what zapping is and how to zap.

This was rectified by adding tutorial videos while onboarding and also adding instructional pop ups for first time user.
02
Users were unsure if they had already applied an effect in the editor or not.
This was fixed by adding a small marker on tools applied.
021. Lessons Learned
01
The most important lesson is the restraint one needs to show to build an MVP. A product should start at a basic level where it solves the problem it set out to solve, after testing and feedback, it’s easier to add features than knowing what to remove/change.
02
Defining a problem statement at the beginning of the project will help solve multiple questions that shall arise during the course of realising the product.
03
Development should be done keeping the product’s scalability in mind.
04
Information architecture should be finalised keeping responsive designs in mind, this saves time and effort moving forward.