UX Designer & Manager • Chicago-based • she/her
Creating a Mobile Website From the Ground Up
Company: McMaster-Carr
Role: UX Manager
Timeline: ~8 months
Our mobile website in the beginning of 2022 was simply our desktop site on a small screen. This information-dense approach on mobile was frustrating at best, and unusable at worst. Meanwhile, our mobile app was thoughtfully designed for a smaller screen. Taking inspiration from the mobile app, with some meaningful differences to accommodate a web platform, we designed and implemented a new mobile website within a year.
As a manager, my team was tasked with giving the mobile app a facelift, and then translating that design to mobile web. I started us off with diagnosing challenges within the mobile app.
The App
The Mobile Website
Diagnosing Existing Mobile-First Features
The Ribbon
rating: 4/10
The ribbon on the mobile app breaks most patterns of mobile nav bars. It blocks content and distracts the customer with the bright yellow. It should be a navigational anchor, not an attention-grabbing element.
We explored other navigational strategies, such as navigation hubs, tab bars, and hamburger/kebab menus. Ultimately we decided that the tab bar was the most aligned with our goals, and was the most similar to our current ribbon experience.
The View Toggle
rating: 8/10
The newest mobile app design allows customers to choose what format in which they’d like to see products. This provides more control for the customer, but we should still offer a curated experience. Therefore the default state should be chosen wisely.
The Filter Pane Bottom Sheet
rating: 6/10
The mobile app engineers had recently made a new bottom sheet panel for filtering on mobile. This design was effective, but at times interfered with the customer’s ability to make progress. We wanted to make the filter panel ubiquitously accessible, but never distracting.
By reassessing its persistence and behavior, we could make it a helpful tool, rather than an obtrusive suggestion.
After identifying opportunities for small but meaningful navigational updates to the mobile app, we moved on the mobile website.
Then we were faced with our primary question: Can a mobile app be “lifted and shifted” to a mobile website?
For the sake of feasibility and timeliness, leadership was interested in maintaining close parity between the mobile app and mobile site. However, I soon recognized that we would need to be mindful of meaningful differences between the two.
Key Considerations between App & Mobile Web
The Differentiators
A tab bar is a common pattern within a mobile app, but is rarely seen in mobile web. When it is present, it is usually because the user is being pushed to download the app. It competes for navigational attention with the browser’s own tab bar. Additionally, our filter pane would compete even more with this prime real estate. My stance was that we shouldn’t let our mobile app design inhibit our mobile web design, and that we should be appropriate over consistent.
Weighing UX Laws
We spent a significant amount of time with our steering committee, weighing Fitt’s Law against Jakob’s Law. Fitt’s Law tells us that we should keep likely paths nearby, while Jakob’s Law tells us that we should keep in mind the mental models that users form on other sites. Therefore, would a tab bar near your thumb be a better navigation experience, even if crowded? Or would a hamburger menu, like other mobile sites, but more usable?
Reining in the Features
It became clear upon ideation that the tab bar for the browser, the site tab bar, and the filter panel couldn’t all share space at the bottom of the screen. Our rich content would be inhibited, and customers could mis-tap easily. I steered us to reprioritize our content and constrain the number of features shown on first load. I relied on querying customer data to make these key decisions: for example, I found that customers are more successful when they filter (likely due to the broad product offering).
Filter Panel & Tab Bar
Stakeholder preferred
Keeps helpful controls convenient
Increases cognitive load
Crowds the experience
Filter Panel, Tab Bar, & Breadcrumbs
Offers filter breadcrumbs
Parity with app
Crowds the experience further
Only 50% of the chrome is used for content
Tab Bar Only
Better aligned to Jakob’s Law
Deviates from our mobile app
Makes key filter pane less discoverable
Filter Panel Only
Honors Fitt’s Law for filtering
Honors Jakob’s Law for navigational controls via the hamburger menu
Maintains a less crowded experience
The Design Options
These options made it clear that some controls would need to exist behind a tap. After looking at interactions data, which stated that users were 10% more likely to reach success (adding to order, downloading CAD files) if they interacted with the filter pane, I presented that decided that the filter pane was more likely to be beneficial to customers than the tab bar. So we aligned that putting other controls behind a hamburger menu was the best option.
