JAMIE FERGUS-JEAN USER EXPERIENCE DESIGNER

Transcription

1 JAMIE FERGUS-JEAN USER EXPERIENCE DESIGNER

2 I AM Creative. Curious. Empathetic. Insightful. Funny. I am an outspoken and tactful advocate for design thinking. I am a persuasive leader. I get shit done. I am currently a UX designer for an established ecommerce company in NYC. My position affords me the distinct privilege of reporting directly to the CEO, which in turn allows me the freedom to create and prioritize the majority of my own work: a broad spectrum of research, design and strategy. I leverage my experience in project management to manage multiple design projects simultaneously, consistently delivering forward thinking solutions that are well researched, user tested, and obsessively perfected. I am interested in gaining full-time agency experience. Take a look through my portfolio, if you like it, give me a call.

3 METHODS AND SKILLS Below you will find five abbreviated lists of my capabilities and competencies. PROCESSES OUTPUTS SOFTWARE LANGUAGES PROJECT MANAGEMENT Ideation User flows Axure HTML5/CSS/SCSS Agile Wireframing User journeys OmniGraffle JavaScript (basic) Scrum Prototyping User personas Sketch 3 jquery (basic) Waterfall Information architecture Concept maps Basalmiq Qualitative research Red route analysis UXPin Ethnographic research Comparative analysis InVision Interaction design Competitive analysis POP Usability testing Heuristic evaluation Photoshop Visual design + branding Surveys Illustrator Low fidelity wireframes Inspectlet High fidelity wireframes Optimizely Clickable prototypes Atomic.io MS Project 2013

4 CASE STUDIES I. SHOPLET ecommerce Shopping Cart II. III. IV. SHOPLET ecommerce Checkout SHOPLET Project Launch & Outcomes HUNGATE CASES Product Management V. ALCHEMY CREAMERY Responsive Website Redesign

5 SHOPLET SHOPPING CART REDESIGN PROJECT TEAM MEMBERS Jamie Fergus-Jean, Andrew Nordin, Mark Behm, Matt Zabita, Dhaval Dharaiya, Ronak Modi CHALLENGE The existing shopping cart design was optimized for desktop use and delivered a heavily compromised mobile experience. Additionally, the layout needed to be cleaned up and extraneous business features removed for smaller viewports. OUR SOLUTION Using a mobile first approach we designed a clean, fully responsive shopping cart with features that scale according to device type and viewport size. PROJECT DELIVERABLES Redesigned Shopping Cart MY ROLES Project Manager Qualitative Research Quantitative Research Ideation User Testing Wireframing Usability testing TOOLS USED Post-its Pen and paper Whiteboard Sketch 3 Inspectlet Google Analytics COMPANY OVERVIEW Shoplet is an ecommerce office supplies company founded in They offer over 1 million products through B2B, B2C, government, and international websites.

6 IDENTIFYING PROBLEMS WITH THE SHOPPING CART The existing shopping cart was not mobile friendly at all. Our research indicated that the cluttered layout prevented many users from progressing to the checkout page. Using a mobile first approach, we designed a clean and fully responsive experience which hides advanced features such as our recycled product comparison tool and automated product reordering on smaller viewports. OLD CART NEW CART 1 The entire viewport is taken up by one product block 1 Confidence badges are given a more appropriate scale and put into cart header Confidence badges are thrown into the top of the cart and appear poorly aligned. This is lazy design and works against building trust with users 2 2 Cleaner product block design allows for more products to fit within the viewport 3 Extra features ( View Green Alternative + Schedule & Save ) crowd the design, compete 3 with the checkout CTA, and distract the user from proceeding to checkout 3 3 Product unit price and total price (unit x qty) are now shown in the same area. In this example the unit price and the total price are the same because the quantity is 1. If the quantity were greater than 1, the unit price would display directly underneath 4 4 Individual product summary table is difficult to distinguish from the cart summary table (which is not showing, because it won t fit) 4 4 The use of light grey in the cart summary table decreases the cognitive load by clearly differentiating between sections! Extra features ( View Green Alternative + Schedule & Save ) now disabled for mobile

