Around the end of August, the hosting provider Media Temple rolled out the redesign of their Account Center, bringing that component into line with the rest of their site, which was relaunched in January 2014 with a new design using HVD Fonts’ Brandon Text for all typography throughout.
Behind the redesign
MediaTemple has long built a brand and a reputation as the hosting provider favored by many design and creative professionals. Having identified that their strong relationship with that community and expertise in the field wasn’t reflected in the design of their website, Media Temple’s Creative and UX team, led by CD Jon Setzen, partnered with San Francisco agency Character to develop a better approach. The redesign went live with their shopfront in January, and then extended to their account center in August, and undoubtedly they’ve strengthened their position as industry leaders by creating a significantly different proposition to any other provider in the technology service space.
The Typeface: Brandon Text
A central component of their redesigned interface is the adoption throughout of HVD Fonts’ Brandon Text, which we think is notable for a number of reasons and worth exploring in some depth.
Brandon Text is the somewhat overlooked companion to the far more ubiquitous Brandon Grotesque. Optimized for longer, immersive paragraph settings, it is in fact a better all-round toolkit for site-wide use. The key difference between Brandons Text and Grotesque is the former’s larger x-height, the relative measure of a typeface’s size when compared to other typeface designs.
Compare the height of the lowercase ‘h’ and ‘k’ in the two layouts above, and notice how much taller the capital letters are in Brandon Grotesque. Taken as a block of text, the larger relative x-height of Brandon Text allows for closer line spacing. Other details such as the single storey ‘g’ also contribute to Brandon Text being an better typeface for longer, immersive reading.
The Road to Brandon
As Brandon Text is the functional version of the Brandon family, we wondered whether its selection for this project was a UI-led decision. In our imagination, Media Temple would have chosen Brandon Grotesque for its aesthetic role in creating a sort of soft yet robust elegance; it’s a popular choice for the humanizing touch it brings to a site’s design pallet. That they went for the Text version indicated this was a decision informed more by the demands of functionality than branding.
When we put this theory to Jon however, his description of the process that led them Brandon Text reveals a much more nuanced explanation of the role typography plays in both the character and the workings of a site providing technology services.
A few years back Media Temple had adopted Proxima Nova as their first move away from the default system fonts. “It felt like a more refined choice”, says Jon, “but it didn’t set us apart from our peers. The visual scene among hosting service providers was dominated by shots of miles and miles of cool-looking server hardware, and the typography – if anyone thought about it all – was equally cold and expressionless. We also introduced a serif font for some headline use, as an experiment, but it didn’t feel right to us. Brandon Grotesque first came into consideration when we began our collaboration with Character and their Creative Director Paul Miller, who had his team use the typeface in some of the branding work they were doing for us. It felt more reflective of who we are as a company, so yes, we were thinking in terms of branding at that stage.”
One reason Jon gives for not pairing Brandon with anything else is purely pragmatic – given the large images they were also employing as part of the redesign, they were seeking to not impose extra bandwidth pressure on the user by adding unnecessary typefaces. It’s here that the choice of Brandon Text, rather than Grotesque, makes sense. We can see the designers really making the typeface work hard within the limitations, perhaps intentionally self-imposed, of a design system that relies on widescreen photography and a sans serif typeface.
For Jon, part of Brandon’s appeal is its capacity for creating large, substantial headlines without becoming an overly heavy visual presence: “The way that the typeface is designed in lighter weights, it has an inviting and announcing way about it rather than shouting. We use it a lot in our calls to action for that reason.”
Throughout the hierarchy in fact, they’ve mixed the weights and cases very effectively, managing to convey multiple layers and types of information while avoiding the textual chaos that can result from too many typefaces.
Typography in the UI: Function vs Branding
Of particular interest to web typographers is the intersection of typographic hierarchy and user interface design.
Media Temple’s suite of functional tools and operations are a critical part of the user’s experience, so the chosen typeface needed to work well and consistently while contributing an element of branding that would allow the user to engage on an emotional level. Having established that Brandon Text worked well with Media Temple’s visually literate customers, it wasn’t an automatic decision to extend the new visual style to the Account Center.
“We always thought that for the account center we would maybe go for Helvetica, just because people use the Account Center to get things done – would a branded interface get in the way of that? With that in mind, we saw no reason to ‘cute it up.’
“But then we started to use the style sheets we already had in place for the rest of the site for internal use of the Account Center, and as users we really enjoyed the consistent experience. We began to do some tests with a hundred or so invited users and although we got some extremely polarized feedback, the positive reactions outweighed the negative so we decided to proceed with using the one typeface throughout the site.”
Aside from a consistent customer experience throughout, introducing Brandon Text to the Account Center meant that Jon was able to create a leaner interface less dependent on icons. Even though there are fewer icons, it’s always clear what is a button because the clickable items always look the same whether the customer is using the Account Center or browsing product offers from the font page. By working hard to create a comprehensive hierarchy from the outset, it was less of a design challenge to maintain that consistency into the more complex interface of the Account Center.
The Developer’s Perspective
It wasn’t only the interface that became leaner through the use of a single typeface family; Media Temple’s Senior UX Engineer Ara Abcarians saw a few other advantages too: “Originally we were going to use two typefaces that were only available from two different services. But we didn’t want to depend on two external services to deal with loading our fonts. Then we came to Brandon Text on MyFonts, and it ended up being a major plus because we didn’t have to use multiple services anymore and we were able to serve up the font files ourself.
“It was also nice to not have to deal with recurring payments, either!”
Designing for designers
Media Temple’s customer base is very design literate – they’re either designers themselves, agency teams or design conscious bloggers. For Jon, those qualities in their audience were very much a double-edged sword: “It’s great that we can use a typeface like Brandon Text and know our audience will appreciate it. It feels like us. It would feel disingenuous on the site of one of those other sites that obsess over their hardware offer.
“On the other hand, we have the most critical audience. When these people give you feedback, it’s so specific. There is a big expectation for what we do. We don’t want to be company that just hosts designers, we want to be a part of the community and be looked to by the community.”
The huge number of accolades that the new site as received from both customers and the design community since launch is a testament to how naturally the typography fits with Media Temple’s brand and as a component of its product interface.