First Impressions Matter: Rethinking Our Website Header
By Michael Luzmore, User Interface Engineer
--
In college, I was a teaching assistant for an introductory Design and Programming for the Web class, which, when I took it as a Freshman, gave me the basics in HTML, JavaScript, Python, PHP and CSS. The beauty of that class, especially to a young Information Science major like myself, was the speed and instant gratification of our work. I could make a tweak to the code, save it, and then see it in my browser a few seconds later.
My experience at StubHub has been similar. Whereas my peers at other companies tell me that it can sometimes take upwards of a year to see the features they’ve been working on go live on their company’s respective sites, the work I’ve been doing with the StubHub Product & Technology team can be seen all over our browsers.
I first started at StubHub as a summer intern in 2015. Back then, I was immediately thrown into the proverbial fire, working on important initiatives all geared towards improving the user experience. Today, at age 24, I am a User Interface Engineer and working at StubHub has brought me similar opportunities to see my work live in our product.
I thrive on this sense of independence, ownership, and results — as do my colleagues — which is why I jumped at the opportunity to be the engineering lead on rebuilding our global header.
The Inception Point
A website’s header is an extremely important feature. It is one of the first things a user sees when opening a page and it’s packed with a ton of functionality that people value deeply. Because of its placement on the page, the header’s visual language is crucial to setting a tone for the experience.
Recently, our UI engineering team has been migrating the website to React, which I had little experience with upon starting my full-time position in September 2017. But since joining the React project in January 2018, I have become proficient enough to be seen as a resource within our department.
During the early stages of migrating the site to React, our approach was: “We have this header. Take it exactly as it is, move it to React, and make sure it works the same as it did before.” As we moved beyond the migration into proper development on the new platform, we noticed that the header had several areas for improvement. The visual design was too dark and took up far too much valuable real estate on the page (especially on mweb). We needed to change the feel and make it more user-friendly.
Building and A/B Testing a Modular Header on React
Following the principles of React, everything built into the new header component is modular. This allows a flexibility in our technical design previously not possible. So, while the header is its own independent component, it “consumes” other modules like the search bar and location selector. Even the logo is its own component.
Because this new header was originally released as an A/B test, there was an added layer of complexity in making all these changes for the new header while also accommodating the old header’s features and design. This effectively means that code and stylings need to exist simultaneously for both — without impacting the experience of either.
Introducing the New Header
The header’s development and testing took around three weeks. It went live to an A/B test on the site, and is now live to 100% of domains. Despite being the primary engineer working on the header, I didn’t feel pressured by my manager or other stakeholders to complete it in an unrealistic amount of time.
I set my own deadlines, set my own projections of when critical parts would be finished, and had the whole team’s support along the way. Because I involved other engineers and stakeholders early on, there were no surprises that delayed the project or required a last-minute technical overhaul.
Now, when you look at the header’s new white background, you will see that it affords a lightness that intends to inform a whole new aesthetic and feel for the website — exactly what we set out to achieve when we first embarked on this project.
It Ain’t Official Until There’s a Bug
As conscientious as we were during the planning of our new header, there was one bug that emerged during the A/B test. We found that under situations where the browser window was very large, it could block a user’s ability to click on certain navigation links like the “Sell” button. I was able to quickly identify the root cause and communicate to stakeholders from both our Sell and CS teams what our timeline was for correcting the issue.
At some companies, an issue of this severity may have been handed off to someone more senior or experienced than me, but at StubHub, the whole team stood behind me and supported my ability to rectify the issue.
What I’ve Learned
The header project provided an education and an experience I don’t think I’d be able to receive anywhere else — and it feels like a culmination of the countless hours I spent learning and working through React. We’re working on changing our UI for the web and we’re migrating to the cloud. These are no small feats.
With all of the experimentation taking place on our team currently, even I lose track of features that were mock-ups just a few weeks ago. That’s how quickly they are being seen and used by our users.
Given the velocity of our work, as an engineer, this has been the perfect challenge.
My advancing technical skill has also led me to become more outspoken on our team. When I first started at StubHub, I was quiet in our meetings. I didn’t feel I could speak with true authority — at least in comparison to someone more senior. As my expertise in our code base has increased, I have become much more vocal in contributing to engineering decisions and sharing my opinion to the larger team to inform design and product choices.
As much as I am an engineer on the team, I know that if I ask a product question or propose a different approach, my voice is always taken seriously. The interdisciplinary nature and perspective that originally attracted me to study Information Science in college is the same thing I’ve found to admire and appreciate at StubHub.
