Leading research and design that drives results. Expert in determining user pain points, generating new solutions, and synthesizing variations. Connecting design principles and best practices with business goals, and defining success metrics.
Or you came back?
Single page PDF I authored as a starting point to increase engagement and fan base.
Roostify - Design Object-Oriented Home Lending Experience
Summary: Roostify is a digital mortgage SaaS responsive web platform that simplifies and accelerates the home-buying experience. Principal designer of major new features, building and incorporating pattern libraries, and designing new workflows.
Problem: Borrowers and Lenders for home loans are bogged down by mountains of paperwork, and archaic systems. The current platform fell short of satisfying users' needs of communicating and working on the most important, time sensitive processes. We needed to know more about the home lending journey, lender's workflows, and communication points in order to design a better experience. Lots of communication and process was happening outside of the platform, making it difficult to track, causing borrower confusion, extending times to close, and creating insecure communications.
Process: We started with a research plan, partnering with Cooper Design to contract 2 main researchers to travel on-site to several banks across the country to develop a better understanding of the home loan journey. Combined with in-house and field interviews, we then created archetype personas and user journeys for both borrowers and lenders. Adopting a development term, we realizeed we needed to make the interactions object-oriented.
After assembling the full user profiles, 1 researcher spun off, and I partnered with the remaining researcher/designer to whiteboard the patterns, functions, and design artifacts we needed to improve communication throughout the home lending experience. We would switch duties whiteboarding, one person generating and the other synthesizing, both problem solving for the user personas. Focusing on the borrower dashboard, we boiled down the order of importance through a combination of persona mapping, and in-house user testing with the customer service team.
When a draft seemed ready, we checked in with my design director, and coordinated a group presentation and critique, up to a VP and the CEO. While presenting, we took notes of major points on post-it notes, end integrated the feedback into the next whiteboard.
Solution: The final whiteboard was presented in tandem with an example user journey, and was sketched out to include new UI elements and signifiers. It was then documented in a presentation as a guide for next steps, ready to be shared to greater teams.
Team: 1 UX researcher, 1 UX researcher/designer, 2 product managers, 1 design director, 1 VP of product, 1 CEO
Timeline: 1 month UX research, 1 week crafting personas & user journeys, 2 days defining product improvements and scope, 1 day initial whiteboard, 1 day presentation, 1 day revised whiteboard, 1 day presentation
First Whiteboard Wireframe
Intentionally quick and messy to focus on agile changes. First draft of new borrower dashboard with object-oriented actions, messages, and status. Icons and UI kept to a minimum to focus on overall information architecture and user actions to walk thru.
Feedback Notes
Post-It notes were added from team feedback on layout, interactions, and journey, to be integrated into next version.
New Borrower Dashboard
Quick 2nd draft of rapid whiteboard, many times wiped clean and re-done. Integrating notes and feedback, the new borrower dashboard adjusted its layout, added more UI icons and signifiers to better communicate to borrowers and lenders at-a-glance what was going on, and most important action to take next. New UI included a progress bar, new icons for quick scanning, and basic typography treatment to flesh out basic proportions.
Vlocity - Neustar Support Portal
Summary: Vlocity is a SaaS cloud computing solution for the communications, insurance, and government verticals. I was the lead UI / UX designer and developer on the sales team for creating dashboards, purchase flows, and portals on the native mobile / tablet iOS app, and mobile-first responsive web experience.
Problem: Neustar had an enterprise support portal designed desktop-first in the 90's. It was outdated with both design and technical debt. They desired an updated UI and UX that aligned with their marketing brand redesign, and also to take inspiration by Salesforce's own support portal.
Process: I did a 50/50 split of design and development, from research to delivery. Starting with research from Neustar stakeholder interviews, I assembled a list of research into their current UX, and design goals. Taking inventory of their current support portal, I re-mapped the information architecture with card sorting and mental models, creating a flatter, more efficient entry page.
Next, due to time constraints put together a guerilla styleguide based on Neustar's recent redesign, combined with Salesforce's own support portal and lightning design system.
Then I did some quick sketches to check the grid pattern of the new desired card layout system, and jumped into the browser to design and develop directly. After a quick check in of the layout and design direction combining a rapid HTML prototype with a design inspiration board, I then proceeded with the full design, UI asset creation, and development of the portal.
Solution: Delivering a new mobile-first, responsive design, enterprise support dashboard prototype that aligned styles with Neustar's new look, and stakeholder requested inspiration from Salesforce's support portal.
Team: 2 remote sales leads, 1 remote sales associate, 1 UX designer, core on-site development team as needed
Timeline: 1 day for user research, 2 days of style and branding, 3 days of design asset creation and front-end development, 1 day of presentation
Design Research and Direction
A quick, guerilla styleguide and design board was put together from scanning Neustar's new marketing site, combined with Salesforce's own support page. I picked colors out of Neustar's brand, created custom icons and SVGs, and integrated them into the final portal redesign.
Vlocity - Sprint Customer Service Dashboard
Summary: Heading UX design and development of Vlocity sales division, I created fully developed demos to pitch to customers. Designing and building unique, on-brand, user centric CRM dashboards built on the Vlocity, AngularJS, and Salesforce tech stack.
Problem: Sprint was looking for an updated, central dashboard for their customer service. It had to give at-a-glace information for quick service, plus be able to edit a customer's profile and perform certain actions. The sales team needed an on-brand demo ASAP in order to win over the client.
Process: Coordinating a group chat with the team, we defined current gaps in Sprint's system, and top actions their customer service needed, plus additional actions to improve their UX. Taking that bullet list, I then defined a story through the personas of a service representive and end consumer, and storyboarded their interaction.
Next I performed a quick style survey of Sprint in order to customize our platform to their brand. After some quick sketches, and check-ins to verify we were on the right track, I jumped into the browser, doing 50% design and 50% development, customizing our SaaS templates. When I got stuck, I would work with one of the senior developers to figure out the issue, and we'd define the best path forward and how to add it to our style patterns.
Solution: A fully working, on-brand live demo, built on Vlocity's platform on a Salesforce back end. Key micro-interactions included dynamic special offers, and expandable actions and details on existing products. The sales team successfully presented the demo, impressing their audience.
Team 1 remote sales lead, 1 on-site sales lead, 1 remote sales assistant, core on-site development team as needed.
Timeline: 2 days of research, 3 days of design & development, 1 day of testing, 1 day of presentation.
Responsive Multi Use Template Process
Summary: Leading the UX design of digital products and experiences with internal and external design and development resources. Designing overhauls and iterative improvements from a desktop-first website, turning it into a mobile-first website, that serves over 4.2 Million members. Integrating best UX patterns and practices on a tech stack including Drupal, Salesforce, Sass, HTML5, and CSS3
Process: I brought together business and digital stakeholders to research and define what types of pages and page content were needed. Then analyzed major breakpoints according to in-house analytics and major form factors at the time.
Next, formulated multi-use templates to be used in a Drupal based CMS, pulling existing CSS and typography styles as much as possible. Templates were created in Balsamiq, then output to multi-page Adobe PDF's for easy shareability and feedback across on-site and offshore teams.
As part of my process, I'd also create fully responsive prototypes using frameworks like Bootstrap or Zurb Foundation, to showcase real HTML and CSS for demos, feedback, and reference for QA.
Solution: Delivering a multi-page PDF, with zipped HTML prototypes, that an offshore team made into new Drupal CMS templates. Adding comments in the final PDF's for annotating framework components, HTML elements, and CSS classes, I'd deliver to engineering the template assets and documentation, and we built the templates following mobile-first UX design patterns, and responsive design best practices. I'd coordinate weekly QA check-ins to ensure all business, technical, and design goals were being met.
Team 1 VP of business, 2 business leads, 1 product manager, 2 digital producers, 2 in-house developers, offshore development team.
Timeline: 2 days to define needs, 1 week of wireframes and protoypes with feedback, 1 month of development and QA.
Template PDF with Annotations
See the full annotated PDF in a new window. Depending on browser and reader, you may have to download file to view "comments" for HTML and CSS annotations.
AAA Online Garage Wireframe and User Flow
Leading the wireframe, and user flow planning for AAA Northern California's new feature Online Garage. Identified in business requirements 3 possible user groups, and designed the most efficient flow to account for all 3 groups. Here is an overview covering all flows, and below are flows for registered AAA members, and non AAA members.
User Journey Map
See Full Resolution in New Window
Utilizing myBalsamiq to illustrate the email sign-up process for UC Berkeley Center for Executive Education. Employing user journey maps for illuminating multiple pain points and drop-offs. Discovering previously unknown pitfalls and challenges in the newsletter sign-up process.
Design/Development Interactive, Dynamic Google Map with JavaScript, HTML, PHP, and MySQL - Live Example Below
Utilizing PHP and MySQL to create a dynamic array of JavaScript objects into Google Maps APIv3. Dynamically pulling criteria such as market name, season, time, location, and social media links, then appending to JavaScript to be displayed in an HTML info window. Additional logic included selecting markets by zip code, season, day of the week, available produce, and market producers.
Today's Simulated Date: March 28
- Open Market
- Closed Market
Upgrading from the Google Maps APIv2 to APIv3, I created an interactive map for PCFMA. Implemented PHP and MySQL to create a dynamic array of JavaScript objects containing all the data. This example is hard-coded in JavaScript with an assumed current date in March to show the open and closed season examples.
Social Media Management
Chart: 833% organic fan increase in a single year
Developing social media guidelines, policy, and style guides. Record-setting shares and fan increases over 19 unique Facebook pages.
Formulating a Social ROI plan to track 3 main criteria: virality, engagement, and growth. Aligned marketing goals by analyzing Facebook Insights for "28 Days People Talking About This" for virality, "28 Days Page Engaged Users" for engagement, and "Lifetime Total Likes" for growth, respectively.
Social Media Management
Chart: 189% average increase of Facebook Likes across 19 unique brands in a single year
Establishing marketing goals for social media. Tracking and reporting of 19 unique brands utilizing Facebook Insights, Power Editor, Excel, and Google Docs.
My team worked to find the identity and voice of unique brands, and trained trained staff in social media policy.
Google Analytics
Based on traffic funnels, rocketing the mobile web redirect from 26% to 100%
Administering and management of Google Analytics across multiple domains and sites. I've setup and administered Google Analytics for Model N, BrightRoll and the Pacific Coast Farmers' Market Association.
In the above graphic, you can see the mobile redirect rate rocket from 26% to 100%, through new JavaScript and PHP redirects I programmed. Previously, customers were only being redirected with limited entry points.
Other work includes optimizing and improving CTR (click-thru-rate) with data-driven A/B tests. Minimizing bounce rate with analyzing user flows, pain points, keywords, and points of entry.
Case Study: Kaiser Farmers' Markets Brand Identity Alignment
Challenge: Bring cohesion between Kaiser Brand Identity Standards and Guidelines, and farmer's markets collateral.
Process: Utilizing Brand Identity Standards and Guidelines, align collateral artwork and designs. Formulate new color scheme to unify products. Optimize file size and quality.
Solution: New color scheme to align brand and identity, improved typography, improved layout, optimized overall file size from 94MB to 23MB
Color Selection
To align with the official Kaiser Permanente style and brand, a base color of KP Blue was first selected as a primary hue for maximum brand recognition.
Accents, neutrals and contrasts were then selected to reference pillars of the farmers' market identity:
Combining color psychology to reflect these values, while referencing swatch samples from the established farmer's market shopping bag motif, lead to a cohesion aligned with the Kaiser brand, and farmer's market identity.
2.5D Motion Graphic
Utilizing Cinema 4D built-into After Effects, a "2.5D" effect can be made, bridging the gap between our 3D world and the 2D screen world.
Fresh Approach Tri-Fold
Working with Fresh Approach, a non-profit geared towards improving food access and nutrition education to disadvantaged communities, we formulated the branding, and identity. The above graphic is from a fundraising tri-fold, used in conjunction with a special HBO screening "Weight of the Nation" in Oakland.
We established a voice, color scheme, typography, and graphic design to reflect their values of health, sustainability, community outreach, and uplifting nature.
"No Ka Oi" T-Shirt Screen Print
In Hawaii there's an everyday phrase "No Ka Oi". Stemming from the Hawaiian language, it translates to none better, or unsurpassed in quality. I chose this phrase as a centerpiece in a series of designs that was aimed at the broad topic of "everyday wear".
Sacramento Zoo Coloring Contest Poster
As part of my many-hats work for the farmers' market, I would create 11 x 17 tabloid size posters to advertise special market events. This poster and accompanying handout (see full picture for example) was one of my favorites because I was able to put my illustration skills to good use for a good cause.
"Viva Von Tease" Painting
Commissioned for Dark Friday's "Murder, Mystery Mayhem" event. Drawing inspiration from the event's film noir theme, and edgy art style of Frank Miller, I made this painting in ink and acrylic on canvas. I used Photoshop and Illustrator the plan the figure-ground reversal, inter-penetration outline, and minimized shape forms.
The perfect overlap of technical-minded plus creative-minded that you're looking for. Experienced UI/UX designer, web developer, social media manager, and graphic designer. Particularly interested in UI/UX Designer roles with a splash of Front End Web Development, implementing UI/UX best practices that drive results, and beautifying media in all of its forms.
This entire site was hand-coded. Do you like it? I hope so :)
Building on a customized Twitter Bootstrap foundation, I designed this site to be mobile-first with progressive enhancement.
I'm incorporating typography best practices to set type to be pixel-agnostic with rem
, serving images in a responsive way with the Picturefill
library, and semantically marking up the page with HTML5 tags like nav
, article
, and section
.
All this combines for enhanced SEO, screen reader ability, and all-around better experience. Check out the source HTML and CSS for reference.
Examples include:
classes
, titles
and id
to enabling styling like img-responsive
and img-circle
with Twitter Bootstrap.Roostify is a digital mortgage SaaS responsive web platform that simplifies and accelerates the home-buying experience. Clients include Chase Bank, Guild Mortgage, and TD America.
Vlocity is the first kind of company ushering in the next wave of Cloud Computing. Specifically, creating, from scratch - The Industry Cloud. The Industry Cloud is designed to meet the critical omni-channel sales, service and marketing drivers of the biggest brands on the globe.
Leading the UI and UX on multi-million dollar sales and services contracts with some of the biggest names in the Communication, Insurance, Health Insurance, and Public Sector industries, including Sky Italia, T-Mobile, and New York Life.
Designing iterative improvements to a mobile-first website that serves over 4.2 Million members. Integrating best UX patterns and practices on a tech stack including Drupal, SFDC, Sass, HTML5, and CSS3.
Leading the UX design of outstanding digital products and experiences with internal and external creative resources. Working hand in hand with the Digital Designer as two halves of a design team.
Leading web design and app development following the latest technology and standards, while incorporating tried and true traditional design skills and styles. Some specifics tied under non-disclosure agreements.
Focusing on HTML5, responsive design, and flat UI patterns inspired by the Bauhaus School and De Stijl Movement.
picturefill
and noscript
fall-backGeolocation API
and Google Maps API
Audio
and Video
HTML5 integration, with cross-support for h.264
, ogv
, and shockwave-flash
fall-backLed the UI / UX team in the design and development of an HTML5 responsive micro-site with responsive motion graphics.
The Pacific Coast Farmers Market Association (PCFMA) is the largest farmers' market association in the U.S., operating over 70 markets spanning from Santa Teresa in the South Bay up to Vacaville in the North Bay.
This is where being a unicorn comes in. I juggled UI/UX, web development, social media management, and graphic design.
I'll say upfront the current site is dated, its one area I worked very hard on to update, and for the most part only back-end changes were approved.
Founded in 1964 at Waikiki's International Marketplace, the Crazy Shirts brand has risen to be recognized as an international icon. Innovation is a pillar that the company proudly stands on, pioneering specialty dyed products utilizing exotic materials such as volcanic ash, wine and chili peppers.
The Department of Art and Art History includes two galleries. They aim to serve as laboratories for the critical exploration of ideas about historical and contemporary art, design, culture, and society; and contribute to the cultural life of the region.