Bringing the brand new offering to a clear and engaging website

Bringing the brand new offering to a clear and engaging website

Project
Marketing Website
Role
Interaction Designer
Overview
We implemented Payactiv re-branding into the web communication presenting value prop through emotional storytelling

Payactiv

Live the life you earned

image

Team

Antonello Crimi, Project Lead Casey Corcoran, Program Manager Jhonny Minor, Visual Designer Erin Nelson, Copy writer Karl Carstensen, Design Technologist Marco Murguía, User Experience Designer

Overview

Payactiv is a company from Silicon Valley providing financial services such as earned wage access to employees. We partnered with them to design the foundations of a marketing website that convert visitors into leads and active users.

image

The challenge

Over a year, we helped Payactiv to define their future vision. Establishing a brand strategy & brand identity that support and drive actionable next steps for bringing the vision to life.

One of those steps was to redesign their website channel in order to show the current value proposal of Payactiv but also support the construction of a new company strategy. So our challenge was to design the arquitecture and the principal user flows for the marketing website that will be the bringe for this vision.

image
image

Goals & Process

I worked hand to hand with visual designers, copy writers and tech architects to define the narrative along 8 pages for Payactiv’s external marketing website.

We stablished the Information Architecture and the Initial Design Language System (DLS) for the new brand implementation. We completed page design (wireframe + visual + copy + animation) for 2 breakpoints (Desktop and Mobile).

The project took 6 weeks and we go through lots of design reviews and iterations to define deliverables. From understanding clients goals and expectations in workshops to helping them to understand the best way to implement tech challenges such animations and web renderization.

Competitive Analysis

Identifying the right path

With insights and brand definitions already created by frog, we starting by researching the current state of the industry communication in terms of marketing websites. We find out patrons and identify the right path to differeciate ourself from the saturated Earned Wage Access sector:

  • Drive with emotion
  • Create trust through community
  • Provide proof points for analytical types
  • Focus on conversions
  • Be contextually relevant
  • Lead with core intents and clear wayfining

image

We decide the sections to design based on the traffic of the previous website. This information was provided by the company throught Google Analytics. This also give us some actionables insights about visitors behaviour:

  • Focus on main sections (80% traffic) and create a more efficient structure.
  • Focus on driving traffic to conversion goals.
  • Drive traffic from employees to employers.
  • Re-think a new way to create value through a new “About us”.

Main pages by number of views
Main pages by number of views

image

Approach

Process defined by content and form

Due that we were running multiple path of work at the same time –Architecture, copy, narrative and visual–, each member of the team were iterating their progress with other members advances and the proccess itself was determinating what decision makes more sense with the ritme of work and thinking process.

For example, while I was defining the narrative for the landing page focusing on convert visitors as soon as possible, and avoiding excessive CAT's that could distract the user, the Information Architect was working with that limitation in mind and determining how other pages could support storytelling.

Narrative explorations aligned with architecture.
Narrative explorations aligned with architecture.

image

Final Screens

We started from the landing page in order to present the value prop with a emotional storytelling from a content and visual standpoint. The navigation menu follows responsive behavior and clear patterns, such simplicity and clear CAT.

Four main sections to clearly communicate and convert

image

HOME

Inspire, build trust, and show paths

  • Create an emotional connection with workers.
  • Clearly show the product and value to users.
  • Build trust through the company mission and social proof.
  • Connect with companies by demonstrating tangible value

Convert visitor workers into enrolled users (App & Join)

  • - Direct visitors to more detailed pages about our offering Direct interested visitors to read more insights
  • Provide more answers and support
  • Log in active users
image

FOR YOU

Demonstrate value to convert workers

  • Show relevance to workers' real needs
  • Provide social proof from workers who use Payactiv
  • Clearly show the possibilities Payactiv provides

Direct workers whose companies are not yet Payactiv providers

  • Promote Payactiv Card
  • Ask to promote Payactiv to their employer
  • Convert visitor workers into enrolled users
  • Direct interested visitors to read more insights
  • Log in active users
image

FOR COMPANIES

Build trust and sense of urgency with companies

  • Establish Payactiv as a partner to support workers’ well-being
  • Build trust through key partnerships, social proof, and industries served
  • Demonstrate integrity through company purpose
  • Show tangible value for companies at a high level and in detail
  • Provide peace of mind through compliance standards and integration ease
image

IMPACT

Inspire companies' belief in all we do

  • Focus on workers' and companies' own words
  • Move hearts through a clearly and transparently stated purpose
  • Demonstrate impact both rationally and emotionally
  • Establish authority and build trust through company story and mission
  • Put the mission in context to show the gravity of the problem and create urgency
  • Provide social proof from workers and companies who use Payactiv
image

image

Hand Off

Documentation is key to implementation. We created a Design Language System for the website in order to deliver a creation base for the Payactiv's internal team.

Besides the traditional componentes in a UI library, we documented detailed design principles, layouts and animations with implemented examples like transitions and illustration animations. This also helped the developer's understanding.

image

image

Takeaways

Payactiv creates products that empower more people to participate in the economy they helped to create. The Livelihood Platform lets workers access what they've earned, choose how to spend and save, and own their schedules so they can engage more fully in both work and life.

It was an honor to us reimagine how companies can serve their employees with innovative benefits that help them retain, engage, and impact the daily lives of the people who work for them.

image

Thanks for reading.

If you want to learn more, I’ve got a bunch of links for you on the right. Explore them.

Want to stay in touch arturocotacio@gmail.com Twitter · LinkedIn · Medium

image

Previous ← Infosel Hub

Next → Laser Duel