San Francisco Bay Area
I'm a UX Designer!
UX is not just UI design, it's so much more!
Product UX Designer, 2016-Current : I've led the software design efforts for products like a cloud-based, urban planning platform for city planners (startup in Berkeley); and a self-service, collaborative big data platform for business users (Informatica).
Hologic, Sr. UX Designer, 2013-2016 : I helped radiologists ease the transition from analogue 2D imaging to digital 3D imaging with intuitive software design -- and also helped establish a UX process and pattern library within R&D.
Model N, Sr. UX Designer, 2011-2013 : I helped increase usability of two revenue management applications with intelligent redesigns -- and also increased efficiency of R&D by establishing a style guide and reusable pattern and graphics library.
E*TRADE, Experience Architect, 2010-2011 : I helped active traders maximize efficiency by adding and enhancing features for the Power Etrade Pro active trading platform. I also designed a conceptual mobile Windows phone trading application.
UX/UI Design Consultant/Contractor, 2006-2010 : I worked as the lead designer on projects like a DNA sequencing mobile app for Illumina, a new intranet for Jamba Juice, a Surface tabletop app for Visa, a mobile contact card app for the Chicago Police and many more.
June 2013 to July 2016
Senior UX Designer
-- Hologic, a leading global healthcare and diagnostics company, is striving to make advances toward greater certainty with cutting-edge technology.
-- I was hired in 2013 as a ux/interaction designer with the R&D team in Sunnyvale, CA and spent most of my first six months visiting customers throughout the U.S. (along with the product manager) getting a good understanding of our target personas - radiologist and technologist.
-- Observing use and interviewing customers helped the team validate assumptions, and lead us in a new direction. (Initially, we had thought we'd be working toward a web-based application that would help radiologists when presenting at a board review but we learned there was more of a need for a low-cost, low-footprint, browser-based 3D image viewer which is the path we decided to take.)
-- Prima is a browser-based, 3D image viewer for radiologists and technologists to use for efficient viewing of 2D and 3D mammography images, movies and reports. Typically image viewing is done on special, high-resolution, black and white monitors in a dark environment so we decided on a dark theme.
-- Prima includes two main components, a patient list that can be searched and/or filtered, and an image viewer where patient images can be opened and analyzed. Working with a multi-disciplinary team (including pm, dev, QA, and documentation) I was responsible for the end-to-end user experience including use case diagrams, sketches, wireframes, concepts and final, detailed Axure specifications (samples shown above). I also created and maintained an HTML/bootstrap styleguide (sample shown below).
-- Usability testing was conducted for Prima 1.0 - initial release which was submitted to and approved by the FDA. Enhancements were made for Prima 1.0.1 - the initial customer release. The main enhancement was a feature for query & retrieval of images, where users could search for images from the network and pull them into the viewer on demand when needed.
-- After the first year I was able to hire, mentor and lead two junior UX designers - scheduling work and allocating resources for bug reviews and feature enhancements for Prima 2.0.
-- The homepage (1.0 implementation shown above) was purposefully designed to make signing in an afterthought. The first action we wanted the user to take is to search or browse for a patient. Once they've engaged, we then prompt for sign in if needed. The central image is made of flowers that were x-rayed by a Hologic machine :) fyi.
-- The patient list (1.0 specification sample shown above) includes a patient timeline which gives users the ability to more quickly see those patients who have a new study - when compared to the other grid-type layouts that other Hologic products use.
-- I designed the study icons (shown above) to visually show a difference in 2D versus 3D studies, as well as three different study types with badges (red/biopsy, yellow/diagnostic, green/screening). These can also be unknown studies, which is when an icon would appear empty/blank.
-- The image viewer (1.0 concept shown above) included tools such as pan, zoom, inverting, adjusting contrast, flipping and measuring. Concepts are typically like these - wireframes by feature done quickly with callouts in powerpoint (part of the measure feature is shown above). Icons used in concepts and Axure are usually from font awesome.
-- The Prima administration portal (shown below) was created for Hologic employees to have a way for cloud-based, Prima customer and license management. It was designed to be a sibling to the main application. Feedback from end-users here was easy since this was an internal application and since it was cloud-based it was also very easy for the team to update and manage.
June 2010 to December 2011
-- I was hired for the "Power E*TRADE Pro" product - an advanced, desktop, java based, trading application for active day traders.
-- In my first year, I was able to visit about dozen customers around northern California, with the product manager, to observe usage in real-world environments and test prototype concepts (iRise was used for prototyping here - I'm flexible with the tools I use!).
-- I redesigned the News panel to better accommodate user needs. Used field study research and iterative user testing with customers at the San Francisco Etrade office to helped to validate and finalize concepts.
-- Notable improvements:
-- Also, designed light theme version of News panel since the product offers both a light and a dark theme
-- So, what did the legacy News panel look like, you may ask.....
-- The "Alerts" panel is for users to set up rules to be automatically alerted when a certain condition had been met. It was redesigned based on customer feedback and usage statistics.
-- When users want to add a new Alert, they can click the Add icon in the version above to expand the panel to the version shown below.
-- Users wanted this panel to be opened more often, but because of the size of the legacy panel, it was closed and generally forgotten about. The ability to hide the unused portion, and keep the panel generally open was important for this redesign.
Strategy Scanner Panel
-- The premise of this panel is to use past behavior to try to predict future performance based on existing stock strategies.
-- First, user must select whether they are looking for bearish, bullish or more neutral strategies (see below).
-- Then, the user must select their specific criteria and select Go to run the strategy (as shown below).
-- When a stock matches the criteria of a given strategy, the user is notified as shown below.
So, what did the legacy Strategy Scanner panel look like you ask.....
Customizable Trade Ticket
-- A new feature I worked on was one to have a customizable trade ticket. The legacy ticket allowed for only one trade at a time, but as you can see from the sequence of concepts below, the new design gives the user much more flexibility in combining trades for one transaction.
-- The simple, default ticket is shown first below
-- The user can add a line
-- Or, more than one line.
-- And, the user can add different types of trades, like options.
Sectors Heat Maps
-- The "Sectors" panel was not being used as much as the product team liked, so the redesigned concept (which tested well with customers) was to offer the ability to view this information in more of a heat map style. The screens below are a series of views of the concept.
-- The "Technical" view:
-- The "Heat Map" view with "Indexes" section expanded by default:
-- The "Heat Map" view with "Sectors" section expanded:
-- The "Heat Map" view with a specific sector, Transportation, expanded:
-- The "Heat Map" view with a specific industry selected, Railroads, expanded and below user sees "heat" indicators for the symbols within that industry.
-- This concept was waiting for implementation at the time of my departure from the company.
What did the original "Sectors" panel look like anyway?
-- I redesigned the CNBC panel to better accommodate user needs, and move to Flex technology.
-- I used field study research and iterative user testing with customers to validate and finalize concepts.
-- I worked closely with CNBC partner to ensure a seamless experience.
-- Most notable is the expandable/collapsible side navigation to aid in organizing and categorizing the available on demand videos.
December 2011 to June 2013
Model N, Inc.
Sr. UX Designer
-- I was responsible for ensuring the company’s Life Sciences and High Tech revenue management applications had exceptional user experiences.
-- I designed interactive prototypes as well as created detailed UI specifications for both enterprise applications mainly utilizing Axure RP.
-- I visited customers throughout the US; observing usage, testing prototype features and interviewing end-users.
-- Specifically for the Life Sciences product, where the bulk of my time was spent, the mandate was to convert and redesign where possible the legacy application to utilize the more modern offering of Bootstrap and HTML5. Shown below is the home page.
We also offered the home page in a dark theme.
The application gave users the ability search through sales order and fulfillment data, mix and match it, in order to compile it into useful and meaningful insights.
The application had almost 20 different modules not only for searching through sales, customer and product data but also had a regulatory module to ensure, for example, that no one was buying or selling pharmaceuticals at prices that weren't authorized.
The search panel could be collapsed to give the user more viewing area for data analysis.
-- The High Tech application sign in page (shown below) was designed to be fluid for almost any size browser window.
-- I redesigned the header of the application to have the one central "N" button which on a click would open a menu (shown below). Previously, all items were shown on the top toolbar and it didn’t scale down well for small screen sizes (i.e. it was not tablet friendly).
-- I designed an action "tray" which was docked to top right of the header bar. This replaced having each individual action icon on each line item of the table saving space and reducing redundant visual clutter. This was very well successful during usability testing.
mobile and more...
I've worked on other things in addition to those specific projects mentioned in my case studies. Here are a few of them...
mobile browser app (2010)
-- For a DNA sequencing instrument while contracting at illumina
-- At the time, the process of dna sequencing would take about a day. Users of the sequencing instrument wanted a companion mobile application so they could monitor the progress of the process even if they were not in the office. This made it possible to be alerted if there was an issue, so they could get back to the instrument quickly when needed.
-- This was designed as a mobile browser app, in HTML5, to be viewable in any mobile-sized viewport.
Instrumentation software (2010)
-- For a blood/cancer cell detection instrument at illumina
Windows 7 phone app for e trade (2011)
-- Worked with PMs to solidify requirements and define feature sets. Created concept screen designs and iteratively tested internally with users who had a Windows 7 Phone.
Tablet app for model n (2012)
-- Conceptual sales chargeback app for model n that was being designed and tested to be compatible on a tablet (conceptual only in 2013).
Margin calculator tool for e trade public website (2011)
-- Designed a new Margin Calculator tool for the company's public website.
-- Worked closely with PMs and engineering to conceptualize designs and conduct formal usability studies with HTML prototypes I created.