Behind the Scenes of Website Purpose, Aesthetics, and OVP [VIDEO]
Updated: Mar 31, 2021
This was written for CAS 831: Digital Content, Creations, Curation, & Promotion in the Michigan State University Strategic Communications MA program.
CTE #5 Ground Floor Coffee Carts Website Analysis https://bit.ly/groundfloorcc
Located exclusively in Class A office building through Madison, Ground Floor Coffee Carts (GFCC) operates fixed, lobby-based coffee carts. Upscale, modern, and convenient, GFCC serves a 20- to 60-year-old, tech savvy, professional, college-educated demographic where they spend the majority of their time—in the office. Note: non-COVID reality
One does not have to endure muggy Wisconsin summers or frigid midwestern winters to grab gourmet while at work. You won’t lose your parking lot. If you want exercise, take the stairs do the lobby.
01 | Site Purpose
Chaffey and Smith (2017) state that customer-focused sites must focus on needs: how does the site fulfill basic customer wants. Primarily, the purpose of the Ground Floor Coffee Carts site is to act as a platform for customers to order coffee, tea, and snacks.
Additionally, the purpose includes increasing brand awareness, offering product descriptions, demonstrating industry expertise and thought leadership, and creating networking ecosystems within each office building.
Customers order during the workday—on the way into work, between meetings, over lunch, in the afternoon—so the site must be simple but upscale, convenient but curated. The purchase decision-making process is congruent with fast, logical consumers (Chaffey & Smith, 2017).
02 | Online Value Proposition
Operating coffee kiosks within Class A office buildings create a hyper-segmented model for GFCC. The online value proposition is straight-forward: one can order from the menu and pick up at a preorder counter. In a real-life application, customers could choose desk delivery, where a staffer would deliver coffee right to your desk.
Finally, another OVP would be the “Desk set” purchasing option where customers can choose the online-incentivized BOGO offer for themselves and a coworker.
03 | Color Scheme
The color scheme was chosen to reflect the mixture of coffee, milk, and espresso crema intrinsic to the coffeeshop world. The color scheme is intended to connote a warm, relaxing, and decadent experience
Standard black is the default text color. Graphic staff are prohibited from using color sampling. RGB blends are the preferred “recipe” because GFCC is a mostly online brand, and RGB colors are appropriate for screens (Wensloff, 2016).
04 | Font Type
The primary headline, subhead, bullets, and drop-cap font is “Impact.” This font is used for the company name in the logo. Impact is modern, upscale, dramatic, and web-safe. It’s also known as the “meme” font and dates back to 1965 (Bride & Berrett, 2014; Edwards, 2015).
I chose sans serif headlines because they provide contrast and are easier to read in smaller blocks (Beal, n.d.).
The body copy is the sans-serif Trebuchet MS regular (paragraphs, email copy, documents, bullet list items) and bold (reverse copy, subheads, spot color text, copy over graphics). Trebuchet is modern, textured, easy-to-read, web-safe, and screen-friendly. Moreover, it breaks from the over-used Times New Roman, Arial, and Helvetica conventions—achieving on-brand differentiation through font.
Named after a “medieval siege engine,” Trebuchet creator Vincent Connare said he liked the name because a good descriptor of a font that launches words across the internet (as cited in Typedia, n.d.).
This brand guide prohibits horizontal scale to plus or minus five, vertical scaling, crazy kerning adjustment, and please God no fill and stroke, small caps, or italics!
05 | Home Page Design
This home page is designed to be simple, intuitive, and self-explanatory. This isn’t a place for a deep dive into cafe society dating back to the whatever-hundreds. This is a one-stop-shop for coffee, and the homepage reflects this objective. Note: checked in different browsers.
There is visual appeal (color scheme and fonts), a dapper office gent, a picture of the environment, and the navigation buttons are less than seven (six) which Chaffey and Smith (2017) state is ideal.
There is a CTA at the bottom—prompting customer to sign up for the coffee club. This way, we can capture emails for future marketing promotions and strengthen our CRM database for those lovely marketing models we’ve discussed.
· Chat feature
· Menu is the first link—get right to business
· The logo links back to the homepage
· Contact details are listed.
· Find a location
· Mobile order button
· Optimized for mobile!
· Social media buttons are featured (which is an attribute that the Google spider consider when crawling sites).
06 | Other Pages & Site Structure
o Upscale product positioning
o Professional art (free from Vecteezy)
o Transparent prices
o More OVP
o Mission, vision, values
o Information & hours
o Industry expertise & thought leadership
o Opportunity to foster ecosystem within the building
§ “Building relationship” positioning
o Promote events and promotions
o Normally have a regular e-commerce site
o Email, mobile, and Facebook messenger
o That is my cell. Feel free to drop me a mock order
o OVP for student—your fake order is 100% FREE!
Beal, V. (n.d.). San serif. Webopedia. https://www.webopedia.com/TERM/S/sans_serif.html
Brideau, K. & Berret, Charles. (2014). A brief introduction to impact: ‘The meme font.’ Journal of Visual Culture. https://journals.sagepub.com/doi/pdf/10.1177/1470412914544515
Chaffey D., & Smith, P.R. (2017). Digital Marketing Excellence: Planning, Optimizing, and Integrating Online Marketing. (5th ed.). Routledge.
Edwards, P. (2015, July 26). The reason every meme uses that one font. Vox. https://www.vox.com/2015/7/26/9036993/meme-font-impact
Trebuchet MS. (n.d.). Typedia. http://typedia.com/explore/typeface/trebuchet-ms/
Wensloff, V.L. (2016, November 15). Photoshop Part 1—Intro and Layers. Retrieved from the Michigan State University D2L site. #OnlineValueProposition #OVP #WebsiteDesign #WebsiteStrategy #DigitalAudience #GraphicDesign #Typography