Case Study 1 | Shirley Portfolio

Setting the Premise

The organization that I work at, Kissflow, has grown exponentially from a single product to multi-product SaaS company and it was time that the world knew about its incredible transformation. This case study is the tale of how we solved the issues of site navigation and usability issues.

CASE STUDY #1

Building a Simple-to-navigate Website for Kissflow

Challenges I Faced

With the timer turned on the website work, the design team got on their toes. The navigation structure and flow stepped in a little late in the process, with more light given to the aesthetics than usability.
And that’s interestingly how the challenge in this case study also became the end goal of it - building the navigation structure of the site from ground up.

Who I worked with

Chintan Jain, Associate Director of Product Marketing

Yuvaraj Muthu, Creative Design Lead

Collaborating with the tech team

What I did

With the need for our website to be up and running on a tight timeline, I stepped in to guide my design team with UX. It was my responsibility to ensure that the site was intuitive, user-friendly and resulted in bringing the desirable traffic and engagement.

(Existing UI)

Brand Home Page

Product Page

The second level menu options would change, features, pricing etc of the selected product.

Mobile Navigation Design

(Existing UI)

Probe & Learn

Step one was to explore the site, learn what was needed and think about it. The behaviour in handling mobile is much different than the desktop experience. Because of which the research process was split based on these devices. I had to deprioritize the tablet as we were receiving 2% of the overall site traffic.

Analytics Review

I began by digging into our historical data, surfacing user pain points and barriers in searching for information. I used Google Analytics to monitor traffic, Navigation Summary, Pogo Sticking and other touch points. I predefined a set of events for our menu options using Analytics. Which was used to track people clicking on the menu options. I also used insights from heatmaps, to dig into the quantitative part for those insights.

*Massive amounts of data were available in Google Analytics etc. The main challenge was sorting through the data and finding meaningful patterns.

Heatmaps and Session Recordings

From the date we had launched the navigation, I had to closely monitor heat maps, session recordings and scroll maps. This helped me understand the pros and cons of the current design.

With the aid of session recordings, I was able to identify several problems, such as:

Users clicking on non-clickable elements
Users engaging more in elements we didn’t expect

Using anonymous session recordings, I was able to reproduce many of the behaviours found in the Analytics Review, Heat Mapping, and User Testing.

I used these heatmaps as a sense of direction to find quantitative insights. This further helped us in identifying what other quantitative data points I had to analyze.

Problem Identified

Based on the insights collected from Core Research I was able to compile the set of problems in the current navigation.

Problems that we prioritized:

Users were clicking on elements that were unclickable
Breaking the default behaviour of a dropdown was confusing users on the product offering.
Inconsistency in the navigation menu. The main navigation options would change based on the page. Confusing users on where the previous options were or how to go back to where they came from.
Repeating menu options. For instance, the “Pricing” menu option was displayed in two places on the menu.
Not clearly showcasing which page the user is on.
The Digital Workplace UI option, confused people that they could navigate by clicking on the information presented below it.

How Research was Compiled and Shared

All the data was compiled and shared via a Google deck. I shared data that went beyond just numbers and consisted of user recordings and heat maps as well. This way the stakeholders didn’t have to look at the problem as numbers, but were also able to understand the frustration from a user perspective. It showed them how the problems identified could impact their potential customers and not just the conversion rates but also influence how they perceive the brand itself.

Disclosing the problems and statistics wasn't sufficient since Marketing UX had been a new venture. I had to demonstrate why this was a problem by talking about mental models, pattern recognition and other behaviour patterns that could cause these problems.

Collaboration & Awareness

In addition to presenting our current problem to the stakeholder, I had to also understand the business vision and their future goals, which plays a major role in how we structure our site navigation. We'd source opportunities from the core team, stakeholders within the business, and the design lead. These were used to build the business case, flesh out the iteration, and set it in motion.

Our goal - allow visitors to search with ease. By making it obvious so visitors don't get lost. Remain consistent throughout the site. And appear in context with the entire site.

Hypothesis

Once a user lands on any product page, to provide ONLY relevant menu options(Eg: Process Management, Overview, Features, Pricing, and Customers).
We felt Resources and Partners were creating a distraction, so we excluded them from the secondary navigation. (Resources: we still haven’t built a structure for product specific).
We reduced priority for “All Products” and “Kissflow logo”

Primary Metric

