A process for creating successful products

 

As designers, we are simplifying a complicated world. Great design is intuitive, honest, and is built with empathy for the user. I believe that successful product experiences need to have a simple design, a focused utility, and a crafted execution. In my work, I strive to be bold, graphic, and intentional with every detail.

We can serve our users and achieve our business goals by asking the right questions. How might we increase adoption through a better onboarding experience? How can design systems strengthen our brand message and improve consistency? By interrogating real user and business problems we can iterate on possible solutions.

View my favorite case studies below. I enjoy creating product ecosystems, motion interactions, rapid prototypes, vector work, and UX/UI user flows. I am passionate about visualizing large data sets in interactive user experiences.

 

Selected Case Studies:

  1.   Apple
  2.   Google
  3.   Quantstamp
  4.   HP
  5.   Flux Data
  6.   Data Visualizations

Adwords Dashboard Dark

Apple – Essential MacOS App Redesigns

 
Apple has tighter NDA restrictions than the CIA, so I am unable to go into any specifics about the work I am doing at Apple currently and over the past year and a half. I am working on redesigning internal App Store tools that involve complex user journeys and many possible interactions. I’m glad Apple reached out to work with me as the projects have been fun and challenging.

Along with stakeholders and world class Apple engineers, I am redesigning the user experience of apps that are essential to thousands of people around the world. I am the only dedicated UX/UI designer on the projects.

We are seeing major user experience and aesthetic improvements in the products in the latest work versus where they were before I started. We are implementing a modern 2019 MacOS aesthetic which feels at home with the core MacOS consumer desktop apps.

I created new product identity icons, SVG animations, landing pages, motion studies and interactive prototypes. These assets allow us to promote concepts to stake holders before we go too far down one path. I enjoying transforming vague requirements into real concepts with a meticulous and disciplined design process. I take pride in delivering multiple solutions for all feature requests. When I hand off Sketch files to engineers, pixel perfect alignments are a must, and I insist on providing 100% vector assets.


Role: Freelance Product Designer

User Problem: Users of the internal apps deserve a major update to match the quality and design trends of the consumer MacOS apps. Some power users are requesting new features and changes to the UX.

Business Problem: New technologies have been developed which need to be implemented in the existing apps in best way possible. We can collect better data and have our users work more efficiently. The apps are essential, so updating UX of the panels and many affordances, and cleaning up every detail is necessary.

Process: I meet with stakeholders and discuss the objectives of the design sprint weekly (or bi-weekly). I ask questions about possible constraints, goals of the new features, and verbally pitched possible solutions. I emphasize with the users, ideate possible journeys, and create high-fidelity mock ups for the possible solutions. If there is time I often prototype interactions and motion transitions between the screens. I remember to identify edge cases and responsive screens, After receiving feedback I handoff approved designs and begin the creative process again in the next sprint.

I learned: How to design modern native MacOS apps. I practiced flexibility with changing requirements and conceptual directions. I respected the conventions of the MacOS design system, but also challenged them at times with appropriate creative variants. After all, you have to know the rules in order to break them!


Google Designer

Google – Engaging Mobile Apps
and Android Interactions

 
As an experience designer on the Search Identity Maps and the Future Android UX teams at Google in Mountain View, California, I worked on native mobile products. I iterated on areas of system design for the Pixel phone, UI/UX for the Google App, and Voice UI interactions. I contributed UX concepts in high-fidelity, motion studies, assets for production, and prototyped new app ideas.

Designing for voice user interfaces (VUI) was a new experience for me. Indeed, few conventions were concretely established so we had to invent our own. The best user journeys we implemented involved intuitive navigation combined with simple vocal options.

Challenges included making the interface easy to use for native and non-native English speakers alike. We fount that to many people their own voice is sacred and we can’t convince them to say specific voice commands. “Dogfooding” our work was essential for testing our own products before they made it to production.

I worked with engineers and product managers to dream up possible interactions for the Google App (then called Google Now). Edge cases came up such as losing connection in the middle of an interaction.

We were striving to build apps that the next billion people on the globe who had access to a smart phone and the internet could adopt and find useful.

Design is never done, and with each iteration we focused on our greater goals. We wanted more traction with the Google Apps on iOS devices. We wanted to make the Pixel phone more attractive to users (especially women) who never considered the Android platform before.

