The user experience was geared heavily towards young Millenials and Gen Z-ers, that is, TikTok users.
As of March 2021, 25% of all TikTok users in the UK are between the ages of 15-24. Our research pointed us towards using more edgy language and matter-of-fact tone. Essentially, the UI needed to feel like the comment section of a viral TikTok or a group chat with friends. This heavily informed content strategy and design. Initial user feedback on the first version revealed that our target audience enjoyed the teasing tone of the interface and were able to chuckle and therefore engage positively.
As a play on the popular slang for British pounds and the concept of exchanging a video for £1, the website was called QuidVid. When developing the logo, I knew I wanted to incorporate an animal a squid felt perfect. It's intelligence and mystique in the animal kingdom seemed to parallel qualities of Gen Z.
A vibrant and edgy color scheme to compliment the high-energy subculture of Gen Z.
Unique icons were necessary to maintain consistency across the UI. Relying on a repeating theme of watery, squiggly lines with circular proportions allowed me to create a cohesive set of icons and their matching states.
This mobile-forward web app presented a challenge that any big-city apartment tenant can understand - limited space. Browser viewing has many constraints, and more importantly, needs to strike the right balance between usability and overwhelm.
Understanding the persona of our average user was vital to know how they would interact with our app. We constructed two individual personas to refer back to when guessing how that user might behave.
With a new app, it's crucial that a user can engage with the core content before being required to signup.
Ideally we would allow the purchase of a question without requiring authentication. When we began to implement this, we realized that we needed to delay billing a user's card until the recipient accepted the question. This wouldn't be possible without storing card details through Stripe integration, meaning that creating an account would be necessary.
This informed a design that allowed our users to scroll through the feed freely, only being prompted to sign up when they wanted to ask a question. From here, the onboarding process needed to be as frictionless as possible. The user could quickly setup a username, password, add billing details, and ask their question all in the same process. When testing, we saw that this was effective in reducing abandoned questions.
It was important to consider how each interaction would work on a mobile screen size even from the sketch phase. Because I was working so rapidly, I moved very quickly to creating high-fidelity wireframes for the onboarding process, standard login, navigation, uploading a video, searching for profiles, and asking questions between users.
In other words, fixing mistakes. Try as we might, it's impossible to anticipate every user behavior... even with a tech savvy crowd like Generation Z.
We learned quickly from initial user feedback that videos on a user's profile were a bit confusing. To address this, we changed the profile to display the question at top level, and the video could be revealed (and subsequently toggled) from a simple tap. This had the added benefit of improving site performance.
The final portion to creating our MVP was to design interactions that would bring motion and life to this interface.
Since we were targeting users that would be avid TikTok users, we knew they would possess a mental model of vertically swiping videos. We worked in tandem on development to create a snap scroll on the Y-axis using pure CSS - music to a frontend developer's ears.
Querying videos is one of the main necessities of this interface, so we anticipated a lot of loading time. Thus, we realized providing visual cues to a user would be absolutely crucial to avoid the spiral into madness that we've all experienced when you're not quite sure whether they page is loading or has crashed.
TLDR: I made some quirky loading animations:
The single biggest challenge for our new app was user acquisition. The UX/UI designer in me would be happy to hand off a usable design and wait for the marketing team to bring in users... But the product designer in me knew that reaching product market fit would require marketing built in to the interface itself, otherwise known as ✨Growth Hacking✨
The first part to this strategy was giving out question credits to users for new signups.
We wanted to make it possible for any user to bring more users on to the app in a compelling and engaging way. Now here's the kicker; they would be able to do ask this question before even creating their account. Our solution: you can ask anyone anything through QuidVid.
For creators who responded to questions, they were automatically sent back their video with their QuidVid username handle in an animation overlay.
This entire project, including concept ideation to full implementation occurred over an 8-day period. Iterations to design were made after that time period, although all design, development, marketing, and strategy for this fully-functioning MVP were started and finished in a 3 week period.
Although we were faced with the harsh reality that our business concept was fundamentally flawed, this mini-Startup concept was a learning experience full of challenges and overcoming. I'm quite proud of our little 2-person team and what we accomplished! As of today QuidVid is still live at www.quidvid.com.
