Drupal 8 UX Design and Development

Role:

UX Design / Front-End Development

Project Duration:

8 weeks

Goals:

Overhaul of the full web experience

  • Deliver French site by international launch of Business Planning Cloud and opening of the French office
  • Develop mulitiligual Drupal 8 proof of concept starting with France, and quickly turn around to rescue JP site
  • Set solid foundation for migration of Drupal7 sites to Drupal8 (US, UK, ANZ)
  • Pass all tests for translation, localization, and migration requirements

Improve design and user experience

  • Visually channel the brand positioning, strategy, and personality
  • Create UX with the least amount of friction
  • Reduce the amount of space/time between a visitor and their objectives (business objectives)
  • Make our presence feel more human and alive

Responsibilities:

  • UI / UX design
  • Front-End Development
  • Project Management
  • QA/Testing
  • Gathering requirements
  • Scope Definition
  • Prototyping
  • Deployment

Impact:

  • Improved demand generation, driving 30% more leads
  • Reduced cost and dependency on external resources
  • Consistent brand and user experience for company sites
  • Custom Sketch UI kit. Improved UX review process
  • Defined quality target and standards
  • Developed solid foundation for migrating Drupal 7 sites to Drupal 8

Background

Adaptive Insights is a customer-experience brand. Customer-centricity has been a through-line since the company’s founding. We needed to double-down on putting people (visitors, customers, partners) at the center.

Where customer experience shows up:

  • Ability to listen to customers and integrate their POV in our products and thinking
  • Intuitive, easy-to-use products
  • Commitment to customers’ success and lengths we go to solve customer problems
  • KPIs
  • Belief in better future for your users, and our courage to do what’s necessary to get them there

Identified Personality Traits:

  • Bold (Committed, confident, courageous, innovative, expert, visionary, respected)
  • Optimistic (Motivating, continuous improvement, reliable, influential, positive)
  • Helpful (Trustworthy, practical, accessible, reliable, caring, empathetic, warm)

Competitive Landscape

Centage
Workday
SAP
Anaplan
Prophix
Oracle EPM Cloud

These keywords are critical and will stand the test of time.
They sat at the heart of everything that I’ve designed and built for this project.

  • Fast
  • Findable
  • Usable
  • Useful
  • Clean
  • Language
  • Typography
  • Narratives
  • Credible
  • Accessible
  • Desirable
  • Valuable

Who’s doing a good job at this?

Intercom
Stripe
Zendesk
Hubspot
Atlassian
Slack

How do we do this?

Go back to the fundamentals

Design Fundamentals

  • Consistent Branding
  • Clean, legible, and readable typography
  • Engaging content that drives emotional experiences
  • Consistent messaging, tone, and voice
  • Clear visual hierarchy and layouts
  • Better use of whitespace
  • Defined UX and design guidelines
  • Defined quality target for imagery and video

UX Fundamentals

  • User-first mindset
  • Don’t underestimate and/or overwhelm our visitors
  • Simplified, linear user journey/flow
  • Decluttering
  • Conversational messaging
  • Intuitive navigation and menus
  • Color as a functional element
  • Contextual conversion pages
Homepage

In my research I found that most effective landing pages can be broken down into modular design patterns

  • Header – Logo and navigation
  • Hero with bold claim – We are the best
  • Banner / Advertisement
  • Product features, capabilities and/or services
  • Product differentiation with screenshots and short copy – Here’s why we’re the best
  • Analyst / Expert reports – Gartner, Forrester, BPM
  • Customer quotes – Personal vouch and a human touch
  • Newsletter / Sign up / Contact – We want to help you
  • Keep in touch Footer – Hyperlink farm

Wireframes

For speed and efficiency I created the UX designs with Sketch leveraging an existing custom UI kit that I’ve created for Adaptive Insights. The interactive prototypes were created with InVision. This design process allowed us to quickly gather requirements, rapidly iterate through the designs, and capture feedback from key stakeholders. The typeface was intentionally set to Comic Sans to replicate the look and feel of Balsamiq wireframes and to prevent the internal customers from getting distracted by visual design elements.

View the InVision Prototype

Homepage
Product Page
Customers List Page
Customers Page
Resource Center
Resource Center Alt