We wanted the new logo mark (colored dots and a new logo) to be fluid and friendly assistant who listened and responded with the appropriate feedback. Where else could this beautiful new brand find a home in our app ecosystem?

Google Designer

With the release of the Pixel 2, we were tasked with adding Live Wallpapers and intelligent Sound Managers to the device system. All designs were guided by the principles of Material Design. I animated interactions that responded to sounds on the device.

Google Designer

With the addition of Live Wallpapers on the Pixel 2 phone, I created over 200 new interactive wallpapers, some which changed appearance with the time of day or weather. I found these images from Google Earth and manipulated them in Photoshop. Many of these wallpapers were released on the the device.

Google Now cards

Google Now Box

Google Now Box

I was involved in creating the card-based design system for the Google App, which serves relevant information to users below the search input.

Google Cards UI patterns

Google Cards Material Design

As the first introduction to any app, the onboarding flow is a critical step. It educates the user and provides value propositions. We created and tested many different variations to see what resulted in the highest engagement with internal and external users.

How might we then engage with users and ask them to add their interests? I was tasked with showing all possibilities. The in-stream interest pickers ended up resulting in the highest engagement rates, so we went that direction.

   

I spent sprints at a time I lived in After Effects and Principle creating motion studies and prototypes with my vector designs from Sketch.

Google Local Suggest

Google Local Suggest

For fun we created experimental app ideas that occurred to us, sometimes after hours or on the shuttle, just to see what it might look like as an actual app.


Role: Senior Product Designer

User Problem: Users dont know what Google apps they have and which ones they are missing. Users could get more from the main Google App if it surfaces relevant cards from information in their calendar and email. Users want to use the new Pixel 2 phone and have it be beautiful and impressive to their friends.

Business Problem: Our traction on iOS apps needs to increase. Not enough women are buying Android devices. The Google App needs to provide enough new value to users that they start using it everyday, rather than just Chrome. Users are not using vocal commands enough even tho the functionality is already there. We have a new logo and brand mark, how might we better brand Maps and our other apps to showcase and differentiate our brand?

Process: On Mondays I met with stakeholders, engineers, and the other designers in the Search Identity Maps and Feature Android UX. We we given different tasks to work on each sprint. I iterated on the challenges and delivered polished concepts on Thursdays. We prototyped the best concepts, tested them, deployed some, and began the process again each week.

I learned: The biggest difference I’ve observed at very large companies versus startups is the speed of deployment. Large companies tend to have longer product cycles. Google was the first multi-national corporation I’ve ever worked for and it took a bit of adjustment to find my place in such a big pond. Additionally I learned humility when projects were sometimes scrapped after weeks or months of effort, never to make it to production. I learned to work effectively in an environment full of creative and talented people who are essentially competing to have their work make it to production. Occasionally there isn’t even enough creative work to go around for all the bright minds. I am grateful that I find gratification in the act of creating clever and beautiful solutions.


Quantstamp – Cyber Security Dapps
and Enterprise Client Solutions

 
I joined the startup Quantstamp shortly before they graduated Y Combinator in Spring of 2018. As an early adopter of cryptocurrencies I was curious about smart contracts and I wanted learn how decentralized apps could add value to the internet.

As the lead designer I was responsible for creating both the brand identity and product suite. This included performing user research and empathy of user needs, ideation of solutions to real problems, storyboarding journeys, creating personas, and delivering high-fidelity UI for deployment. I also prototyped products for enterprise clients as well as our own security tool protocols. I designed the website, internal tools, and the style of our certified audits. I created a unified design system of atomic UI components and style/brand guidelines for global consistency. Sketch, Zeplin, After Effects and Principle were my tools of choice.

Smart Contract Scanner

Branded Icons

Smart Contract Scanner

Quantstamp’s main product accepts user’s Smart Contract Solidity code and runs it thru our protocol network of decentralized audit nodes. These nodes run our protocol and return a report of vulnerabilities in the code. User’s pay a small fee to check their code for potential issues.

Smart Contract Scanner

Smart Contract Scanner

While our blockchain PH.Ds refined the security protocol, another team of engineers worked with me develop an enterprise tool for monitoring the status of deployed Smart Contracts. This tool allows users to both simple and detailed views about their monitored tokens. I developed target user personas and designed the app to appeal to their real security needs.

