Unified Web Ecosystem

One experience to rule them all

Role: Sole UX and Product Owner

Summary: Initiated project concept, identified and brought stakeholders together, identified target audience, initiated analytics into process, and optimized critical path performance.

Challenges included:

• bringing together siloed departments and stakeholders,
• changing the company mental model from disparate sites to a unified web ecosystem,
• helping stakeholders understand the target audience and current market,
• initiating analytics into the process and building dashboards,
• search optimization,
• load performance optimization,
• distributed team and stakeholders across 3 countries with many remote employees
• last-minute re-branding

Process & methodologies:

• persona-based storyboard walkthroughs
• usability tests
• unify information architecture
• plan responsive design strategy and educate stakeholders
• create & groom backlog; plan sprints
• help plan roadmap
• keep dev team motivated & happy
• iterative prototypes
• Agile methodology
• global search
• performance optimization
• Agile methodology

Tools: Axure, Illustrator, Sketch, InVision

What we wanted: Unified web ecosystem with one profile, quick top navigation, section indicator, contextual main navigation and sign in either going to customer portal or giving user choice of customer portal or stay on corporate homepage, global and optimized search, optimized performance

Where we are so far: Unified web ecosystem with one profile, one layer of unchanging navigation and sign in staying on corporate homepage. I've created a search optimization plan and performance optimization plan and we're in the process of this next phase. We're also in the process of adding a marketplace and community.

Storyboarding - cartooning brings people together

I storyboarded the main use cases: search from Google, search from corporate homepage, search from docs, and search from support

Top nav and contextual nav for customer portal

Customer portal earlier concept

Site map, flows, and support access map

Mega-menus

One navigation

Mobile

Where we are so far

In the pipeline: global search, marketplace, and much more

> Close Project

Support Portal

A great user experience can't stop at design

Role: Sole UX

Summary: Initiated project as important touchpoint in customer journey, identified and brought stakeholders together, interviewed customers and employees, tested, initiated analytics into process, optimized for top tasks.

Challenges included:

• building trust in UX with siloed department overseas,
• content from acquisitions had never been handled,
• operating systems filters had outdated names,
• category names were not data-driven and had never been tested,
• site was not responsive,
• there were pages of filters, most of which only needed to be set once,

Process & methodologies:

• customer interviews
• support engineer interviews for top customer pain points
• initiated customer and support engineer collaborative design
• update operating system filter names
• group related documents into new categories
• remove unused and group rarely used filters
• usability testing,
• prototyping,
• initiated analytics into process
• keep support engineer helpers motivated & happy
• Agile methodology

Tools: Card-sorting, pencil/paper, Axure, Google Analytics, support site search logs, wrote C++ program for cluster analysis

Task flow

Iterative design - older concept

Final design

Mobile

Clean up filters - there were pages of outdated and even unused OS filters. I researched the new names, went through all content and identified which to remove

Group related documentation - there were many acquisitions where this had never been handled and three main languages

Group related documentation - there were many acquisitions where this had never been handled

Close Project

API Portal

A great user experience can't stop at design

Role: Team UX

Summary: I and three UX teammates worked around the clock to get this API Portal ready for a Gartner analysis.

Challenges included:

• very tight timeframe,
• only 4 team members, 2 remote, and in 2 different countries,
• new platform (Joomla),
• not very familiar with API management before this,

Process & methodologies:

• wireframe
• create high-fidelity mockups
• design icons and images
• code in Joomla (I did some of this, but not the majority)

Tools: Axure, Illustrator, Joomla

Sitemap

Wireframes

High-fi mockups

Homepage section

We broke up the homepage into 4 and each took one. I did Create.

Sample rebranding for demo

Close Project

Search optimization

A great user experience can't stop at design

Role: Sole UX

Summary: Initiated project concept, identified and brought stakeholders together, interviewed customers, tested, initiated analytics into process, identified top tasks and optimized search relevancy and accuracy.

Challenges included:

• bringing together siloed departments and stakeholders,
• changing the company mental model to realize the importance of search,
• analyzing search logs to identify top tasks,
• initiating analytics into the process and building dashboards,
• perform relevancy testing and benchmark critical product search results,
• set goals for top 14 queries,
• distributed team and stakeholders across 3 countries with many remote employees
• last-minute re-branding

Process & methodologies:

• storyboards of current search experience and resulting support calls
• create synonyms file to link common misspellings, typos, and full names/acronyms
• boost search engine metadata
• analyze search logs to identify top tasks,
• initiate analytics into the process and building dashboards,
• perform relevancy testing and benchmark critical product overall and per task search accuracy,
• set goals for at least the top 14 queries
• provide for zero result searches
• identify patterns
• clean up search results, weed out old content
• create search optimization flow
• keep support engineer helpers motivated & happy
• standardize documentation titling

Tools: Card-sorting, pencil/paper, Google Analytics, support site search logs, code editor

Storyboards - a picture is worth 1000 words

I storyboarded the main use cases: installing, upgrading, troubleshooting

Task flow

Relevancy Testing

Learn more about optimizing search

Benchmarking each product version and top tasks of install, upgrade, troubleshoot, as well as overall product score

Learn more about optimizing search

Close Project

Performance Optimization

You don't get a second chance to make a first impression! 40% of people on many sites will leave by 3 seconds. By 10 seconds, they are multi-tasking and have probably already left your site, never to return.

Role: Sole UX

Summary: Initiated project concept, educated stakeholders, analyzed and reported.

Challenges included:

• bringing together siloed departments and stakeholders,
• changing the company mental model to realize the importance of performance

Process & methodologies:

• analyzed with testing tools GTMetrix and webpagetest.org for individual and competitor benchmarking
• inspected with Chrome Developer Tools
• educated company on image optimization
• showed how all images could be optimized for size with KB savings per image
• set up grunt process to automatically optimize images
• showed how CSS and JS code could be automatically minimized with KB savings
• brought analytics in and identified Chrome as top browser, which meant we could use image srcset with webp,
• created overall and per country desktop and mobile performance dashboards,
• set OKRs for phases

Tools: GTMetric and webpagetest.org test sites, Chrome Developer Tools, Google Analytics, Grunt/npm/node (optimizing images)

What's your 5-second impression?

If your site still hasn't loaded by 5 seconds, you're too late.

How do you stack up against your competitors?

If your site is slower than your competitors, you're already losing business.

Analyze critical paths

Identify where you can streamline your customer's journey.

Don't force-feed your users

All customers and potential customers will experience network issues at some point. Plan for it. Some are on data plans. Don't punish them for visiting your site!

Optimize images

Are your images the right size for their containers? Provide srcsets of images so that browsers can pick the best one. For example, if you have a lot of Chrome users, webp is about 35 percent smaller in terms of file size.

Know your audience

Where are your users located? What screen sizes are they using? What devices? What is your most popular browser? How fast is the desktop experience? Their mobile experience? Remember that mobile is generally 2 seconds longer than desktop.

Learn more about load performance.

Close Project

B2B

Re-architected and redesigned B2B application.

Role: Sole UX

Summary: Initiated information re-architecture, reviewed and iterated with stakeholders, interviewed and collaboratively designed with customers, tested, identified top tasks and optimized navigation.

Challenges included:

• difficult to change architecture with legacy code,
• huge feature backlog made it hard to get UX improvements implemented,
• needed to build team's trust in UX

Process & methodologies:

• information architecture (moved whole pages to reduce dev impact)
• initiated customer collaborative design program
• identified all related tasks for each module
• created sidebar which doubled as side nav or search, depending on page,
• usability testing with customers and employees,
• iterative prototyping

Tools: Visio, video conferencing/Google Docs (for tests and surveys), Axure, support site search logs, code editor

Information architecture

I re-architected the product such that it had a minimal impact on development

Customer collaborative design for the win!

I initiated a customer collaboration program and discovered some great ways to enhance the product. There was no way to categorize or remove tasks. Customers had hundreds of tasks that they were stuck with. We categorized tasks and added the ability to ignore and remove tasks.

Iterative design

Tried right and left sidebar and even two sidebars. Right sidebar emphasized content, but left sidebar worked best with show/hide menu icon.

Final design

I initiated a customer collaboration program and discovered some great ways to enhance the product. There was no way to categorize or remove tasks. Customers had hundreds of tasks that they were stuck with. We categorized tasks and added the ability to ignore and remove tasks.

Close Project

Mobile Apps

Role: Sole UX

Summary: We were not sure whether we needed a mobile app for support case management or mobile web. After prototyping both, we decided to go with mobile web.

Challenges included:

• company had not embraced mobile,
• creating mobile patterns on the fly

Process & methodologies:

• iterative prototyping
• usability testing
• initiated analytics into project to inform responsive design strategy
• Agile methodology

Tools: Axure, Google Analytics

Mobile App

Initially, the mobile app would only handle creating and managing cases.

Close Project

Community Management

Onboarding and campaign management.

Role: Sole UX

Summary: Storyboarded, designed community management application

Challenges included:

• simultaneously also sole UX on web ecosystem unification, which had critical launch date,
• distributed teams in 2 countries,
• every company needs something different from onboarding and community management

Process & methodologies:

• created and storyboarded persona-based use cases
• flowcharted user tasks
• iterative prototyping
• Agile methodology

Tools: Visio, Illustrator, Axure

Storyboarding

I created the use cases and storyboarded the personas moving through the different UIs, noting pain points. Project management liked the storyboards so much, they showed them to customers. That and early prototypes helped us to understand customers' needs more thoroughly. The product is currently on hold.

Flows - user task and global search

Wireframing

Mockups

This project is currently on hold and being pivoted.

Close Project

Analytics

Re-architected and redesigned analytics application.

Role: Sole UX

Summary: Initiated information re-architecture, reviewed and iterated with stakeholders, interviewed and collaboratively designed with customers, tested, identified top tasks and optimized navigation. Helped plan roadmap. When I showed all the architecture issues, functionality and accessibility issues, and how-to videos, it changed company strategic direction for analytics to another product.

Challenges included:

• licensed product had many usability and accessibility issues
• information architecture was not intuitive,

Process & methodologies:

• information architecture,
• interviewed customers,
• created how-to videos,
• performed functionality and accessibility testing,
• created VPAT (Voluntary Product Accessibility Template),
• initiated customer collaborative design program,
• usability testing,
• designed color-blind safe palettes,
• redesigned stand-alone product to fit new branding,
• redesigned integrated product for product suite,
• iterative prototyping

Tools: Visio, video conferencing/Google Docs (for tests and surveys), Axure, JAWS (accessibility testing)

Before

The product was a long way from where we needed it to be, both from the design and underlying architecture perspective

Accessibility Testing

The product was a long way from where we needed it to be, both from the design and underlying architecture perspective. There were over 300 accessibility issues in 51 categories

Analyzing Color-Blind Experience

There were many issues - you couldn't set the order of colors, the chart design was difficult to read even for normal vision users, and the legends were too small and too far away.

Designing Color-Blind Safe Palettes

I created palettes that would work for Protonopia, Deuteronopia, and Tritanopia. This covered both red-green and blue color blindness.

Final design

The product could either be stand-alone or integrated as part of a data governance suite.

Close Project