Enterprise Tools Enhancements
Enterprise Tools Enhancements
Challenge: Houston is a collection of software applications that enable users to dynamically change a variety of internal systems. These applications provide a wide range of functionality. The main two apps allow internal users to create and manage site content and promotions.
Hypothesis: Improve the usability of Houston so that users can complete tasks quickly and without error.
Metric Goal: 40% reduction in component build/iterate time
-
Site Optimization and Innovation teams
Complete business requests effectively and efficiently
-
Description text goes here
-
Conduct interviews & synthesize data
Perform audits & share opportunities
Document current/future design systems
Create mockups & prototypes
Present to stakeholders & gather feedback
-
User Interviews
Content Analysis
Evidence-based Design
Stakeholder Walkthrough
-
Confluence - Documentation/Research
Jira - Dev Collaboration
Overflow.io - User Flows
Figma - Wireframes
Initial Audit of the Tool
To gain a deep understanding of the space, I began conducting interviews and shadowing users. This provided me with a strong list of opportunities and pain points.
I shared that list with my team and we created stories and prioritized the work alongside our current roadmap.
Lead with Accessibility
Our users sometimes need to perform a task in the middle of the night. Part of their job is to test and verify that a promotion is in a certain ‘state’ and this is partly indicated by color.
I gathered from user interviews that it was difficult to decipher the state of promos due to the similar color scheme and the low contrast of elements.
Promo UI in Houston with low contrast elements
Promo UI after increasing contrast and scannability
After making these changes, users commented that the new UI ‘greatly increased their confidence’ in performing their job.
Test Early and Often
Without a QA resource on our team, I was responsible for testing before and after updates. I supplemented our testing by holding a monthly meeting with users and stakeholders where I would run brief usability sessions to discover opportunities.
At one of these sessions, I discovered an issue that several new users had run into that caused internal and customer-facing issues.
This consequences of this button was not clear to users or our team
I added clarifying language, a preventive step, and changed the color
This button has not been accidentally pressed since the update to the language, process, and color. 🎉
Working with an Existing Design System
Documenting Components
I documented all of Houston’s components with present and future attributes
Houston had been built in a way where updating the UI took a lot of work. Working with developers and the PO, I starting a weekly meeting to address this problem. We workshopped different solutions until we landed on utilizing a frontend tool called Storybook that allows people to test and iterate on components quickly in isolation.
With this new tool and process, I cut down the time it takes to update a component from an hour to a few minutes. After I presented this work at a department gathering, the site experience team asked me to help plan the work needed to incorporate a similar system.
“The ability to quickly iterate and test our components will significantly decrease the time it takes to build and manage Houston - Lead Engineer of Tools Team”
Impact
Simplifying and making the UI more accessible increased user confidence in our tools to do their work. This allows them to do their work faster and eliminates repeated work by having to go back and fix an issue.
Incorporating Storybook allows our team to build and iterate on components in minutes instead of hours. This will allow us to build faster with a more dynamic set of components.
Testing and Iterating in Storybook
Storybook allowed our team to test and update our components in minutes
On the Horizon
With the ability to quickly iterate on the UI, we’ve been able to prioritize initiatives that were thought impossible and have a flexible design system we can iterate on at scale.
One of those initiatives is to have a dark mode option for Houston. This would be beneficial for users who have difficulty with a bright screen and who are working late at night.