7 FROM THE SHOPPING CART DIRECTLY TO CHECKOUT The redesigned checkout flow takes users directly from the shopping cart into the guest checkout form. This eliminates the intermediary Guest or Member page often found on ecommerce sites. Checkout pageviews increased significantly when the redesigned shopping cart launched. SHOPPING CART CHECKOUT Guest/Member Page CHECKOUT PAGEVIEWS INCREASE 17.21% DESKTOP 26.72% TABLET % MOBILE Source: Google Analytics (September 15, December 18, 2015 vs. June 12, September 14, 2015)

8 SHOPLET CHECKOUT REDESIGN PROJECT TEAM MEMBERS Jamie Fergus-Jean, Andrew Nordin, Mark Behm, Matt Zabita, Dhaval Dharaiya, Ronak Modi CHALLENGE Completely rethink and redesign guest and member checkouts to address broken features and a messy, overly complicated checkout process. OUR SOLUTION A fully responsive checkout form that eliminates the need for a separate guest or member page. We integrated technologies such as Google Places API and an validation script to make checkout easier for users while reducing form errors. PROJECT DELIVERABLES Redesigned Checkout MY ROLES Project Manager & Product Owner Pitch designs to CEO and VPs Qualitative Research Quantitative Research Ideation User Testing Wireframing Usability testing TOOLS USED Post-its Pen and paper Whiteboard Atomic.io Sketch 3 Inspectlet UsabilityHub Google Analytics COMPANY OVERVIEW Shoplet is an ecommerce office supplies company founded in They offer over 1 million products through B2B, B2C, government, and international websites.

9 IDENTIFYING PROBLEMS WITH CHECKOUT I employed qualitative and quantitative research methods to understand and empathize with user s pain points as well as to inspire design opportunities. These methods included: comparative and competitive analyses; phone interviews with users about their experiences and frustrations; interviews with coworkers in customer service and sales for additional insights and perspective; observing user behavior with session recording software; and analyzing user flow and behavioral data in Google Analytics. PAIN POINTS DISCOVERED THROUGH RESEARCH Time to checkout Page load / site speed Intermediary Guest/Member page is a drop-off point Cluttered design Lengthy five page mobile checkout Mobile keyboard design makes it difficult for users to fill out forms, and frustrating to correct errors Eliminate unnecessary fields Make our forms do more of the work (autofill address info, verify ) Perceived burden of our checkout process is high It seems like this will take forever Lack of a true guest checkout Meet our user s expectation to check out hassle free every time Pages from a report I generated with data from Google Analytics

10 DESIGN & WIREFRAMING Collaboration with designers, developers, and senior management was essential to correctly determine the scope and feasibility of my designs. I created annotated wireframes and UI flows to help both technical and non-technical stakeholders understand the strategic vision, value, and requirements of the design.

11 USER TESTING We A/B tested the new checkout design against the original and found that across all demographics and device types users preferred the new design an average of 72% over the old design. When the A/B test reached statistical significance, we were 99% confident that the new design was better. After many design iterations and continued user testing, the usability of the new design was undeniably superior, shaving an impressive 31 seconds off the average time to complete the guest checkout form. TIME TO COMPLETE FORM -31sec GUEST -14sec MEMBER Wow, that was easy Wow, that was easy Wow, that was easy Wow, that was easy - Shoplet user during testing Source: Google Analytics (September 15, December 18, 2015 vs. June 12, September 14, 2015)

12 SHOPLET PROJECT LAUNCH AND OUTCOMES The shopping cart and checkout redesigns launched in three phases starting on September 15th, After each launch phase, performance and usability issues were addressed and design improvements suggested, debated, and ultimately implemented or rejected. Shoplet saw positive changes to many key performance metrics, including: a 25% increase in mobile ecommerce conversion, and nearly a 22% increase in New User revenue. NEW USER REVENUE 21.95% MOBILE CONVERSION 25.46% Source: Google Analytics (September 15, December 18, 2015 vs. June 12, September 14, 2015)

