MARK GYPSON

UX Professional, passionate about designing solutions with empathy and honesty.
FORT WAYNE, INDIANA

MARK GYPSON

Fort Wayne, Indiana
UX Team Lead & Manager
UX / UI Design
Product Management
Illustration
User Testing & Research
Content Strategy
Accessibility
Design Systems
Art Direction

With a background in Graphic design, I was swept into the world of web more than 15 years ago. I'm currently living and working in the Midwest. I'm leading the product design for a non-profit SaaS software solution for people management and online giving. In my spare time, you can find me making handmade leather goods, woodworking, and hiking around in the woods. I've had the privilege of building a UX team from the ground up, watching a business grow exponentially, and learning a ton in the process. I'm always looking for opportunities to make a difference, make things better for people, and learn how something works.

PORTFOLIO

MOBILE PRODUCT PAGE \ VERA BRADLEY

Role: Team Lead / Design / User Research

Project Goals

  • Eliminate negative user feedback issue related to mobile layout.
  • Increase CSAT score to meet or exceed site average.
  • Decrease page speed to be 3 seconds or less.

User Considerations

  • People shopping for Vera Bradley bags like to see large swatches.
  • Users change patterns frequently.
  • Large images and details are important.

"I can't find the product details."

"I have to click on each pattern just to see it."

"I don't know how to see everything the product is available in."

Understanding the Issue

Page Speed was a major issue, running an average of 12 second load time with 15+ seconds on mobile. The performance of a page is the foundation of the good experience so we knew it needed to be addressed. The mobile layout required multiple scroll interactions to explore product options. Element hierarchy was unintuitive and disjointed. Pattern selection, particularly on mobile, was cumbersome and uninspiring.

Problematic Mobile Layout

Plagued with usability issues, and a slow framework, the page was driving CSAT down as well as creating calls to customer service.

  • Swatches are not within view causing the user to scroll back and forth to view options
  • Add to cart is out of view
  • Usability issues:
    -font colors are too light
    -font is too small
    -flat design

User Research

Paper Prototype / Modified Card Sort

Participant Demographic: 
Female / 35-55 years old / Midwest & East Coast / Price Conscious Shopper  / Existing Customer / Belongs to a Vera Bradley fan group / Desktop and Mobile User / Facebook User

Participants were given a set of cards with a section of the product page on each. They were asked to sort the cards and arrange them based on which section was most helpful in making a purchase decision. Participants were allowed to sort the cards in any way that made sense to them. Each person was asked to explain the reasoning behind their arrangement.

Insights

We saw a range of sorting techniques, some were organized like a web product page, others arranged in a columns. Some participants grouped cards they interpreted to be irrelevant and discarded them to the side.

  • Images, price, product name, and pattern swatches were consistently grouped together as a top priority.
  • All peripheral interactions like pick up in store, product recommendations, monogramming, and add to wishlist were not considered part of the product discovery. These cards were either deprioritized or grouped together off to the side.
  • Users should be given the option to choose to display or hide what information matters to them.

New Layout and Design

Designed mobile first with the users feedback and needs considered first. Balancing user feedback and research with e-commerce and usability best practices

  • All relevant content is within view with out scrolling
  • Swatches are larger and within view of the image gallery
  • Contextual Breadcrumbs give the user a sense of location in the site. Breadcrumb also comply with SEO best practices.
  • Add to cart button is within first viewable area and is within the context of the price and product name.

ACCOUNT CREATION \ INTERACTION DESIGN \ VERA BRADLEY

Role: Team Lead / UX Design

The business, developers, and designers needed to fully understand user on-boarding process. I developed this flow capturing all of the customers interactions. We were able to use this document to find missing pieces of the experience or dead ends.

Project Goals

  • Improve account sign up process experience with a fun onboarding process
  • Communicate on-boarding process internally to stakeholders, developers and designers
  • Establish a working document to establish a technical design

TEN TEN MARKET : CONCEPT

Role: Branding / Wordpress Woocommerce Development / Site Design

You can't let ideas just sit in a notebook

Ten Ten Marker is a concept project developed in to a working prototype. Rather than letting an exciting idea never come to anything, I began experimenting with concept. So much of learning is doing.

GRAPHIC DESIGN & TYPOGRAPHY

Thank you for taking a look at my work.

If you'd like to work together send me an email. I'd like to hear about your project.

Send me an email

Download or view a .pdf of my resume.

View Resume