Iterations were driven by measurable primary goals and supplemented by unique one-off goals.

Primary Metric: Increase the no.of people who are navigating within the product.

Why: when someone lands on a specific product, it’s best we ensure we make them engaged within the product. That way they would be able to clearly understand how that product would make their lives better.

Ideate & Build

Competitive Analysis & Inspiration Gathering

I put together a collection of references from our competitors and other brands. The purpose of the task was to identify similar patterns that people are with. (I followed Jakob’s Law for this) Such as label names, how multiple product brands have structured their navigation system.

Wireframes and Mockups

Desktop

Throughout the process, I had to identify ways to ensure our brand logo and “All products” menu option isn’t that prominent. Once users land on a product page, I wanted people to focus on the secondary navigation. Suggesting what menu option should be included and not was also part of the task.

Mobile

Mobile navigation was structured based on the thumb zone, and touchpoints that are easy for people to access. I had wanted to structure it according to the page intent. (nearly 80% of our mobile traffic came from blog pages)Such as how it should look in blogs such as informational, investigational and transactional. Splitting based on landing page intent, such as the product home page, brand page, ebooks and other resource pages.

The Bigger Wins!

After landing on three to five options I had to showcase the options to my team and the stakeholders. This helped them in visualizing how it would appear on the site. That helped to agree or disagree on options. Finally, we were able to identify which option we were going to kick start with. For mobile, the stakeholder and team wanted generic navigation. As intent page navigation would require time and effort.

Brand Home Page

If you notice, we removed the second level nav bar from the brand home page.

We also decided that we would give equal weightage for each product, instead of highlighting Digital Workplace.

Product Page

We had made the top menu bar less prominent (Home page menu option, All product menu option and login). The primary focus was to ensure people stay and explore options within the page.

Observe & Implement

Heat Maps, Session Recordings

After the launch, session recordings and heat maps helped identify where the design was performing well and the opportunities for iterative tests.
The design team monitored for UI related issues such as responsiveness and handed it over to the tech team to get it fixed on priority.
I also closely monitored:

How people were navigating.
Whether there were pogo sticking issues like the previous design
Whether people were exploring menu options etc.

This information was very easily paired with quantitative data and used to prioritize the most important items for the next iteration.

KPI Performance

I had defined events for tracking the menu options, and reports such as path analysis, navigation menu clicks etc. This gave a clear picture on user behaviour such as:

Which menu options they were navigating
Whether they were engaging more within product menu options or exploring other products/ home page
(we found that majority of the people were engaging more within the product menu option)

Showtime

With Marketing UX being a new chapter within the marketing team, it was extremely important to share the knowledge from the work we do, no matter if it was a success or a failure. This was an important step in convincing the organization how UX can help them in achieving their goals and objectives.

I held a session and shared all the insights and the entire process from inception to the outcome, the challenges and most importantly the learnings. Despite this being one of the most unnerving moments for me (because of the stage fright), I was very proud and glad that I was able to share my journey with the team.

After all, I believe Marketing UX should be about the different factions of the teams collaborating and not just be something I do by myself. Only then will this glimmer as a prospect of us being better versions of ourselves.

The Payoff

Only 2 % - 4% people were navigating to other products and brand home pages

(ie the objective was to ensure if someone comes to a Workflow product they show invest more on the workflow navigation options such as workflow pricing, workflow features etc..)

60% drop in Pogo Sticking

(ie no. of people going back and forth)

Overall

I was able to resolve most of the usability issues, to ensure people have ease of streamline experience while exploring the site.

What I learned

Being my first UX project, it was exciting and fun. It provided real value in terms of the research, collaborative work and implementation that I got to do. There were roadblocks and milestones alike and that’s what helps me learn and improve:

Teamwork

From managing the tight deadline to brainstorming effective solutions with me, my team helped me deliver impactful results.

Data Monitoring

The data gaps and delays in analysis taught me the importance of deciding a strong launch and analysis plan ahead of time.

Always fight for good UX

I learned to stand my ground and advocate for good user experience when the team sometimes missed considering usability.

Choosing what we won’t do

Prioritising the right solutions and plans over all the options available to ensure that work was done within timelines and with efficient results was an important lesson.

How to adapt to changing requirements

New timelines, resourcing issues, and reprioritization meant the scope of the project was constantly changing. I learned to adapt to those changes and deliver the best design in time.

CASE STUDY #2