UX/UI Designer & Front-End Developer
KRYSTEXXA Infusion Facts
Project Summary
Challenge
The KRYSTEXXA team needed a way to educate patients with uncontrolled gout and those around them of ways to manage their condition in their every day lives.
Objective
Create a simple yet informative and easy to navigate page that provides a plan for how to manage uncontrolled gout. This new page would efficiently organize and display all the resources, assets and suggestions that the KRYSTEXXA team had available.
Tools
Sketch
XD
Crownpeak
Timeframe
5 months
After understanding and analyzing the requirements, I conceptualized
5 design variations exploring content layout, interactions, and User expectations.
Concept 1
Concept 3
Concept 5
Concept 2
Concept 4
After reviews with client and the development team,
we moved forward with concept #5.
This concept:
provided the best end-to-end experience as it layout the content in the simplest and most organized manner.
provided the most intuitive and visible interactions.
seemed the most feasible as it required existing component capabilities.
was the quickest to achieve since it required the least customization.
I iterated this concept 2 times based on qualitative and quantitive feedback received from 2 rounds of testing. Also, the UI was enhanced a bit while still staying in sync with the brand guidelines for the KRYSTEXXA site.
The final design consisted of the following pieces:
Video with Chapters
A 10-minute video was made easy to navigate with the main sections identified in chapters and placed on top of the video frame. Visual cues and simple interactions such as timestamps and hover effect were also added to help identify relevant segments and find placement in the timeline faster.
Additionally, the main takeaways of the videos were highlighted in bullets to help digest and remember the main content effortlessly.
Mindful CTAs
Accounted for the different scenarios that a patient may be in when reaching the page.
Email template can be edited and sent to employer or coworker at that exact time.
The patient can email the template to self directly on the page and access it on any device at any time.
A PDF version is also available for download so patient can have the information on his/her device for later use.
Simple Visual of a Plan
Steps were broken down into 12 steps and 4 stages for patients to follow easily and be able to take action without feeling overwhelmed by all the recommendations and information included in this section.
Step 1
Step 3
Clear and accessible CTAs
The last resources available are clearly sectioned for quick access at the bottom of the page and for the patient to read on the subject or get his questions answered further.
Do you want to check it out on the site?