Discount Tire
2023
Work created while at IBM for Discount Tire.#Product Design
#Intranet
#Adobe experience manager
Role
Lead UI/UX Designer
s. 01
Intro
Together with a small team of designers and analysts at IBM I worked to overhaul Discount Tire’s outdated intranet. The legacy system had been in place for some 20 years and was riddled with usability issues, essentially having been treated as a space to throw anything and everything over the years. The IA was abstruse and unorganized, items having been added one on top of the other into the navigation and home screen, there was a lack of any kind of stylistic cohesion, each internal team produced assets as it wished with no guidelines to mitigate the chaos. The search functionality was not up to the task of navigating through many years worth of documents. In short, it was an absolute mess and needed to be reorganized with an emphasis on menu structures, i.a. and stylistic cohesion. Working on an incredibly tight deadline, we analyzed over 800 existing pages to develop a strategy for the IA and to create a templated approach that prioritized key content.
s. 02
A quick description of the problem
Discount Tire’s existing intranet had quite a few problems, it did not work on mobile, had insufficient search capabilities, and was running on a unreliable tech. In addition to these technical concerns, there was no stylistic consistency, every page was its own universe, and over the years as teams added more and more content without an organizational strategy it had become very difficult to navigate to the content you needed.s. 03
two types of users
Although realistically there are more than two types of employees across the Discount Tire organization we were able to pinpoint two main types that would determine the permissions and content displayed. 1. Corporate users work in the corporate headquarters building and have dedicated company laptops that allow them to access servers while at home.
2. Store users work in the DT branch offices. Their only access point to company software is through the single computer in the store, which is often outdated and slow.
Mapping out existing functionality involved extensive screenshotting in figma as we tried to get an understanding of the existing i.a. (information architecture)
s. 04
Understanding the legacy application
Our first challenge was familiarizing ourselves with the cluttered legacy application. In an attempt to better understand the IA, I mapped out all of the links in **BOTH** primary navigations, starting to identify key components and patterns that could then be mapped back to the AEM library and the default and limited set of components we had available. Continued mapping of existing components.
Once we had an idea of what components needed to be accounted for I started designing low fi versions that met our needs. These early versions ultimately didn’t make it to production but laid the groundwork for the modular home screen that became fina
The home screen itself is very modular. These early sketches show attempts to fit in the components we knew we needed with the idea that at some point in the future users could customize their view.
s. 05
Solution overview
Ultimately, despite myriad challenges we were able to synthesize everything we had found into a coherent solution. Discount Tire’s new intranet was now mobile friendly, stable, easy to use, and visually cohesive. We enhanced existing functionality, made it easier to find crucial information, and left DT with a roadmap for continued improvement.s. 06
mobile access
Giving employees access to the application on the go was a priority for Discount Tire but it presented significant technical challenges as most traffic is normally routed through a VPN attached to a single internet connection. Thus, on the go, it is difficult to secure and authenticate users trying to access the portal. Ultimately it proved a big enough priority that new access points were made and we were able to offer nearly all the same functionality on mobile, allowing store users in particular to stay up to date with information that previously was only available to them while physically in the store they work in. Almost all of the functionality on desktop was transferred smoothly to the mobile experience, the only exceptions being certain documents and confidential company apps that could only be accessed through a previously registered router.
s. 07
A mega-menu solved a lot of the organizational woes. We did our best to “future proof” it and set in place categories that were wide enough to encapsulate a variety of things, also leaving behind guidelines to help prevent what happened last time where teams would add everything to the nav, each thinking their piece was as important as the rest of the high level nav stuff. It was a nightmare.s. 08
creating and managing the design system
When we began this work Discount Tire did not have a coherent design system in place. Most commonly the advice we received was “look at dot com.” Seeing this as an opportunity, the multiple IBM teams working across different DT products began drafting the document early on. It was a lengthy and tedious process of checking against the website, checking against each other, and in our particular case checking against the extremely limited capability offered by AEM. My contribution to the design system is mostly restricted to the further application and extension of this particular DT product, however we laid the groundwork for an organization-wide document that could be easily shared and applied by design staff in the future. What I left behind was extensive documentation, pixel ready components, icons, and an organized set of images, as well as instructions for how to use and apply the work I had done. This last part was crucial given that my last task as UI Lead was getting a team of 5 designers from India apprised on our progress so they could take over the work (this is a common thing in global tech, once a project becomes stable it gets handed over to a team in a country where labor is cheaper.)A glance at some of the components that we specced out towards the end of the project.
s. 09
Final considerations
Large-scale software projects are never as smooth or as easy to execute as the sales team makes it seem when pitching the work. The two biggest challenges were working within an extremely limiting and poorly documented framework (AEM) and a brutally unrealistic timeline. Unfortunately there was an enormous misunderstanding early on when we showed our first hi-fidelity screens. We had counted on our Adobe representative to keep us within the realm of the possible and thus, upon his avid approval of the work we felt assured that we were on track. Fast forward 5 weeks and things are falling apart. In actuality, the screens we had been working with and presenting to the client would require significant modification to out-of-the-box AEM components and represented an enormous amount of work. This was a shocking and disappointing turn given that we had presented the work nearly every day for weeks in front of every stakeholder, including technical representatives from Adobe. We pushed forward simplifying what we had proposed dramatically, which did not sit well with the client as one by one we took back the shiny new usability improvements that we had promised. We now had to push forward with a grand total of 10 page templates, including the complex home screen dashboard, which would be accounting for well over 500 pages worth of content. In some cases this wasn’t difficult, a lot of the pages were similar or could be made more similar. The content could be grouped together and things could be fit into a mold without upsetting their purpose. However there were some pages that were impossibly unique and merited their own page. A page which would eat into our 10 templage limit and a page which was so unique it could not be used for much else. It was a delicate balance as we went back and forth trying to understand if our templating would really account for that much content. My impression at the end of my role was that yes, that we had somehow pulled it off. Development had begun with our India team in Bangalore, and I was able to transfer all knowledge I had of the product, the file, the team dynamics, over to the Indian design team in time for the next contract to start. Alex Sweet
Available for full time + Freelance© 2024 All work created and owned by Alex Sweet
Typography Site