Product Redesign
User feedback, lost deals, & new technology = Redesign for more revenue.
Overview
The B2B platform was in desperate need of a redesign. Customers consistently commented on its dated style and general overwhelming nature of the platform. Many of the issues were related to the fact that it was a product that was cobbled together over the years as a feature farm to keep long term customers happy. We needed to update the platform to feel more modern while making small changes to help pull customers into a new era of iterative design for the platform.
My Role
Lead & Principal Designer. Working with leadership to define the vision and direction of the product. During implementation I directed, provided feedback, and consulted with our internal design and engineering teams. Directed an external design team and provided feedback to our branding agency that was relaunching our brand simultaneously. This was a project that all 50+ engineers worked on and was considered a company wide initiative.
Consulted with: Customers, leadership, major stakeholders, & consultants worldwide.
Deliverables
-
An updated, modern interface
-
Simplified icons to be controlled programmatically
-
Simplification of all color themes
-
Accessibility rating of AA or higher
-
Restructuring the toolbar for easier use
Not in scope:
-
Editor experience redesign
-
Canvas view redesign
Discovery/Problem
We consistently rated as underperforming for UX/UI. When trying to expand our revenue, we had to evolve as our user base was in the process of aging out of their roles. These roles were being filled by generations that grew up on the internet, people who have always known “great” design.
Working with leadership we wanted to look at a few low hanging fruit options to start reducing the visual overload while also serving up relevant information to the user within 1 or 2 clicks. We wanted to make the experience feel welcoming and open while also conveying a sense of strength and security when using the platform.
Goals
- Modernize the look and feel of the platform, bringing it up to current standards.
- Push our current users into uncomfortable territory while designing ways for them to slip back and feel heard.
- Set up a way to capture anonymous user feedback that does not violate our contracted privacy policies.
Research
Before this project I had been working on a strategy to incrementally update the platform’s UX/UI. During the strategy research I interviewed the top 10 customers to understand how they were using the platform. What was most important to them? And what did they see as the major roadblocks for expanding within their enterprise – from a UX/UI perspective not a functionality standpoint. I then took the last five years of UX/UI tagged items within Jira and grouped them into areas of the platform.
In doing this I found two areas that were the most painful to our customers.
-
- Screen real estate is being eaten up by mobile patterns.
- Visual clutter that leads to cognitive overload.
During this project, which was around a year after my initial strategy presentation to the Product team, I re-interviewed the 10 customers and added an additional 3 customers to validate these pain points were still relevant.
10 International companies interviewed during research phase
(Companies in the Fortune 500)
3 Additional validation interviews
(With Companies in the Fortune 100)
Design
This project was presented to me as, if you could blue sky our platform (within the current technology) how would you make it better? This was also a project that was tightly kept under wraps until the design was announced to our senior leadership and sales teams for validation.
Working heavily with our VP of Engineering for technology constraints we iteratively built designs based off the research, feedback, and constraints we compiled. This collaboration was very fluid. I would send over designs they would provide feedback. We’d have brainstorming sessions and collaborate on screen as needed. However, I also had the constraint of getting the base design completed in 1-week.
Original Designs
Simplified Redesign
A more friendly dashboard view.
Simplifying the color scheme for all our themes allowed for a more open look. When the user can see the containers, they are often more likely to notice how much room is taken up by blank space. Eliminating all dividing lines and relying on flat white space, we induce the feeling of openness while not having to restructure the coding completely. To help with the approachability of the platform we investigated a friendlier shape language. Rounding corners for all our buttons, tiles, gadgets, and widgets.
On our “Tree” Menu, by simplifying the color scheme and giving a clear hierarchy of information we solved one of the most common complaints submitted to our customer service team, how do I add an object?
Simply reversing the add object button from the top to below the repository name and having it as a clear call to action, our users were able to self service without calling our customer service team for help.
Also, by eliminating the bulky move handle we were able to free up visual space without completely restructuring the underlying tech stack that ran our tree module.
Cleaning up the visual clutter when adding a second slide in menu. Now the user can clearly see where they are at within either menu. As well as in the Tree, they can see all the files associated with the folder they are currently in without drawing attention to the building containers.
Color Simplification
It was imperative to simplify our color and icon schemes. As you can see here, we went from a 7-shade pallet down to a three which gave us a AAA accessibility. We also simplified our agnostic collection from 30+ colors down to 8. This was done to not only help our accessibility rating, but also decrease engineering overhead for theming related items.
Icon Simplification
During this project we were able to move from an outdated PNG sprite sheet icon structure to a SVG based icon system. While we couldn’t update the icons in a truly meaningful way (a more modern set of icons) we were truly happy to be able to update the technology and icons to be crisp. This was a push from me as when editing the sprite sheet, it was wildly unmanageable and if you accidentally moved anything a pixel, all the icons across the platform would fail.
Moving away from the sprite sheet system allowed for us to simplify the construction of the icons. Many of our icons were constructed incorrectly years ago and have just travelled through the product as images. However, the design team was able to correct them and get them down to three colors as well. This allowed for the theme to control the icon colors which was a delighter many customers had asked for.
Engineering Handoffs
This was a huge piece of work for the engineering team. And they decided they wanted to test out a new way of working during this process. Rather than the product team writing stories and grouping work, it was on the individual engineering team members to communicate with each other and write their own stories to capture the work. To help, I grouped items together according to location within the Figma File. I broke down each piece of work to the smallest component and added numbers to them and created this dashboard to help engineers navigate the file quickly. Each of the bottom boxes corresponded to a page in Figma.
During kickoff we walked through the file and answered questions as they came up. During that kickoff the engineering team decided to use Figma commenting to communicate which items they wanted to complete. Many started grabbing items right away while others chose to work in larger groups of 3-4 to take on a full feature set of items.
My Role During Implementation: Support
During the implementation, I was there to support the engineering team in whatever ways they needed. At times this was validation on changes they wanted to make (always for the better…Go Team!) or to help capture states that weren’t explored. Considering all of this was put together in a week, that was super helpful. However, I also had my design team cover these items as they came up ad hock. My designs were never considered to be the end all, the whole team needed to feel good about the end product and they had the freedom to work with anyone on the design team to run ideas through and brainstorm.
During this time, I also acted as a facilitator to our customers for our user testing.
Internal Page Example
Implementation Support
User Testing
During the implementation of the new top navigational bar, many were concerned about the overall height of the bar and the possibility that it was going to take up too much real estate as we increased the size from 24px to 65px. Knowing that our customers were routinely on larger monitors (validated through previous research) we had the ability to increase the height. However, we didn’t have time to user test what I asked to implement. During the implementation, we did. Grabbing the Nav bar heights from B2C, B2B, and our direct competitors we were able to mockup and user test different “common” heights through Usability Hub. We were able to connect with our “on-call” user group that was helping us throughout the project for quick user testing within some of our largest customers. Later that group became our Customer Advisory Board. Using that data we were able to make a compromise bringing it down to around 40px and move forward on the project.
Prototypes
Very few items from this project needed prototyping, however when working on the menus since we were changing a lot of items, I was able create prototypes to help the engineers understand visually what was happening. These interaction prototypes were coupled with a larger design system later.
Design Support
During this project, my team also supported our Pro Services team. We worked through various illustrations and new icons they requested for when they built out customer’s dashboards. Collectively our team had a list of themes which each week we would review (in our design sync) ideas, sketches, and work products that supported those themes. My role was to help facilitate conversation, give feedback, and mentor the team on how best to move forward with their ideas. Working with a very junior team, I was able to help grow them into more confident illustrators while also showing them new places to source brainstorming ideas.
Results
90% customer satisfaction rating with the redesign.
Gartner Magic Quadrant Move from Challengers to Leaders.
(In Business Transformation Tools)
Ability for customers to set their own custom theme colors.
(A longtime delighter request)
Largest user testing rollout and participation at that time.
– 14 countries
Challenges & Takeaways
This was a huge undertaking by the company. Coordinating all the moving parts from a design front was a wonderful challenge. Here were a few key challenges that we had:
- The change in the engineering process caused a lot of communication issues and frustration between individual contributors.
- The color/icon simplification shined a large light on our underpinning code base, and it was not great.
Takeaways:
- “A new paint job” is never as simple as people want you to believe. The simpler a robust product looks, the more complex it is under the hood. Enterprise software is built on top of legacy code and legacy coders. As the company matures it’s hard to keep track of all the moving parts. Having a strong process, documentation, and communication is the key to success when taking on large design changes.
Related Projects
Product Design – Enterprise LMS
Full Product - Enterprise LMSTasked with a training portal learning management system (LMS), we needed to train users and employees on our products and best practices.OverviewAfter the success of the community site rollout, we were next tasked with a training portal...
Product Design – Community Site
Full Product - Community SiteA year in the life of...OverviewThe community site was their first yearlong project. Standard web design process, information discovery, spec development, wireframes, mockups, and development. When launched, engagement spiked, and we truly...
Product Design – Package Tracker App
Full Product - Package TrackerI don't got time for that...OverviewThe Package Tracker app was conceived—ground up—from the simple premise of; everyone is too busy to keep track of our online orders. With the decline of the brick and mortar store, we are consistently...
Available for: Project or Product Facilitation, Contracts, Freelancing, & Consulting.
Jeannie Hart
Product/UX/UI Design
t. 503.929.7972
e. hart.jeannie@gmail.com