Ardelyx Website

See how we created a modern website with smart user pathways for three audiences.

THE OVERVIEW

PREPPING FOR PHASE 3 ANNOUNCEMENTS AND TRAFFIC SURGES WITH A NEW ARDELYX WEBSITE

Big company announcements drive lots of traffic to sites in a short period of time and people are quick to judge a company based on appearances.  With a Phase 3 Trial announcement around the corner, THRUST Investor Relations brought Ardelyx to us to make sure their website was in top condition.

We built a modern website with excellent, custom scientific graphics and clear pathways for patients, investors, and potential new employees. Under the hood, the website is running on WordPress with a completely custom backend that allows for simple, fast editing. And to top it all off we designed a new NASDAQ template.

When all was said and done, Ardelyx launched a website on par with their big announcements.

THE CONTEXT & CHALLENGE

REDESIGN THE ARDELYX WEBSITE TO CONNECT WITH THEIR AUDIENCES

PROJECT BACKGROUND

Frontend (What Site Visitors See)

The old Ardelyx website had run through it’s life cycle in terms of aesthetics. It’s not just web design trends either. Over the past 5-ish years (from when this case study was written), countless new devices have been released. High definition has matured into retina and 4k displays. Screen sizes are larger than ever. Though it seems like forever ago, the first iPad was only released on April 3, 2010!

This meant the “old days” of building a website in a nice little box that fits on the average computer monitor were long gone. Even the first wave of responsive design where we could target specific devices had disappeared. It no longer makes sense to just design for a few devices when there are literally thousands. We’ll get to how we solved this problem a little later.

Content Management System (CMS)

Ardelyx started working with our good friends over at THRUST Investor Relations and THRUST wanted an easy-to-use CMS. The decision of which CMS to use was left completely up to us.

Scientific Graphics

With new devices and higher resolutions comes a need for better science graphics. Not only do the graphics need to look good but they also need to clearly communicate the science. This meant a heavy does of research was in order before going to the drawing board.

Company-Wide Email and Site Launch

Sometimes we get to launch a brand new site for a small company and it’s almost as simple as a few clicks. But when you’re an established company like Ardelyx with a lot of team members the situation can be a bit more complex. We needed to launch the Ardelyx site at an exact time to coincide with a press release and ensure that everybody’s email addresses and internal server systems all remained in service.

NASDAQ

Last but not least, we would need to create a new template for the good people at NASDAQ to use for Ardelyx’s investor relations pages. This is no small copy and paste job as the NASDAQ template needed to be set up in it’s own special NASDAQ-compliant way.

PROJECT CHALLENGES

Large Scope

The biggest challenge with any project of this scope is well… the scope. With smaller websites it’s often possible to do quite a bit of “plug-and-play” where we can just drop in existing content, make a few tweaks and call it a day. But with a big project like the Ardelyx website, a lot of careful planning and communication is involved to avoid turning the whole project into a game of Whac-A-Mole.

Project Management

With the large scope in mind, we would need impeccable project management. We’ve written about how project management can quickly get out of control without the right people on board.

Content Management System

When a CMS has a lot of content it can perform poorly. When making edits is difficult, team members can get frustrated. When the CMS isn’t well-known, it makes work difficult for other developers. Not to mention the security and performance issues that come along with small, low-support content management systems.

Design and Frontend

Ardelyx had a lot of content to present to three different audiences: patients, investors, and potential new employees. There was web copy for every page, press releases, NASDAQ content, pipeline, science information, team information, and a whole lot more. Presenting this information in a way that would be easy to navigate for any of the three target audiences presented special challenges in web design.

PROJECT GOALS

We needed to launch the new website and NASDAQ templates within roughly 3 months. This launch would coincide with a big press release so the launch needed to be perfect – all devices, all operating systems, all browsers, no mistakes. We were up for the challenge and knew we could rely on our extensive experience building life science websites under mission-critical conditions to meet the goal.

THE PROCESS & INSIGHT

COMMUNICATE CLEARLY, RESEARCH THOROUGHLY, PLAN CAREFULLY

CLEAR COMMUNICATION

Project Management

Our good friend and masterful project manager Alicia Davis was at the helm of this Ardelyx website project. She has delivered on countless life science projects during her career and knew how to schedule the right meetings with the right people to get the right questions answered.

Content Creation

Alicia was also in charge of spearheading new content which she managed by maintaining a living content document that numerous Ardelyx staff and others worked on until it was just right.

THOROUGH RESEARCH

User Experience Research

Orrbitt’s own John Stewart led the creative research efforts and turned out the careful layout, navigation, and user experience that makes up the current Ardelyx website.

