Hi, I'mMaggie Nan

Developer + Designer

Download Resume

Skills

Key Skills

HTML, CSS, JavaScript - 6 years experience Low-fi Prototype (Balsamiq, Keynote) - 3 years experience Hi-fi Prototype (Sketch, Axure, Justinmind) - 3 years experience Photoshop&Illustrator - 2 years experience

Research & Design

Contextual Inquiry
Usability Testing
A/B Testing
Persona Design
Storyboarding
Design Modeling
IA Design

Programming

javaScript
HTML5
CSS
Java
Python
PHP
MYSQL

Experience

Front-end Engineer – Ipsy San Mateo, CA

October 2016 - Current

Work on Apps Growth team, which boosted paid subscribers from 2.5M to 3M last year
Created a new cancellation flow experiment with AngularJS, SCSS and Grails that led to about 30% churn rate reduction
Added PayPal as a payment option, which reduced payment decline rate by around 10%

Product Manager – Yumso Seattle, WA

July 2016 - September 2016

Building a home-cooking food ordering and delivery application using AngularJS, NodeJS and ExpressJS, which has been launched online and on App Store
Managing the development of cross-platform interfaces for chefs, eaters, admins, and drivers, by collaborating with designers and engineers
Redesigning the information architecture of chefs' system, and reinventing the onboarding experience through user research and iterative prototyping with Sketch

Full-stack Developer – Yelp San Francisco, CA

November 2015 - July 2016

Worked on Internationalization (i18n) team, maintain and develop our internal translation platform and localized features to accelerate Yelp's growth in international markets
Implemented the German Header Experiment with Python, JavaSript and CSS, building cohorts of dropdown menus in navigation bar, and creating metrics in Google Analytics for A/B testing
Improved UX culture at Yelp as a core member of the usability group, hosting weekly office hours, drafting persona interview scripts, and taking charge of UsabilityHub experiments

Front-End Developer – InterSystems Cambridge, MA

March 2015 - October 2015

Worked on the Developer Experience Team, responsible for the development of Zen Mojo - a set of classes to rapidly build responsive web applications with easy access to InterSystems Caché database
Created the Twitter Bootstrap plugin from scratch for Zen Mojo with Caché ObjectScript and JavaScript
Implemented a calendar web application on top of InterSystems Caché database, using NodeJS and its ExpressJS framework

UX Design Intern – Bio-Rad Laboratories Hercules, CA

June 2014 - August 2014

Conducted competitive usability evaluations and interviews with 20 internal stakeholders and 10 customers for insights to redesign product webpage for the T100™ Thermal Cycler
Created a low fidelity prototype with Balsamiq based on the analysis of Customer Journey Mapping, Behavior Variables, and Persona Design
Designed a high fidelity prototype using Axure and iterated it through four Usability Testings

Education

Master in Information Science – Cornell University Ithaca, NY

August 2013 - January 2015

Concentration: Human-Computer Interaction
GPA: 3.81, Major GPA: 3.88
Coursework: HCI Design, Advanced Human-Computer Interaction, Oral Communication, Digital Graphics, Leadership Theory & Practice, The Business Idea Factory, Marketing Management

Recommendations

Maggie interned with my group for the summer (2014) working on a project to apply her knowledge in Human Computer Interaction (HCI), User Experience (UX) and Persona Mapping to help us improve online conversion for commoditized products. Maggie worked diligently through the UX process and generated web designs to address the needs of the customers purchasing Life Science products. We will utilize the output from this project when creating the next generation Bio-Rad.com website. Based on her knowledge and application to real world scenarios, Maggie has a great future ahead of her in the field of User Experience.
Harjit Kullar - former Director of Content Marketing @ Bio-Rad Laboratories
Maggie exceeded expectations in both her independent thinking and initiative. Most importantly the culmination of her project was the synthesis of a design that took into account the needs of 3 key personas who use our website. She thoughtfully and creatively applied her newly gained customer knowledge to design a web page that should impact the future direction of the Bio-Rad web site.
She’d make a great addition to any team.
Todd Yeck - former Senior Product Manager of Content Business Unit @ Bio-Rad Laboratories
I spent some time working with Maggie with different product teams throughout the Yelp org. Maggie provided concrete guidance and feedback for conducting user surveys and usability studies. She also led the frontend effort for an internal scheduling tool that we use for scheduling usability studies. Maggie is enjoyable to work with and would be a valuable addition to any team.
Kent Wills - Software Engineer and Lead of Usability Group @ Yelp

nanzhe0@gmail.com

All
UX
Web
Front-End
Mobile

Bio-Rad Webpage Redesign

Web / UX

Yumso

Web / UX / Front-End

Actually

Web / Front-End

Big Red Dining

UX / App

User First

Web / Front-End

SARA

EpicLogue

UX / Web

nanzhe0@gmail.com

Profile

My name is Zhe Nan, and you're welcome to call me Maggie. I graduated from Cornell University as a master's student in Information Science, with concentration of Human-Computer Interaction.

