October 10, 2017Thrust Corporate Deck
See how we created a modern website with smart user pathways for three audiences.
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
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
MODERNIZING THE ARDELYX WEBSITE
CMS & BACKEND
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:
We even built custom fields for the pipeline:
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.
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”
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.
We even included “mini-pipelines” to show only the parts of the pipeline relevant to specific content in an area of the page:
Here’s an example of highly customized informational tabs. These tabs are useful for condensing information into an interactive area that users can explore.
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.