Featured Work:

CloudOn
Redesign

"It's a pleasure working with Brian. He always brings something new to the table."

-Matt Dove, Director of YBike

CloudOn

Rapid Interactive Prototypes

Skills: Proto.io, Sketching, Design Thinking

One of my biggest contributions to CloudOn was the ability to rapidly prototype ideas. While most design solutions could be vetted and verified through sketching and white boarding, interactive solutions can also be rapidly prototyped. This allowed us to communicate design to product managers and executives more effectively, iterate on design solutions quicker, and were extremely useful when communicating designs to a remote development team.

CloudOn

Responsive Web App Guidelines

Skills: Edge Reflow, Photoshop, Confluence

When CloudOn needed to build a web app that was focused on mobile, I quickly learned Adobe’s Edge Reflow to help create response responsive web prototypes that deeply informed the responsive guidelines. These guidelines were a set of rules using percentages with minimum and maximum pixels that for the dimension of any object within the interface and how it would respond to any browser size. This was a significant departure for communicating the design specs as opposed to fixed tablet and mobile device screens and were well received and efficiently implemented by the development team.

CloudOn

Interaction and Gesture Design

Skills: Mental Model, Proto.io, Sketch

CPO, Jay Zavari, and I wanted a simple way for users manage and organize documents. We were inspired by David Allen’s Principles of Productivity to create a document organization system that would increase the productivity of our users by enabling users to assign tasks from documents to other people, defer documents and tasks to a later time, and prominently display the most relevant documents first. These actions would be operated through various gestures within the file list.

This concept shows that user can easily archive, organize, defer or delegate a document with a single swipe. This interaction model will be scaled to any element of CloudOn such as a task item, a comment, or even a content change.

PSI Calculator

Web Application Development

Skills: Javascript, Document Object Model, HTML5, CSS3

The purpose of the PSI Calculator is to help cyclist determine the optimal pressure to run tires at.

If the tire pressure is too high, the ride will feel bumpy and can also result in less traction. If the tire pressure is too low, there will too much energy loss when pedaling and can even result in a flat tire from pinching the tube between the rim and a hard surface. In this application, I used the math capabilities in Javascript along with the DOM to create a fun and interactive way to determine optimal tire pressure.

Go to Live Site

YBike

Full Site Redesign

Skills: Wordpress, Content Editing, HTML5, Photoshop, Photography

YBike wanted a new site that fit the new branding of the YMCA, simple and highly photo & video driven. Fortunately, I had also worked at YBike as a photographer, curriculum designer, web master and email marketing for about a year before and had collected albums of photographs and a plethora of analytics data of the old website. With the help of Organized Theme's theme as a template, I created an image and video rich Wordpress site for YBike that improved overall usability of the site.

DoubleDutch

Session Detail Redesign

Skills: UI Design, Conceptual Model, Omnigraffle, Photoshop, Keynote

DoubleDutch is a mobile event app that is used often at conferences. Lucian Beebe, VP Product Management, assigned my team to redesign DoubleDutch's session detail page with goal to increase usability and engagement. After much research, testing and iterating. We concluded that it was not possible to have a single design with many features with the wide variety of events that DoubleDutch caters to. We proposed that DoubleDutch move to a modular session detail page that can adjust to the needs of each event and best improve DoubleDutch.

The early stages of this modular design concept was conceived during the usability testing of our paper prototype

View Paper Prototype

General Assembly

Illustrated User Journey

Skills: Sketching, Task Analysis, Mental Model, Illustration

General Assembly tasked me to design a learning management system to complement their in class courses. After much research, we developed multiple personas and user flows to help understand the needs of the GA students.

I wanted to communicate a lot of emotions in this user flow, so I illustrated a story of Garrett, a recent graduate, who works tirelessly at General Assembly but forgets about a large assignment until the night before. Through the help of his friend and classmate Crystal, General Assembly's new learning management system and his drive to succeed he is able to complete the assignment on time with flying colors.

Marco Polo


Case Study:


Marco Polo


Marco Polo is a micro-adventuring website and mobile app, created by Abi Kelley and Brian Oei, designed to encourage busy urbanites to adventure more often.

It seeks to inspire curiosity, playfulness and a renewed experience of everyday urban life, by helping people to engage differently with the spaces around them.

Unlike other mapping and planning tools, such as Yelp, it offers simple, socially-generated activity prompts, route mapping tools and inspiring photography to help people participate in and enjoy their city.

Try the Mobile Prototype

*note: mobile prototype is optimized for iPhone 5

About


Brian Oei is a User Experience and Interface Designer and has worked for CloudOn, YBike and 500Friends where his responsibilities included interaction design, user experience design and user interface design.

He is proficient in prototyping tools such as Proto.io, Framer.js, Bootstrap, InVision, Adobe Edge Reflow as well as front-end web development languages HTML5, CSS3, and JQuery. In addition he is skilled with design tools such as Sketch, Photoshop and Illustrator.

He is interested in understanding how people think, solving problems iteratively, and creating delightful micro-interactions. As an advocate for design thinking, Brian believes that many problems can be solved with empathy, creativity, and rationality.

He is genuine, persistent, and fun to talk to.

  • This field is required.

  • We won't share this with strangers.