I designed the beta experience for a video chat app. It was featured on Product Hunt with a promising
4.8 / 5 stars. What a ride!
UI and Interaction Design
Product Illustration
Motion Design
UX Research
urLive's Project Manager came to me with a prototype of a web-based video calling app..."It works, and the UX is good, and now we need it to look good." I held my breath as I interacted with the proof of concept - it needed a lot more than a fresh coat of paint...it needed a lot of love and more importantly...better UX.
In the 9 months that I worked with urLive, I fulfilled my contract to design a beautiful app, but I also tested the User Experience by conducting live usability tests. This propelled me with data and insight to enhance the UX by adding an onboarding flow to help explain the app to users and guide them to other parts of the app.
Marketing branding was created by Art Director Craig Lam.
The registration was very simple and had 3 steps, with a confirmation email flow that followed.
We carried over the bright gradients of the teal and green from Craig's color palette to differentiate from other video platforms that use a more standard blue like Zoom and Skype.
After confirming the activation email, users were launched into the app.
This is a customizable public page that other callers see. It tells them who you are, and if you're using the app for personal or professional use. The "Hello" default image greets the users in a friendly, casual manner.
In our usability tests, the testers didn't know where to go after they landed on this page, so we introduced an onboarding app cue stage to guide them through the process and eventually to their Dashboard.
Screen 1.
Introduces the user to the "public page" concept and how to share their URL with other people.
Screen 2.
Explains how to personalize the page. The booking feature was out of scope at the time, but I kept it in the mockups for the future iteration.
Screen 3.
Explains that they need to click the logo (on the top left) to access a Dashboard, so they can manage incoming calls and edit their call settings.
I was responsible for the layout and illustrations of these screens below. Once the users finish the onboarding flow, they can explore the rest of the application.
We also had to ensure that our web app was responsive, especially for the callers who copy/paste the user's URL into their mobile browser. Their profile page had to be responsive and the call buttons had to be visible above the fold.
We knew that some people wouldn't be sitting in front of their computers all day or have urLive open in a tab, so our team created a simple mobile app experience for people to receive calls on-the-go.
I realized after I left urLive, that our buttons didn't meet WCAG 2.0 accessibility guidelines.
Bright teal : white has a 1.36: 1 contrast.
Navy blue : white has a 11.57 : 1 contrast.
To remedy this, I would have changed the call to actions / icon buttons to have stronger color contrast for low-vision clients.
Overall, I'm super thankful that urLive kickstarted my career into Digital Product Design, and I wish them the best of luck in their early start up days.
