|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.
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.
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.
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:
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.
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.
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|
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.