Model F Labs
Model F Labs Site Redesign
Date
Overview
Customer
Tools
August 2019
Model F Labs is a small group of guys working hard to bring back a timeless and classic piece of hardware. The Model F keyboard is known to be one of the, if not the best keyboard ever made. Their modern replicas utilize the same buckling capacative spring technology to provide the user with a uniquely tactile experience while typing. The materials used are also premium steel and thick plastic similar to how it was made by IBM in the 1970's and 80's. Due to cost cutting measures modern keyboards pale in comparison.
Model F labs offers a highly sought after premium product and the numbers reflect it. Since 9/1/19 they've made over $827,000 in sales. They seemingly have all the elements of a successful business, but their website is dated and doesn't do their product justice. Their website isn't responsive or mobile optimized and they lack any branding what so ever. With these shortcomings in mind we focused on designing a new homepage and a brand that is built for growth.
-
Millenial 25 - 35 years old
-
Member of the Deskthority keyboard forum
-
Computer history enthusiast
-
On a computer often and demand the highest quality typing experience
XD, Photoshop, After Effects, Premiere Pro
A flow depicting the new menu framework.
Competitive Research
The project was much more than a redesign of the singular menu screen. Rather, it created a new framework of multiple screens to support various permutations of the menu.
We added an entry point at the top of the menu for more information about the restaurant, an overflow menu for additional restaurant-level actions, an area for upsells and promotions (which we coined the amuse bouche, for any foodies out there), overhauled search, and added a menu switcher to alleviate issues with displaying multiple menus based on time of day.
Three core screens from the flow.
To test these changes, I built out a robust prototype utilizing real San Francisco restaurant data from our backend to bulletproof the designs.
In this prototype, I also explored motion concepts for our new header, which introduced a top-level, pill-based navigation that surfaced when a user scrolled to the menu content.
Prototyping motion for our header states.
Our decision to make the navigation top-level was a direct reaction to previous issues with navigation discoverability and our hypothesis that a clear navigation would increase conversion for longer menus.
The navigation would automatically cycle through and highlight navigation anchors as the user scrolled, to help them understand and encourage them to interact with the new paradigm.
Tap-initiated scroll (left) and automatic navigation cycling (right).
Introducing a new header and subpages to the menu framework also required creating guidelines for layering UI and creating depth.
Layering specs were added to the Eats UI kit, while sub page transitions were are also included in the prototype.