Smart Contract Monitoring App

Smart Contract Scanner

Quantstamp audits a lot of smart contracts manually. To make the audit certification easier, I developed this Audit Launcher internal tool for authoring and generating reports. Using this automated system audits are easy to edit, preview, and record forever on the blockchain. Our auditors loved the tool. Our clients gave us positive feedback about the value added by the certificates.

Inventory

We also worked with select enterprise clients, including two top Japanese car companies and a Middle Eastern government. As the only designer, I developed user journeys, wireframes, identified edge cases, connected interactive prototypes and produced high-fidelity mockups for development.

These projects involve displaying, writing, and verifying enormous data sets on the blockchain. I enjoyed these projects as they allowed me to create decentralized tools like I’ve never seen before. I also had full reign over the custom visuals and micro interactions of the user experience.

Enterprise Decentralized Products

Enterprise Decentralized Products

Decrypt Tokyo Branding


Role: Head of Design, Lead Product Designer

User Problem: People are writing a lot of smart contracts but there are a lot of potential vulnerabilities in the code. Billions of dollars have been stolen via these code vulnerabilities, and new exploits are discovered and reported weekly. The insecure environment makes it scary for big enterprise entities to enter the space, ultimately holding back growth of smart contracts. Code audits are expensive when done manually. Quantstamp aims to alleviate the fear of uncertain code security by creating decentralized protocols that improve the security of smart contracts.

Business Problem: How might be build tools that find product-market fit by addressing real user needs that are currently unmet in the market. How can we create apps that utilize our QSP token and provide value to our token holders. How can we grow our brand in a way that makes our audits essential for all smart contracts that want to guarantee formally proven security? How do we attract developers to use our tools as a part of their daily workflow? What blockchain applications can we build for enterprise clients that are actually game changers for how they do business?

Process: I begin by researching what other similar tools and solutions exist in the space already. I then conduct interviews in-person with real users, as well as survey larger groups on Reddit, Telegram, Discord. When I test with users I have them complete tasks in the prototype / app and see where they get stuck. We review and adjust the designs accordingly. This step is critical for insuring that our products address real user needs and are not “solutions looking for problems”. The design process is not done after launch; I continue to iterate with each cycle. This process continues each sprint as new features become available or priorities shift.

I learned: I learned that your community of target users might say that want a solution but they might be wrong in knowing that they will want and use. B2C products are challenging because general users are fickle. In a new space such as blockchain things move quickly. It’s hard to predict the direction that deserves our greatest focus. I was challenged by such a rapidly changing environment. I was reminded that offering agency-style B2B solutions to enterprise customers often results in the highest return on investment for our efforts. I learned how to establish a trustworthy brand that is consistent, modern and unified. The design systems I helped create played a critical role in rapid prototyping of new products.



HP Orbit

HP – Visual Design Lead for Consumer Products

 
At HP I was hired as a visual design lead for consumer products in Palo Alto, California. I worked on a variety of PC desktop and mobile apps that were eventually released on every HP machine that was produced.

I worked with some very talented designers, developers, and a product manager who lead the projects. HP Orbit is an app that allows effortless syncing of media and information between mobile iOS and Android devices with user’s PCs.

HP Orbit

I created a product icon from scratch that I’m still pleased with. The infinity icon represents continuous syncing between a large and small device. I chose the bright green colors after being inspired by the color of the water on my vacation to the Philippine islands.

Orbit Onboarding

As with other products, onboarding is essential for explaining the value props of the tool and why users should try using it. I always am an advocate of allocating design cycles for focusing on onboarding. A/B analytics and user testing can be beneficial for increasing user retention and decreasing bounce rates.

I enjoyed working with three engineering teams simultaneously: PC, Android, and iOS. The Zeplin app was essential for organizing the assets and spec for each development team. It was a challenge to respect the native patterns of each device ecosystem while still making the app feel cohesive across all platforms.

Orbit Onboarding

Orbit UX user flows

I also worked on an app called Jumpstart which helped users set up their PCs faster. I create a vector icon for the app, as well as defined visuals, user journeys, prototypes, and branded animations.

jumpstart

jumpstart


Role: Lead Visual Designer for Consumer Products