During the past 3 years, I have been working as a web/front-end developer. This experience has given me strong logical thinking and analytical skills, but I've been always kept the faith that I will be a User Experience designer someday.

Three years ago, my passion for UX Design paved my way from Electronics Engineering to Information Science; now, I want to take a step further and make it my lifelong career.

Overview

nanzhe0@gmail.com

Get in touch

607 229 0345

nanzhe0@gmail.com

400 Ortega Ave, Apt 216, CA 94040

Redefine Online Purchase Experience of Bio-Rad T100™ Thermal Cycler

UX Designer

Project

T100™ Thermal Cycler Webpage Redesign

Client

Bio-Rad Laboratories

Time

2014.06 - 2014.08

Location

Hercules, California

Team

Todd Yeck, Maggie Nan, Shiranthi Keppetipola

My Role

UX Designer

Tools

- Adobe Illustrator
- Balsamiq
- Axure
- Survey Monkey

Background

As Bio-Rad gets more products in its portfolio, it seeks to sell more commoditized products via web, so that sales representatives could focus on higher value products.

Objective

Redefine Online Purchase Experience of Bio-Rad T100™ Thermal Cycler

Major Steps

- 10 interviews with internal stakeholders
- 12 competitive usability evaluations
- 8 interviews with customers
- 38 online survey questions
- 4 usability testings

Deliverables

- Customer journey map
- Behavior variables
- Primary, secondary and supplementary personas
- Low-fi prototype
- Hi-fi prototype

troubleshooting

Success Business

Bio-Rad Laboratories(NYSE: BIO and BIOb), ranks in the world's top five life science companies and maintains a solid reputation for quality and innovation.

Growing products portfolio

As Bio-Rad gets more products in its portfolio, it seeks to sell more commoditized products via web, so that sales representatives could focus on higher value products.

10+ year old website

The bio-rad.com was launched back in 1997, and has lots of room for improvement to be a trendy website: hero images, card layouts, responsive design, etc...

Low Findability and Discoverability

Bio-rad.com uses a Deep hierarchy info architecture; product detail pages are 6 levels down from the homepage, and not reflecting attribute priorities in the Mini-IA.

Who is using our website? How're our competitors doing?

Conducted interviews on a wide range of internal stakeholders, including product managers, sales representatives, technical support and customer service, to learn about the most typical scenario when customers decide they need a thermal cycler, what information they need to make a purchase decision, how they interact with bio-rad to get those info, and most importantly what kind of group is likely to be our online purchasing target users.

Researched on the websites of 6 top competitors in life science field and 6 non-peer vendors to compare their features and content, as well as branstorm the best online purchasing experience.

10 interviews on internal stakeholders
12 competitive usability evaluations

What steps do customers go through in engaging with our website?

Put together the data collected in step 1 in spreadsheets and performed data interpretation and consolidation using customer journey map, which illustrates the steps that customers go through in engaging with our online purchasing system.

Original customer journey map
Revised customer journey map

What do customers say?

Narrowed down target user group based on the result of step2, and conducted interviews on existing customers from UC Berkerley, UC Davis and the Buck Institute, to learn about the most important factors that influence their purchase decisions and their opinion about the current T100 webpage.

Designed an online survey using Survey Monkey upon accomplishment of the Questionnaire Design for Social Surveys course on Coursera, to further collect the above info from a larger user group. The survey includes 38 questions in total, and up to 13 questions for a single user deponding on his role(lab manager, post doc, researcher and purchaser). The number of open-ended question is limited to 1 per user so it could be finished in ~5 mins. This Flow Chart describes the page logic amongst questions.

8 interviews on customers
38 online survey questions

What does the interview result tell us?

Interpreted the information collected in step 3 with 30 Behavior Variables grouped in 3 sets: background, decision process and web-based needs, with Adobe Illustrator. The goal is to identify clusters of participants developing at different points along the sliders.

30 Behavior Variables

What do our typical users look like, and what they want to achieve?

Analyzed the grouping of the behaviours across on the sliders in step4, and found trends where the same participants are grouped together across multiple variables. Used Adobe Illustrator to create 3 prioritized personas and scenarioes describing how they would interact with our system, also identified their end goals, life goals and experience goals.

Primary, Secondary and Supplementary Personas

How did I prioritize and meet personas' needs? Did it work?

Designed the low-fi prototype using Balsamiq based on the goals of personas and the priority of them. According to the scenario we created, personas rarely use mobile devices to purchase/make purchase decision since it's a big deal in terms of money, so that responsive design was not included.

Improved the prototype iteratively by doing Usability Testing with internal stakeholders.

Low-fi Prototype
4 usability testings

The End Result

Built a high fidelity prototype with Axure based on the mockup created in step6, iteratively improved it based on feedback from internal stakeholders, and a high fidelity interactive demo is available here. Also explored and designed different checkout methods to improve bundle sales during the refine provess.

Hi-fi Prototype