OrbWeb.Me - Landing Page Rework

Orbweb.me is its own app, providing users the flexibility to access their home PC on the go! This complete rework completely blew past conversion rate & overall engagement out of the water.

Project Orbweb.me V5 for web app
Date Jan to Mar, 2016
Services UX Consultancy, Design
Responsibility My role was understand and identify usability issues in the Orbweb.me web app through user research. And create potential design solutions. I then demonstrated a significant increase in comprehension and task completion.
Tools Used Omnigraffle, Sketching paper, HTML/CSS

Notes: The UI and Logo shown in this use study are the design I built and finished early Dec 2016. The UI and some other component styles have changed since then, as the visual team may have some changes to it after my work with them was finished.

Overview

In early 2016, my project manager - Andy Chuo, sat down with me to craft the UX side of Orbweb.me web/mobile application, with all reworks comes with many limitations and restrictions, but none as complex as Orbweb.Me.

Within a week, I initiated user research by using guerrilla usability testing and user journey creation to highlight pain points, then created user flows and wireframes for the changes I want to make. Through my interactive prototypes, I was able to validate my hypothesis and singled out the best solution.

Guerrilla Usability Testing

The first step was to conduct querilla usability tests as a way to uncover user pain points. The result of testing provided valuable insights such as: where we either lose our potential new users due to uncertainty and/or lack of direction and the lack of key information, it led to a number of confused and overwhelmed users.

I then created user journey to highlight customer’s issues. I presented it to my teammates for them to see where we lost them, what their thought at that time, and their feelings during the process. With their perspective in mind, I scoped into my redesign to save them from the pain.

Ideation

The user research led me to sought more more solution and redesign for better overall experience. After reviewing the issues surrounding the landing page and setup flow, I mapped out potential solutions to each of the pain-points, as follows:

  • Clarity – Give a clear and easy understanding of key product info by:
    • Providing a clear and succinct heading to meet their expectation.
    • Letting them know how much time and effort it takes to get it work before getting started.
    • Responding their questions and doubts like what this service offers, how it works, what kind of uses it can help with, how easy it is, what other customers said, what different from other paid plan…etc.
    • Making Download button much clear that it is only for Window operating system.
  • Direct - Give a user a way of primary route for main task without juggling around and slowing the progress by:
    • Providing the most direct and self explanatory instructions to direct users
  • Contrast - Lessen confusion between a small number of tasks for setup by:
    • Making agent site look different from Orbweb.me web app since we used the same web page.
    • Telling logged in user to download and install an agent in PC that they try access to. And at the same time log into the system with their account.
 

I sketched out a bunch of user flows to encapsulate the goals. This allowed me communicate and got a multiple of variations out quickly and iterated them before setting on one for prototyping.

 

HTML Wireframes

Wireframing in HTML gave us more realistic sense of how the design feels. They are interactive using hyperlink, active states, dropdowns, and animations. It helped for actually communicating and collaborating with teammates compared to verbose document. On the other side, it allowed users to play around it to share their feedback. For testing on creative strategy and usability hypothesis, it actually worked better than static wireframes.

View prototypes

Validation Testing

I made two variations of the header on the landing page. The left side guides users a whole picture of our setup process. The right side initially comes up with the signup form. I tested these two interactive wireframes with five users for each. The results are stunning, a drastic increase of user engagement by 80% proved that the left designed worked significantly better than the right.

Variations Users Attempted User Reached Comparing Rate
Left 5 5 100% (+80%)
Right 5 1 20%

A few Thoughts

Nobody wants to be sold on the product at first glance, without clear instructions and conviction. It took me time convincing my teammates to make content simple and relevant, especially on the landing page. Good use experience is always responding user feedbacks. However, this roadmap was focused on enhancement instead of experience iteration. So these updates eventually didn't get a lot improvement in usability.

This work was my first project at Orbweb and my greatest frustrations in design. I always thought about how to deduce the gaps between me and other teammates. Learning more skills might be good strategy. Actually, more and more people looking for designer who can be able to push the pixels and code. That’s doesn’t mean I have to be a master iconographer or graphic designer, but when it is time to slang pixels or present mockup drawings, I am able to complete the task and at the time have a full control of use experience and look of final design.