13 HUNGATE CASES PRODUCT MANAGEMENT MY ROLE I was the product manager for Hungate Cases E-Series guitar case, and successfully established user-centered design thinking as a cornerstone of our product design philosophy. Some responsibilities included: determining product requirements, researching market opportunity and risk, qualitative user research, user testing and prototype feedback, identifying budget requirements, and developing go-to-market strategy. I developed user personas to help our team understand and empathize with our users. COMPANY OVERVIEW Hungate Cases is a product start up based in Austin, TX. The company designs and develops innovative guitar cases. After testing each prototype, I proposed design changes that create a better user experience.

14 ALCHEMY CREAMERY PROJECT TEAM MEMBERS Jamie Fergus-Jean, James Cobb, Abigail Crispin CHALLENGE Alchemy Creamery wanted a complete redesign of their website. The new design had to be responsive, and designed around a platform that could support future ecommerce integration. OUR SOLUTION A bold website redesign that addresses all requirements outlined in the project brief while helping develop a much stronger brand message. PROJECT DELIVERABLES Clickable prototype of redesigned website MY ROLES Ideation Wireframing Usability Testing Visual Branding Brand Strategy User Interviews Usability testing Copywriting TOOLS USED Whiteboard Pen and paper Axure RP Photoshop Illustrator Macaw COMPANY OVERVIEW Alchemy Creamery is a non-dairy ice cream company based in Brooklyn, NY. They sell online, in select NYC stores, and can be found in person serving up delicious treats at Smorgasburg.

15 RESEARCH COMPETITIVE ANALYSIS PRIMARY USER PERSONAL JOSH REDKIN We researched competitors such as Jeni s Ice Cream, Steve s Ice Cream, and Ben & Jerry s to analyze industry strategies for aesthetics, content organization, global navigation, and core functionality. Josh Redkin The Male 8 years ol, Brooklyn, Lifestyle Blogger Tech Empathy: High Has: i h,, Websites: e it, Digg, nstagra, a e ook, interest, Twitter, Sosh, Gawker Behaviors CREATED USER SURVEY 115 unique responses Key findings: 31% wanted to know contact + location details 26% wanted to know the current flavors 12% wanted to learn about the company Needs from l he y rea ery! Pain Points! How We Can Serve! USER INTERVIEWS USER JOURNEY I interviewed select participants from our survey to discover pain points, user expectations, and opinions about their experience using Alchemy s website. Key findings: 8/10 users skipped reading homepage content 7/10 were confused by copy of main navigation USER PERSONAS & USER FLOWS Using data from our online survey & user interviews, we created three user personas to represent Alchemy Creamery s core users. We also created user flows to identify pain points in an ice cream buying scenario. Emotional experience - Donna opens her browser & types in Alchemy Creamery - Clicks on link in Google - Sees homepage - Reads copy, gets confused - Clicks Shop in the global nav, nothing happens - Realizes she needs to hover her mouse. Clicks on Delivery for NYC - Redirected to Mochi, wonders why Emotion throughout journey Emotion towards Alchemy Creamery - See Gift-boxes, clicks - No flavor options! WTF! I want what I want! 10sec 15sec 20sec 30sec 33sec 40sec 50sec 1min 1min10sec 1min15sec Purpose driven engagement -> Frustration -> Dissapointment > Abandonment - Frustrated, she leaves, thinking she could just stop by the store if she has time I created a user journey to map the emotional experience of purchasing from Alchemy s website. This helped build empathy for our users, and highlighted pain points in their current checkout flow.

16 DESIGNING A SOLUTION DESIGN STUDIO After analyzing the data collected in the research phase we engaged in a collaborative design process known as design studio to produce rough sketches based on our hypothesis. 1ST ITERATION ITERATIVE DESIGN & USER TESTING We iterated and user tested our digital wireframes frequently, applying the feedback and insights gained through user testing to shape subsequent iterations. ROUGH SKETCHES As a team, we rapidly produced rough sketches of three main pages. The focus of this exercise was to get as many ideas on paper as possible. INTEGRATING OUR IDEAS ON THE WHITEBOARD The best elements of each team member s respective sketches were then synthesized into a new idea on the whiteboard. 2ND ITERATION

17 VISIT THE SITE *The agency Craft & Root did visual design and developed the site.

18 JAMIE FERGUS-JEAN USER EXPERIENCE DESIGNER