User Problem: MacOS users are able to easily send photos and media between their Mac and mobile devices. PC users want the same functionality. Gamers want an easier way to optimize their PCs performance and overclock the system (we created a tool for this).

Business Problem: We want to compete with Macbooks, which means we need to have feature parody. Sharing files easily is necessary but currently missing from our PCs. Can we do better than Airdrop? Users also cannot receive text messages on their PCs. We want users to engage with our tools, improve our software reputation, and keep up to date with user needs.

Process: I meet with stakeholders and discuss the products we are building that quarter. I work with other designers to discover a workable user flow. I begin wireframing and drawing UI/UX screens. I build an interactive prototype and show the rest of the team. Stakeholders weigh in and we continue to iterate. I develop a product identity and work with engineer teams to get the designs coded. I spend time QAing the coded works making sure they align with the spec.

I learned: I learned to be patient with larger teams and I became used to taking feedback constructively. I was reminded that larger more established companies tend to move slower than younger ones. I learned to abandon the old spec documents and instead use Zeplin for handing off to developers. I got better at working with multiple teams of developers simultaneously. My vector icon, brand identity, and motion design skills improved significantly.


Flux Data

Flux Data – Construction Site Management Tools and Enterprise Apps

 
Flux (now called Helix) is a startup that spun out from Google X. Looking back through my work at Flux, I was surprised by how much work I produced. There’s a comprehensive 12 page Style Guide and atomic UI kit, apps we did with Hilti, Lafargeholcim, PwC and Lendlease, as well as a suite of construction site management apps we built on our Flux platform. As the lead designer at Flux Data, I worked across our agency-style FAST teams well as the core Product team.

We built an app for Lendlease which allows them to better track daily activities on job sites. The app is clean, fast, and works on mobile and desktop devices. It improves communication, accountability, and organization of archived data. We interviewed with the leads on the new Uber campus and Warriors Chase Center, who showed us around and talked about their daily pain points that we might be able to improve with new products.

We also built a Job Site Orchestration app which manages deliveries and schedules using a gantt chart. The app was actually well received by the team who used it on the Uber job site.

Lendlease App

I designed a dashboard for managing placement and cost of cranes on job sites. This saved the client a lot of time and money because they could try different crane placement scenarios in order to get the optimum productivity over cost.

Flux

We designed, but were not able to successfully build, a platform for managing clash detection across architect BIM models. Flux saw an opportunity to build a tool that takes in various BIM models and automatically syncs them together.

The app would allow you to view multiple job sites and then view data about the clashes, progress, and teams of people. It was a cool idea and I designed over 50 screens and user flows for the app. We used Unity for the 3D viewer, but ran into trouble connecting clashes in 3D space.

Flux onboarding

Flux Site

This clever tool would export city building data from a selectable bounding box and export it as BIM for architectural rendering models.

Flux Drive

Flux Drive allowed organization, federation, and viewing of the frequently updated and forked building models in a web app using WebGL. You can search, zoom, and rotate the 3D geometry.

Flux Drive

This commissioned client app managed equipment rentals for construction sites.

Flux Product Icons

I create a suite of vector icons for our various connected products on our platform.


Role: Lead Experience Designer

User Problem: Construction sites often use obsolete apps and could be better served. We observed problems with accountability, data storage, and communication that technology could help fix.

Business Problem: We can turn a profit for our investors if we build products that resonate with construction site workers and architects / craftsmen who use BIM models.

Process: I interviewed enterprise clients and target user personas. The product team discussed what technologies we could use to make their work easier. I drew user journeys for each app, wireframes of user flows, identified the “happy path”, created high fidelity vector mockups. I pushed the approved designs to Zeplin for development and QAed the front-end.

I learned: I learned that we were overly ambitious at Flux. We spread ourselves too thin across too many different ideas. We assumed that the industry would want to change their workflow but forgot that many people resist change (especially if jobs may be eliminated by embracing new tools). I learned to work hard and be at peace when ideas had to be dramatically changed or even scrapped. In the end it made me a more well-rounded designer.


Data Visualizations

Work from my Data Visualization master’s program at MICA (Maryland Institute College of Art).

Top 10 most populous cities in america infographic

Hominoids Primates Family Tree

American Bee Colonies in Decline.jpg

Grassland Ecosystems

New York Times Best Sellers by Genre


T4

Lonely Planet App