UI / UX

An iterative, research-based approach to UI & UX design.



experience

.

Creating satisfying interactions and clean layouts is always my goal. I worked for a year and a half at Microsoft as a Visual / Motion Designer on a 3D Capture experience and learned the process of designing UI elements and interactions on a shipping product.

My greatest strength as a designer is coming up with a multitude of design options quickly and iterating upon those directions. I value simplicity and try to make my designs functional as well as beautiful.





















projects

Mobile 3D Capture - Microsoft

.

Working as a Visual / Motion Designer at Microsoft, I designed the UI from top to bottom - from initial concept to final assets. I worked with UX designers and developers to create solutions that eased implementation and accomplished design goals.




What is it?

.

The purpose of mobile 3D capture is to allow users to quickly and easily create 3D models from the physical world. Our goal was to make it as easy as shooting a video. The end result would be a library of user-generated 3D content that could be leveraged in AR / VR for a future that's increasingly 3D-centric.



quickly and easily create 3D models from the physical world







UI Design Process

.

Our UI design process was a constant back and forth between UX designers and myself. We used Adobe XD to keep track of our progress and to share with the rest of the team for feedback. I worked with our art director to take the basic app wireframes and apply a style that met Microsoft's design guidelines and felt simple, beautiful, and easy to use.

While I was at Microsoft the Fluent Design guidelines were being developed so it was an interesting process to simultaneously adhere to and influence the direction of Microsoft's design language.




[purposefully blurred for confidentiality] App screens designed in accordance with emerging fluent design guidelines




3D Prototypes

.

Throughout the app design process I was able to be involved in not just the UI design, but also some of the 3D interactions. I worked on creating 3D transitions to show the model being built as well as how the visualization during scan looked. Using camera tracking in Cinema 4D and photogrammetry, I created accurate mockups of complex 3D behaviors to showcase how the app should behave when implemented.

Additionally, we needed a way to make scanned models presentable - raw scans lack a backplate and often have rough edges. I worked in ZBrush and Cinema4D to create 3D mockups of how scans could be processed, and delivered these visuals to our developers.




[purposefully blurred for confidentiality] Transition mockups created in Cinema 4D with photogrammetry assets. Comped for the Lumia 950




Vision Videos

.

When I wasn't creating UI designs or motion studies I worked with our creative director to craft vision videos for future Microsoft products. These were solely used internally so unfortunately I can't share any details, but they were always a blast to work on and often were completed in just a few days. While I no longer work at Microsoft, I'm told that these videos still circulate. Maybe one day I'll see one of them come to fruition.




Conclusion

.

I learned so much at Microsoft, but maybe most important was collaborating effectively with my colleagues. Working in a fast-paced environment on a small team is invigorating, and it's amazing to see how much can get done. I'm grateful to everyone I worked with and I'm happy I was able to work on such an interesting product that pushed the boundaries of what can be done on a mobile device.



Working on experimental, emerging technologies - especially in mixed reality - is what I love to do.










Pedal

.

Pedal is a conceptual mobile app and virtual reality experience geared towards helping beginner cyclists learn safety basics, laws, and biking etiquette. How can we get more people biking to work?




Problem

.

Bicycle commuting is great in all regards - environmentally friendly, getting exercise and fresh air, and avoiding the gridlock of traffic are just some of the perks of riding to work or school. However, in the United States only about 1% of commuters go by bike, while 86% drive, 5% walk, and ~4% work from home.



The top two reasons more people don't commute by bike are lack of confidence and safety concerns.



The top two reasons more people don't commute by bike are lack of confidence and safety concerns. Our goal is to teach beginner bicyclist commuters safety basics before they even get on their bike - giving them experience in dangerous scenarios, all in a safe setting. Knowledge of what could happen and how to properly react will help beginners gain the confidence they need before they hit the road.




The adorable training city we created with Cinema 4D




Team

.

This project was completed over the course of a workshop led by Chip Truex of Instrument and created in collaboration with a partner, Amelia Barlow. At the end of the workshop, we presented the final product at Instrument's headquarters in Portland.




Research

.

Demographics of Bike Commuting in Portland
This study conducted by the Portland Office of Transportation helped us narrow down our target audience. The study found that 33% of the population wasn't at all interested in trying bike commuting, 60% were "interested but concerned," and less than 7% felt "confident and fearless" while biking on the road. Going forward, it was important to stay focused on the "interested but concerned" portion of the population.

r/bikecommuting
We asked Reddit's international community of commuter cyclists (21,000+) to help us by filling out a survey we had created. They were extremely helpful, and within a matter of days we had recieved 390 responses. The most important question we asked was "What is the hardest part about starting to commute by bike?" - to which the overwhelming write-in answers were confidence and safety.

Competitors
There are plenty of apps and resources out there that cyclists use, but the majority of them are meant for experienced cyclists - not beginners. Activity trackers and route finders dominate the market, and the only resources for beginner cyclists exist in the form of short online guides, articles, and legal documentation of local bike laws.




Process

.

Completed over the course of six weeks, the first four were spent researching, concepting, and fully developing the user flow, experience, and interface of Pedal. The last two weeks were devoted to creating our assets using a combination of Illustrator and Cinema 4D.




The adorable training city we created with Cinema 4D




Concept

.

Knowledge + experience = confidence
Pedal is an educational app with an accompanying Google Cardboard VR component. Pedal serves as a checklist for safety situations, including potentially dangerous scenarios cyclists often find themselves in while biking to work. Achievements are rewarded after tutorials are completed, giving beginner cyclists encouragement to get on their bikes and learn about safety tips and laws that will help them gain more confidence when it comes to riding.




Spherical render created for use with Google Cardboard




VR Exploration

.

As an experiment in VR development, I exported the 3D models we created into Unity and added some basic object interactions as well as a teleportation locomotion mechanic. The result is a fully destructable miniature city that you can essentially terrorize as a giant. This doesn't really have much to do with the brief, but it is a lot of fun.




You can almost hear their tiny screams










World Wildlife Fund - Reality

.

A material design app designed to drive donations for the World Wildlife Fund. It centers on a series of VR locations that can be visited using Google Cardboard.

...

Next category

virtual reality

email ... instagram ... vimeo ... linkedin