An Intense Adventure
Talyst responsive website redesign (2017)
Talyst provides innovative medication management software to help caregivers better serve their patients.
Why redesign?
Talyst was moving in a new direction, which prompted a redesign of their website. The rationale for the project included:
- Restructure the user’s experience throughout the website.
- Focus on user’s solutions rather than products.
- Incorporate Talyst’s new branding.
My role
I worked with the marketing manager and web developer. I focused on:
- User research
- Information architecture
- High-fidelity wireframes
- Design mock-ups
- Usability testing
Problems that needed to be solved
- Users had to take too many steps to get where they wanted to go.
- Reduce content redundancy throughout the site.
- Messaging directed users to outdated content.
- Users were burdened by having to download and manually fill out forms.
Platform
Responsive Website
User research
Without a budget to conduct user research, I still needed to determine what problems our customers were experiencing when using the website. I used the customer service and sales teams as a resource to identify our customer’s pain points. Eight out of ten customers reported the site’s navigation was an issue and that they experienced trouble finding what they were looking for.
Information architecture
To rebuild the navigation I started with the information architecture, which was the biggest challenge of the project because I needed to ensure that company and product information was easy to find and recognizable to users.
After multiple versions of reorganizing the architecture (see the draft below), I focused on the markups to solve user’s problems.
To solve user’s main problems, I concentrated on:
- A more descriptive navigation to create a better connection to the site’s content for the user.
- A more organized drop-down menu to alleviate any confusion.
Final information architecture
Wireframes
The high-fidelity wireframes include the changes I focused on in the navigation, listed below from 1-5. After solving the navigation issues, I focused on adding a number of other features to give user’s a more interactive experience, listed as 6-8.
Main navigation
1. Main navigation
- A more personal and descriptive navigation for users.
Pop-out search bar
2. Pop-out search bar
- Provided a cleaner interface.
Global icon
3. Global icon (international customers landing pages)
- Provided users a faster option than using the drop-down menu.
Secondary navigation
4. Secondary navigation
- Offered detailed product categories.
Third navigation
5. Third-level navigation
- Gave users easy access to every product page without requiring use of the drop-down menu or back button.
Product page – Key benefit pop-outs
6. Key product benefits pop-outs
- Explained the key benefit information in more detail around a specific product.
Home page – Movie header
7. Movie header image
- A visually rich introduction to Talyst and the markets they support.
Footer – Pop-up twitter bar
8. Pop-up Twitter bar
- Emphasized this as it is Talyst’s most-used social media channel.
Blog page
Design mock-ups
Another top priority of mine was selecting a color scheme that would satisfy users. I also focused on making the redesigned site accessible and inclusive for everyone, including color blindness and users of all ages. I researched color blindness to determine which of the company's branding colors would work best with the most common type of color blindness, deuteranomaly, that affects 6 percent of men and 0.4 percent of women.
Home page
Product page
Blog page
Newsroom page
Usability testing
As this was a user-centric project, I emphasized the importance of external usability testing. Historically, the company did not test new designs due to budget or timeline constraints but I was able to convince them of the need to conduct testing for this project. Partnering with the marketing manager, we ran usability sessions for seven participants ranging in age from 35-55 and their ability to successfully complete 11 tasks.
Our results showed everyone found the new navigation experience to be clear and efficient. Based on our research, a couple of design iterations had to be made, including:
- Replicating the Global Market page in more than one area on the site, as some users were trying to locate it under the “About” drop-down menu rather than clicking on the global icon.
- Enlarging the product reference literature icons so that users could quickly find them.
The outcome
We also conducted in-house usability testing, which showed that the steps needed to successfully navigate the site had improved. Another important improvement was that the products now focused on how they could solve a customer’s problem, instead of focusing only on product information.
As the sole designer on this project, within six months I redesigned 54 pages of the website, including rebuilding the entire information architecture that encompassed three iterations. In addition to this, I collaborated with customer service and sales representatives to gather user feedback to inform my strategy. I worked with an offsite developer once my concepts had been accepted by stakeholders and we finalized the code and conducted usability testing, making final tweaks based on the results before we launched the redesigned site.
"I didn’t know that creating a website was that complex — nice job on the new website redesign”
Steve Short — Talyst VP, Sales Acute Care