John believes in the “show me the evidence” mantra frequently said here at Orrbitt. This means never assuming that a decision is best just because it seems that way. John extensively researched user experience particularly as it relates to steering multiple audiences through a website.

Science Graphics Research

John also led the research effort in creating informed, custom graphics related to using the gut as the gateway to better health. Attempting to create science graphics with only a cursory understanding of the science involved can lead to subtle mistakes that can potentially be costly and even spread misinformation. John’s research process included a lot of reading about Ardelyx’s science and gut science in addition to scrutinizing countless existing graphics related to GI and cardiorenal diseases.

CAREFUL PLANNING

Website Architecture

Orrbitt led the development efforts and paid careful attention to website architecture. Before ever touching a line of code we mapped out every user pathway from the main navigation to each individual button click, form, and footer link.

With our map in hand, we then created wireframes of each page. Wireframes look a lot like the live webpages but without design elements like colors, graphics, photos, custom fonts, and fancy layout details. These wireframes allowed us to place user experience and pathways under a microscope without purely aesthetic information muddying up our view.

THE SOLUTION

MODERNIZING THE ARDELYX WEBSITE

CMS & BACKEND

Custom Fields

We used WordPress and the Advanced Custom Fields (ACF) plugin as the heavy-hitters on the backend. Advanced Custom Fields allows us to add extra content fields to WordPress edit screens.

With ACF we were able to build a one-to-one CMS where users can edit any content on the frontend of the site just by going to that content on the backend of the site. No short-codes, no HTML, no crazy hacks.

For example, here’s the custom fields section for the homepage header demonstrating how easy it is to make edits:

Ardelyx Home Header ACF
Custom fields are “one-to-one” with content on the front end.

We even built custom fields for the pipeline:

Ardelyx Pipeline ACF
Ardelyx Pipeline with Advanced Custom Fields for easy edits and updates.

Custom Post Types for Team Members

There are a lot of great people working at Ardelyx and to appeal to potential new Ardelyx staff the frontend needed to clearly lay out the current Ardelyx staff into groups with titles and quotes. This meant the backend needed to be easy to use when it came time to make edits and updates.

Advanced Custom Fields came to the rescue again! By combining custom fields and custom post types (a post type for each team group: Management, Board of Directors, and Scientific Advisors) we created an easy-peasy backend solution that will work now and in the future as Ardelyx grows.

Ardelyx Team CPT
An empty post for adding a new team member. Just fill it in, publish, and away you go!

FRONTEND

Mega Menu

Getting three different potential user audiences where they want to go isn’t an easy task. The solve was to create an expanded navigation menu known as a mega menu. As Nielsen Norman Group describes here: “Mega menus have the following characteristics:

  • Big, two-dimensional panels divided into groups of navigation options
  • Navigation choices structured through layout, typography, and (sometimes) icons
  • Everything visible at once — no scrolling
  • Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs 
  • Menu options revealed on hover, click, or tap”
Ardelyx Mega Menu
The Ardelyx Mega Menu

Pipeline

The Ardelyx Pipeline received a huge overhaul including an animation effect when the pipeline is scrolled into view. The pipeline is also larger than on the previous website.

Ardelyx Pipeline
The main pipeline as seen on the homepage of ardelyx.com

We even included “mini-pipelines” to show only the parts of the pipeline relevant to specific content  in an area of the page:

Ardelyx Mini Pipeline
A targeted pipeline showing only the pipeline content relevant to the copy above it.

Informational Tabs

Here’s an example of highly customized informational tabs. These tabs are useful for condensing information into an interactive area that users can explore.

Ardelyx Info Tabs
Customized informational tabs present a collection of information in an intuitive way.

SCIENTIFIC GRAPHICS

With Phase 3 trials around the corner and other exciting science underway, it was imperative that Ardelyx be able to communicate their science clearly. We looked at existing graphics from the old website, did a whole lot of research, and then combined everything with our science graphic expertise to create bold, informative, modern graphics that look great on any device.

Ardelyx Tenapanor
Graphic for Ardelyx Tenapanor
Ardelyx Tenapanor More
Additional Information about Tenapanor
Ardelyx Pill Burden
A custom graphic for “Eliminating the Pill Burden”

 

THE RESULTS

A MODERN WEBSITE FOR PATIENTS, INVESTORS, AND NEW STAFF

October 10, 2017

Thrust Corporate Deck
Thrust is the force that drives you forwards. Thrust Investor Relations is a company that is founded on the principles of driving success for their clients.
Previous Post

June 25, 2017

Crestovo Website
Crestovo asked for a new website with consistent branding. We delivered on our promise and launched a fully-custom website including branded science graphics in just under one month.
Next Post