Scrollytelling

Website Redesign

Problem to Solve

On average, we have 8,000 unique visitors a month, but we're losing 3,000 of those visitors that never leave the homepage. Our current website had no clear message and was more just "alphabet soup."

Objectives

Obtain 14 critical access hospitals,10 small hospitals and 4 medium hospitals by the end of the year - get them to understand who we are, how we can help and ultimately click the "request a demo" button.
Get people from home page to products
Keep them on the site
Tell the right story for our core markets and update our messaging to support
Optimize user experience/add search
Provide messaging that builds brand recognition and credibility—so people know what our messaging is
Content simplified vs Alphabet Soup
Content by persona
Customer Design: A/B testing on site design
Optimized for SEO
More of the human touch

Research & Discovery

Internal stakeholders were frustrated that visitors were getting confused and had no direction. Without a full marketing department, Novarad came to me to solve the problem as a UX / UI Designer with past marketing and strategy experience.

I started researching and set up discussions with our Sales Department to determine their thoughts on why potential clients weren't taking the next steps. I requested a list of potential clients and scheduled interviews with Radiology and IT Directors. Feedback from these interviews led me down a path that we needed to tell a story...keep users engaged with an enticing website that draws them in and guides them through our story and personality. All while still being able to access the standard navigation.

Understanding the User

Competitive Analysis
Personas
Quantitative
Radiology Interviews (new and existing users)
IT Director Interviews (new and existing users)
Recurring Focus Groups

Understanding Problem

Information Architecture

I needed to understand our existing architecture that wouldn't be able to drastically change, and pull out pieces of information that would tell our story, engage users and entice them to want to know more.

I continued with internal interviews and worked with the Product Manager to compile top level ideas to tell the story. I continued my research on how to meet the objectives and discovered scrollytelling.

Scrollytelling (Parallax Scrolling) is a technique allowing you to show different layers of a design and have these layers respond differently to the scrolling behavior of your site visitors. Creating a sense of depth and allowing for multiple, simultaneous effects - all controlled by the visitor.

Ideation & Design

I presented scrollytelling to internal stakeholders with wireframes and research examples and more brainstorming ideas were sketched out on the whiteboard. Everyone was excited to see where this would go.

Building Our Story

After incorporating some great ideas, I worked with the Product Manager to further narrow down ideas and create our engaging story.

As we’re writing content or thinking through updates to our website structure, I thought about the user and their needs more than our internal nuances or hierarchy. The less complicated, the better.

Visualizing Our Story

Brainstorm
Sketches
Wireframes
High Fidelity Mockup
Animation
Content Animation
Prototype

Usability Testing

From our user interviews and recurring focus group discussions, I protoyped workflows the user would take with the new scrollytelling experience.

I made sure to also include journeys that didn't have pain points, so the user could acknowledge if I was making it easier in one task but creating a new problem in another.

Lessons Learned

Overall, we learned that new users liked the experience and appreciated the story we were trying to tell - it gave us personality while having all the information in one scroll and not having to dig through the navigation to find the information with all the extra clicks.

Existing users mentioned they ended up discovering new information because they were curious and thought this was a great idea compared to the typical site / our existing site. Existing users also understood that they could easily find the information needed in the main navigation - so they didn't feel like scrollytelling made it harder once they were already working with us.