Overview

Help marketing, optimization, and front-end make improvements to reduce implementation and training time so they can focus on generating sales and improving customer experience.

Problem Statement

We have observed that the Internal Tools (OSS) aren’t meeting brand improvements and implementation goals, which has caused increased training times, reduced sales, and internal frustration. How might we improve so that our our brands and marketing efforts are more successful?

Goals

  1. Make users more effective
  2. Reduce time on task* 🐁💨
  3. Reduce learning curve and training time
  4. Increase enjoyment 🕺✨
  5. Reduce page and event development time
  6. Reduce publishing headaches
  7. Increase speed from optimization efforts to brand implementation
  8. HEART Framework

Users and audience

  1. Front-End Developers
  2. Marketing Managers
  3. Optimization Specialists
Light persona development

Team and your role

I was the Design Lead working to define the experience strategy, analyze and audit the existing system, conduct research into system needs and interview users, create and present deliverables to engineers and stakeholders, wireframe, prototype, and test each iteration with the internal user base, generate a comprehensive and extensible design language system, and help with implementation and education.

Constraints

  1. No Analytics
  2. No Product Owner (initially)
  3. Few Backend (PERL) Engineers Available*
  4. Dated Backend*
  5. System from scratch (React)
  6. Devs new to React

Design process story

Understand the system

After a project is kicked off and the goals and problem statements have been initially defined I begin the process of mapping the current flows and information architecture.

Mapped the IA and flow thoroughly using Sketch, Invision, Draw.io

Interviews, testing, and journey mapping

  • Interviewed 25 internal users.
  • Defined many common use-cases, pain-points, and silly workarounds.
  • Using Camtasia and Google Hangouts I recorded and timed tasks.
Capturing user feedback during interview process

Key findings:

  1. Searching for pages you’ve created is very difficult.
  2. Publishing is painful and impractical.
  3. Editing pages and flows is almost impossible without many days of trial, error, and training. Even then, the developers are brought in 50% of the time to finalize a project.
  4. 79% Male — 21% Female
  5. Environment: Open office or remote coffeeshop with poor connection speeds. Teams work through hangouts frequently.

Key Metrics

Task speed: Create an affiliate page: Setup: 1 hr — Launch: 2 days

Task speed: Building a template: Setup: 4 hours — Launch: 7–8 days

Task speed: Create an event: 25 minutes —Launch: 3 days

Sketching

After interviewing users and regrouping with engineering we had built a base requirements list for simple updates.

Design Sprint — Day 2 — Lightning Demos + Crazy 8s
Brainstorming page creation process

Wireframes

The initial wireframe process focused on the global navigation and the page manager. We went through around 4 or 5 iterations. Discovering major engineering faults. Testing each with Marketing and Optimization users and tweaking designs based on their reactions and interviews.

Designs

Now that we have a baseline component framework and craft library, the compositions and flows are incredibly easy to create.

Mood: Endurance, the Antarctic, Snow, Ice, Space, Clean, Fast, Light

Events MVP: https://endurance.invisionapp.com/share/GX9ZYNH6U#/213815562_Evens

CAP Styleguide

Working side-by-side with a front-end developer we’ve created a system of highly reusable CSS classes and reusable React components.

Capicon —Icon font being created for consistency ease of reuse

Tools Used

Sketch, Invision (+ Beta Inspect), Zeplin, Atom, React, HTML/CSS/Javscript ES7, Docker, Git, NPM, Node, iTerm, Google Drive, Usertesting.com, Camtasia, Macbook

Retrospective & lessons learned

  1. Deeper focus on understanding constraints
  2. Obtain a more comprehensive understanding of a team’s strengths and weaknesses
  3. Is there an API for that?
  4. More rapid iteration with front-end development team from the beginning
  5. Prototype in the browser earlier
  6. Created weekly hour long designer/dev huddles — Let’s sit here and finish the component. Reduce time spent documenting.
  7. Compositions
  8. Do less ... and do it faster
Character creation

Bike Obsess, Comedy Ranchero, Designer of Experiences for You