I'm a designer living in the San Francisco Bay Area. My goal is to create exciting, elegant, and intuitive interfaces that simplify problems and engage users in a meaningful way.
2017-present
Visa
UX Designer
I led a six month project to redesign an 18 year old B2B web application,
including mocking up 250+ screens for the team to reference. I was able to provide all screens/flows 3 months ahead of schedule. I used Confluence to track key screens and workflows, so the team could see what's being worked on and what's coming up. I used sketch coupled with InVision and Pirinciple to communicate visual and interaction design for product/dev and QA. This project allowed me to contributed refined and new components to the Visa design system.
2016-2017
Shipt
Product Designer
I applied my knowledge of animation, prototyping, coding, research, visual and interaction design to help identify, investigate, and validate the problem and then design, test and ship the solution. I gathered existing user data, brainstormed solutions, created interactive prototypes, reiterated, validated fully formed concepts in front of users, and once finalized - created design specs for engineering. Working closely with engineering, I would test and QA the interaction and visual design.
2014-2016
Tigerspike
Senior User Experience Designer
I worked closely with team members to solve complex business challenges by designing innovative, effective solutions across digital platforms. My position allowed me to cover all phases of the experience design process ranging from Discovery (business, market, and user research), Design and Deployment.
2012-2014
Innovative Interfaces Inc.
UI/UX DESIGNER, UI ENGINEER
I designed and implemented a variety of interfaces for Innovative’s products. My work included the following types of projects: mobile and web applications, style guides and graphic design. I performed all of my work as a member of an agile Scrum team, which allowed me to collaborate with Product Management and other developers throughout the process. My title was changed from UI Engineer to UX Designer to reflect that I was concerned with the entirety of the user’s experience.
2005-2012
Delta Dental of California
WEB PRODUCER
I designed and built websites for prospective customers. I also maintained the corporate intranet and the consumer facing website. I published press releases and was a contributing editor for the company online newsletter. I researched and implemented new technologies for my department, including the creation of training materials. I often served as the primary communicator between my group and other departments. I developed strong product management skills through the experience of coordinating these various projects.
2003-2004
Delta Dental of California
TECHNICAL ANALYST
I conducted competitive data analysis to assess the strengths of our dentist networks. Produced reports for network disruption, network analysis, utilization, and dentist directories.
2002-2003
Delta Dental of California
SUPERVISOR
I supervised a staff of Union employees. My responsibilities included tracking staff workload, schedules and creating monthly reports using a MS Access database.
Kaiser Permanente offers comprehensive, affordable health coverage plans for individual and family, medicare, employers, and large group. Kaiser Permanente is the largest managed care organization in the United States with HQ in Oakland, California.
Design Objectives
Kaiser Permanente employees 500 Sales and Account Managers who are responsible for engaging with and selling to existing customers and prospects. The team was using paper based presentations and laptops as their primary sales aids. The process for preparing and sharing presentations was not conducive to an efficient sales interaction. Kaiser Permanente wanted to leverage iPads as the new primary sales aid and requested our assistance in defining, designing and developing the first generation of an interactive sales application. This great collaboration resulted in the presentation builder and display tool for iPad named Nimble.
Feature Objectives
Create an iPad app for downloading and building presentations on the go
Browse and download files from Box
Present these customized presentations to clients on the iPad itself and connected to a second screen (through Apple TV and hardwired to a projector)
Provide an easy way for Sales and Account Managers to share presentations electronically (Email, AirDrop)
My Role
Develop UI/UX concepts for dashboard, my library, build mode, and present mode
Develop UI/UX concepts for navigation and global UI elements
Create an app icon and assets
Discovery & Scoping
We worked with the client to define what would be included in the MVP implementation of Kaiser’s Presentation Builder app through a discovery workshop. Based on findings from the workshop, we created user stories and then put together a detailed Requirements document.
Design Process
The design phase started with reviewing use cases, creating a taxonomy based on user needs, classifying those needs into categories and creating a list of terms used by the users. Research was also conducted to see what other presentation building apps were doing. Next step was to sketch out the workflow for the entire app (login, dashboard, library, build mode, present, and share modes). Then extensive wireframe documents, including annotations were created for developers to reference and also presented to the client. Once the UX was approved for each feature, I created high fidelity comps and presented them to the client during bi-weekly showcase meetings.
Research
I looked at other presentation building tools and paid attention to what actions where offered during each phase of creating a presentation.
Sketches
Sketches from brainstorming sessions showing the workflow of the app.
Wireframes 1
Wireframe showing Dashboard.
Wireframes 2
Wireframe showing the repository where users could browse and download files which will be used in a presentation.
Wireframes 3
Wireframe showing a Build mode where users can move slides in any order they wish.
Mockups 1
Mockup of the Dashboard.
Mockups 2
Mockup of the document repository.
Mockups 3
Mockup of the Build mode.
Mockups 4
Mockup of the Present Mode. The user has a timer, play/pause, speaker notes, share, stop, thumbnail view, and progress bar.
App Icon
Creating an app icon can be a challenge. I looked for icons showing charts/graphs as inspiration and created four different options for the client to choose from. After a few iterations and fine tuning, the final icon is a mashup of elements taken from the various options.
Final Results
The client was delighted with the final product and held a user group event to showcase this new tool to the Sales. I was fortunate enough to attend the event and observer staff while they played around with it. The app allows Sales staff to take advantage of technology and create presentations right on their iPad. They can browse content without having to worry if it's out-of-date because they are able to pull the most recent files and create a customized presentation for current and potential customers. They can even share the final presentation with their audience via email or AirDrop.
Westfield Labs
Food Ordering App
Westfield Labs serves as a global digital lab focused on better connecting users of digital technology and social media with the physical shopping world.
Design Objectives
Develop a food ordering application that enables restaurant and menu discovery and pre-order of food for pickup or delivery.
Westfield Labs wanted to mobilize their dining experience in the form of an iPhone application. The scope of the project expanded to also include a web application. In the end, the food ordering app connects shoppers, employees, and neighbors with the center's restaurants - providing the ability to order ahead, decrease wait time and receive SMS alerts when orders are accepted and ready for pickup.
Feature Objectives
Offer shoppers and mall employees the ability to order food ahead
Increase shopper awareness of food choices
Increase food sales and revenue for food retailers
Develop an application that can be adapted for shopping malls globally
My Role
Develop UX concepts for restaurant menu and individual product pages
Integrate existing brand concepts into a new feature called Build Your Own
Discovery & Scoping
We worked with the client to define exactly what would be included in the MVP implementation of the Dine on Time mobile application experience. After the initial consultation, user stories were defined and a detailed Requirements document was created. I researched how other food ordering apps UI allowed the user to customize their food order. I noted the strengths and weaknesses of each based on ease of use, speed at which I could place my order and feedback.
Design Process
I began the design phase with creating wireframes based on each user story. I then translated the concepts to low fidelity wireframes which were reviewed with the client. The client has a well established brand which I incorporated into the UI for the Build Your Own feature. Adding another layer of complexity was achieving a consistent look and feel in both the native (iOS) and web implementations.
Research & Inspiration
I looked at other food ordering apps/websites and paid attention to what actions where offered during each phase of creating a presentation and how they were laid out.
Sketches
The client was anxious to see pizza customization options so I quickly sketched out my ideas using a photocopy of the initial wireframe and pencil.
Wireframes - Desktop
Wireframes showing desktop version of the app.
Wireframes & Mockups - Mobile
Wireframes and mockups showing Build a Box of cupcakes.
Mockups - Mobile
Mockups showing the full screen for Build a Box of cupcakes.
Final Results
With the introduction of the Build Your Own feature, the user can truly customize their order. I was able to reuse existing UI elements and restructure them in a way that allows the user to easily and quickly customize their food choices.
SFMOMA
Online Survey
SFMOMA holds an internationally recognized collection of modern and contemporary art. It was the first museum on the West Coast devoted solely to 20th-century art. The museum’s current collection includes over 29,000 works of painting, sculpture, photography, architecture, design, and media arts.
Design Objectives
Create a unique experience with minimal UI that highlights the artwork above all else. Weighing client request and use cases specific to SFMOMA against the overall productization of the Survey tool UX/UI was our biggest challenge for this project.
SFMOMA wishes to be innovators in their field and create a digital response experience that would focus the user on the media and feel distinct from other surveys on the market.
The request for extreme minimalism in the design often threatened to affect overall usability and recognition of the experience as a survey.
Allow the user to specify how they feel after they've viewed/listened to a piece of audio describing the artwork.
Feature Objectives
Online survey optimized for desktop and mobile devices (phone/tablet)
Experience reflects the aesthetic of SFMOMA Expansion site
UI allows users to focus on the artwork media being presented
To provide insight on user's experience of imagery/audio tracks describing artwork
My Role
Develop UI/UX concepts for multi media question screens
Develop UI/UX concepts for navigation and other UI elements
Create color palette, assets for media controls and navigation elements
Discovery & Scoping
We worked with the client to define exactly what would be included in the MVP implementation of SFMOMA's Survey experience. This was defined as user stories and as a detailed Requirements document.
Design Process
I researched other online survey tools and noted how they treat different question types. I began to think how can I design a survey that has minimal UI and allow the user to easily and quickly control the pace that they go through the questions. A large and important part of the experience includes listening to someone speak about the artwork while viewing an image of it. I had to include layout and design controls for the user to play/pause streaming audio, zoom in/out of the artwork, and cover different question types (radio buttons, sliders, checkboxes, and text fields). I started sketching to lay out all the required elements for desktop and phone layouts to help facilitate internal communications around the user experience. I then translated the concepts to high fidelity mockups which we presented to the client. I created a mood board and presented it to the team to help establish the aesthetic feel of the survey. Upon reviewing the sketches, we all agreed on the design direction and user experience. I then fleshed out high fidelity mockups. I inserted the high fidelity mockups into an annotated wireframe document for key screens and then moved on to creating assets for implementation.
Research & Inspiration
The questionaire is comprised of images and audio. I looked at several streaming music apps and other survey tools. I also gathered images that evoke the feeling of movement.
More Inspiration and Color Palettes
I found more inspiration from the SFMOMA's existing color palette and icon set. The client wanted a very minimal color palette for this survey so this specific palette is comprised of one main and one secondary color.
Wireframes & Final Product
I created high fidelity wireframes that are very close to the actual screens. The top shows a wireframe and bottom the final product. The image on the far left shows a Welcome screen and the far right shows a Thank You screen.
Final Results
I designed an interface that met the clients goal of keeping it minimal. The minimal look allowed the artwork to be the center of attention. I designed the interface to be compatible for desktop and mobile devices.
SF Design Week
Anatomy of Apple Watch
Our company hosted an event focused onthe Apple Watch. We presented our learnings when designing an app for Apple Watch. We ran a workshop where attendees could participate in an exercise designing an app for the Watch. Management wanted to give attendees a handout that would be a go-to source of information during and after the workshop. I designed and curated content to create a reference guide. The cheat sheet provides a base understanding of how UI and UX specific to the Apple Watch effect the design of the app.
Design Objectives
Provide a useful and sturdy handout to attendees. The handout should quickly provide enough information to participate in the exercise and to be used as a reference guide after the event, when they are designing their own Watch app.
My Role
I designed the Anatomy of Apple Watch brochure, helped run the workshop activity and provided logistical support.
Design Process
Study the Apple Watch UI guidelines, wear the Watch, find good examples of UI/UX elements specific to the Watch, Design visual elements and lay them out on page, create file for printers.
Brochure (Outside)
I designed the brochure to keep in line with the Tigerspike brand. The brochure is meant to be folded down the middle of the page, along the vertical orange bar.
Brochure (Inside)
The inside of the brochure is sectioned into main elements of an Apple Watch app which includes notifcation types, tables, gestures and navigation types.
Final Results
Attendees were given a survey and the feedback was positive. They liked the design of the handout and appreciated the look of it so much that they wanted to share it with their colleagues/students. They read over the content and referred back to it during the workshop.
Innovative Interfaces Inc.
Patron & Worklists Apps (iOS)
Research | Wireframe | Prototype | Interaction Design | Visual Design | Front-End Development
I studied the iOS Human Interface Guidelines and researched iOS apps before creating these wireframes. My goal was to make iOS apps that utilized the built-in features and behaviors of Xcode. I thought that doing so would make the apps feel intuitive to our users. I also wanted to have a solid understanding of the practical benefits and limitations of these technologies.
Patron App
Working closely with Product Management and iOS developers, our goal was to create an app that provides users a way to fun and engaging way to access and checkout items such as, books from their mobile devices.
The home screen has big buttons for quick access to useful features such as, searching for a book by scanning the item's barcode, self-checkout, seeing their account information and looking up their library's hours, location, news and events.
I created a prototype using Proto.io to show the workflow for logging into the app using their library card's barcode. If the user is not sure what to scan or does not know their PIN, there is a link to a help screen giving the patron instructions for finding their barcode or PIN.
After the patron successfully logs in, they must select a library. The patron types in the name of the library and after typing in the first three characters, a list of libraries matching the characters appears.
I created a title search screen where the patron can type or scan the item's barcode. The search results screen presents the user with a list of items they can checkout or place a hold by tapping the media type icon.
After finalizing the home and hamburger screens, I created mocks to show the final design.
Finalized search results screen with big action buttons showing what format the user is checking out or placing on hold. The patron can checkout/place hold an item from the results or details screens. The workflow is the same on both screens.
I created a prototype showing how a patron can find answers to FAQs quickly and easily. It is a list of questions that is scannable and once the patron has found their question, they tap on it to expand the section to see the answer.
I created a design spec listing RGB values and font types for developers to reference while developing in XCode.
Worklists App
Working closely with Product Management and iOS developers, the goal was to create an app that allows library staff to go directly to the bookshelf and create lists by scanning the book's barcode using their iOS device. This elminates the hassle of collecting, sorting, and then scanning piles of books back at the desk.
Product Management wanted a place for a staff member to quickly access information such as user name, location, and app version. I created a settings screen where they can quickly and easily update their information.
The scope of the project changed and was limited to viewing your lists, creating a list and an options screen that allows users to see what version of the app they are using and library location. This is very important because staff members may work at multiple locations and we do not want them editing lists for a different location.
Product Management wanted a way for staff to take sections of a list. Staff currently print out hardcopies, tear them up and hand them out to staff to go out into the stacks of books and retrieve items. I created a place where an entire stack was represented as a slider bar where they can define start/end points and then create an electronic list.
I was tasked with designing a screen to show all lists in one place and the status of each list. The staff member can see details of that specific list by tapping on the name. A segmented view was added to filter the list to show only to do, found and missing items.
I created a design spec listing RGB values and font types for developers to reference while developing in XCode.
I was tasked with creating a unified UI for all Innovative Interfaces Incorpated's disparate product lines. The iOS apps were included in this massive project. I created a color palette and began documenting these changes in a UI style guide for developers to reference. I redesigned the app to align with the unified UI project. Product Management approved this cleaner look once I tweaked the main menu's buttons.
Finalized home (showing approved buttons) and option screens.
Finalized screen showing a list with no items and items scanned. A new user may not be familiar with how to create a new list so, I moved the instructions closer to the action button (barcode icon) in the tab bar.
Alternative design.
Aveda
Mobile App
Interaction Design | Visual Design
Aveda sells natural and organic products ranging from skin care to hair care. Aveda also maintains a variety of partnerships with salons and spas that use their products.
I was tasked with designing screens an iOS app. My role was focused on visual design. The client provided the photos and brand guidelines + color palette which I worked into the app. I designed these screens using Sketch and exported assets to Zeplin for the development team. In all, I designed 50 screens for the following sections of the app - Sign In, Home, Join, Profile, Questionaire, About Us, My List, Connect Your Account and Find a Salon. Although the focus was initially visual design, there were additional interactions there were not covered in the wireframes that I was tasked to resolve. This includes - 1) forms showing success, missing and erroneous field states, 2) list views showing multi-level open states, profile pages with and without an avatar and 3) landing page.
Personal Project
PetPortal
Visual Design
I redesigned these screens for usability and accessibility purposes.
I designed the logo and created a color palette. My intentions were to keep it very clean and easy to navigate. The purpose of this app is to register animals into the system. This web application is primarily used by those working at animal shelters. Those incoming animals that are brought in need to be added to the system and there is a lot of information to note. My goal was to keep in streamlined and keep the form fields to a manageable size so that the registrar can quickly scan each question, fill it out quickly so they can get back to helping the animal get situated and comfortable at the shelter rather than spending a lot of time in front of the computer filling out forms.
Here are examples of redesigned screens showing log in, search and registration.
Log in
Search
Registration
DirecTV
NFL Sunday Ticket
Wireframe | Interaction Design | Visual Design
DirecTV's NFL Sunday Ticket app allows those with a subscription to access to watch every live, out-of-market regular season NFL game every Sunday afternoon. This is one of several projects I worked on for this client. This particular feature is for rating the app on iOS, Android and Windows mobile devices.
Design Objectives
ENCOURAGE DIALOGUE - Use of conversational language encourages more of a dialogue with the user. Giving them an opportunity to provide feedback to NFLST instead of just writing a poor app rating minimizes the effect on marketing the app. Ask for their help making the app better, instead of begging for ratings.
UNOBTRUSIVE AS POSSIBLE - Don’t bombard the user with needy requests every single time the app is updated. And always give them an “opt out” option to never be asked again.
HAPPY POINTS - Only ask for ratings when the user has successfully consumed the content they want - don’t interrupt at launch, during live games, or other times when they are more likely to just opt out right away.
Feature Objectives
Improve app store ratings for NFL Sunday Ticket
Target users when they have had a positive experience
Avoid having “knee jerk” reactions to bugs or issues from ending up as the only reviews in the app store.
My Role
Develop UX concepts for several platforms and adhere to those specific platform native interaction behaviors
Wireframe those concepts
Present solutions at check-in and weekly showcase meetings
Discovery & Scoping
We worked with the client to define and finalize what would be included in the MVP implementation of NFL Sunday Ticket app based off a rqeuirements document.
Design Process
I researched what the existing workflow for modals with each platform, then taking that native behavior paired with best practices came up with a solution to present the Rate the App modals to the user. Along with this, with the engineering team we worked out the technical details as to how we present the request to rate the app to the user. There were challenges at this stage in the project due to limitations as to how use of the app was tracked and promoting a "Skip" option in the modal. The issue was resolved by tracking number of app launches. Ideally, I would have liked to track when the app was last opened, where the user was last, incorporating an inline rate/feedback option in certain areas of the app.
Below are wireframes for Rate the App feature
Workflow for Android
Workflow for iOS
Workflow for Windows
Settings menu and workflow
Other projects I've worked on for the client included visual design for My Favorite Players, Notifications for game start and close game, and Airplay + Picture-in-Picture. These features covered platforms such as, iOS (phone and tablet), Android (phone and tablet), Windows (phone and tablet), XBox (phone and tablet), Playstation (phone and tablet), Samsung TV, Roku, and Amazon Fire.
Shipt
Shipt Shopper
Research | Animation | Visual Design | Interaction Design | User Testing | QA
I designed these screens for our Shopper app (iOS version) using Sketch. It's the app that Shoppers use when claiming orders, gathering items and delivering them to the customers. This example focuses on a feature I designed which utilizes a swipe gesture to quickly add/remove items to their shopping cart. Along with this quick add/remove feature, I also worked on creating a modal to refine the list as well as an expand/collapse view.
Once the visual design was finalized, I tested the workflow (created a prototype using InVision and posting it on Usertesting.com), gathered feedback and did another round of design. Once the design/workflow was finalized, I uploaded the screens to Zeplin, passed on the Zeplin link to the engineer out in Alabama who then built out the screens. As he worked on them, he would send over a demo as a Quicktime movie. I would review UI and animation. We would refine as necessary to that the experience was smooth and timely.
Default Shopping List view:
Header shows how many items have been added to cart and how many items are left.
Refine button which displays a modal to sort the list by customer, categories (frozen, dairy, produce,bakery, aisle, etc.).
Expand all button which opens up each category and exposes product details. By default, the list is
collapsed. That way, the Shopper can select a category to view and not have to scroll through to find
which category they'd like to focus on.
Each list item shows a category and (in red) denotes how many items are within. Color goes green when each category is fulfilled.
Scan button displays the camera where the Shopper can scan a product's bar code to quickly add item to
cart.
Category that is opened to reveal product detail.
Swipe to quickly add item to cart.
Tickmark displayed when category is fulfilled.
Swipe to quickly remove item from cart.
Shipt Design Challenge
As part of the interview process at Shipt, I was presented with a design challenge. The challenge was to answer two questions - 1) "The steps of going from simply hearing about Shipt in your area to placing you first order requires too much effort." and 2) "Simplifying the first-order experience could result in more memberships." I created a document that I presented to the team (i.e. Product Director, Product Manager, Engineers and Product Designer).My goal for the challenge was to show my design process which includes researching the landscape, conducting a competitive research, creating personas based on research, conducting a design audit on the current app, proceeding with usability testing and gathering metrics to validate my proposed solutions.
Innovative Interfaces Inc.
Icons & Logo Design
Proposed app icons for Patron and Worklists apps
Proposed action icon set for mobile app
Icon set for material types
Icon set for Circulation web app
Proposed logos for Express Lane. Express Lane offers libraries a user-friendly way for patrons to check out library
materials using a PC workstation.
Proposed logos for company's internal library. Integrated company's color palette when designing logo.
