Locally Sourced | The Oak House

Ideation

I worked as a barista for a few years, and quickly fell in love with the industry that surrounds my favorite beverage. I found that many of my customers weren’t aware of all the craft that goes into a specialty coffee beverage, which inspired me to create a project that educates the coffee consumer and helps a local coffee shop market their business.

The target audience for Locally Sourced are coffee shop patrons that are in line waiting for their order or sitting and enjoying their beverage in the café. These customers are likely using their mobile phones in this popular public setting, so I created this site with a mobile-first design approach.

Scan the code with your mobile device's camera!

Because this site is designed to be viewed on a mobile device in a public setting, I created a design with a QR Code so the user can visit the site by simply scanning the code found on signage in the café, or placed on a sticker with their takeaway beverage. I chose to incorporate the QR Code into my project to increase the interactivity of the product and ensure that the site was easy to access from the user’s perspective. 

Additionally, studies have shown that users who notice a QR code were more likely to recall the brand and engage with its content (Fortin & Surovaya, 2018). The interactive content on the site includes engaging and informing content that touches on the coffee production process and all the parties involved in making their specific drink. As a result, this interactive content simultaneously informs the consumer about the product and increases the brand awareness of the local companies featured. Research shows how effective interactive advertising can have a positive impact on purchase intention (Tan, Kwek, & Li, 2013), making Locally Sourced a viable method of marketing for a small coffee shop such as The Oak House.

Technology Used

Adobe’s Creative Suite provided me the necessary tools to create illustrations and prototypes, edit audio and video, and create a QR code. 

Ceros, a content creation platform, was used to integrate all the illustrations and videos into a cohesive and engaging product complete with interactions and scrolling animations. Below you can see the view of the Ceros Studio of Locally Sourced’s mobile layout.

Production Process - Sprint Model

I utilized the Sprint Model to effectively allocate time and resources into manageable two-week increments. By breaking up my project into bite-sized chunks, I was able to manage my time and complete the project and all of its deliverables in a timely manner. Expand each Sprint to see my goals and what I accomplished in each time frame.

Sprint 1 – Brainstorm and Plan

  • Create interview questionnaires for Phil Smith that gain his perspective on the importance of local businesses and why he chose to work with Joe Van Gogh and Homeland Creamery.
  • Generate mood board and start to narrow in on a color scheme.
  • Find contacts for Homeland Creamery and Joe Van Gogh.
  • Complete first draft of the logo and sketches of illustrations.
  •  

Sprint 2 – Generate Content and Prototype

  • Illustrated content to be animated later.
  • Paper prototype made.
  • Complete interview with Phil Smith at The Oak House.
  • Used Adobe XD to create the first prototype.
  • Sprint 3 – Film B-Roll and Implement Prototype in Ceros.
  •  
    • I wanted to start working in Ceros early to ensure I was comfortable with the interface.
    • B-roll was filmed at The Oak House before the state-wide lockdown.
    • Edit together The Oak House Video
    • Color correct video and edit audio for the interview with Phil Smith.
    • Transfer Adobe XD prototype to Ceros to animate and organize content based on feedback from peers and client specifications.
  • Sprint 4 – Begin Testing and Revisions
  •  
    • At this point I had all my illustrations in place in ceros
    • First iteration of Make-your-own latte feature made
    • The Oak house video worked well but proved to be too long
    • Oak house video was broken up into 3 shorter videos and spread out across the project.
  • Sprint 5 – Final Adjustments and Additions
  •  
    • Improved usability of the interface:
      • -Subtitles on the videos
      • -Click anywhere to exit the pop-up windows
      • -Change the timing of the make-your-own latte animations
      • -Optimized site for tablet and desktop

Sketches

Prototyping

This is the prototype I created in Adobe XD to show Phil Smith, the owner of The Oak House. This allowed me to give my client an idea of what the final product may look and feel like. I received feedback from him regarding the content and flow of the interface, and took his perspective into account when generating the project in Ceros.

I created this paper based prototype early on in my process so I could visualize my sketches and ideas in a tangible and interactive format.

Finished product - Ceros

The “Preview” feature in Ceros’ interface allowed myself and others interact with what would look like the finished product on a mobile phone. It was here where I could pay attention to users would scroll through content so I could time the scrolling animations accordingly. This also gave me valuable feedback on color styles and design choices. Although no formal usability testing was done, I was able to gather sentiment analyses from users who had interacted with the preview. They informed me on their opinions of the interface and if they were likely to use this tool if they were waiting for their drink in a busy café. 

I was also able to share the interface with the contacts I formed with employees at Joe Van Gogh coffee roasters. Although I was not able to interview them at their location, I was able to gather their insight into how this product could benefit them. I ensured that their brand was placed throughout the project so that they may receive more web traffic and brand recognition.

 

Roadblocks & Solutions

The circumstances happening around the timing of this project came with its own roadblocks. The stay-at-home mandates put into place in North Carolina prevented me from capturing much of the content I had originally planned to make. I was unable to work with Homeland Creamery and Joe Van Gogh for these reasons, and they were focused on navigating these troubling times themselves.

Because of this, I had to make do with the content that I had already captured. I was able to spread out the Oak House video to touch on each business that I originally wanted to feature. 

Future implementations

Although the primary audience for this product are the customers of a local coffee shop, this project is also catered to café owners so that they may train their staff and market their business. This project serves as a prototype that can be further developed to become a fully functional digital marketing tool. I included the Google Analytics tracking code to monitor the site’s activity and engagement while The Oak House continues to use the product. These statistics will allow me to continue to manage the content to increase engagement in certain areas of the site and pinpoint where more developments can occur.

Further marketing developments include adding features that can create opportunity for more conversions. For example, users will have a place to sign up for a mailing list, redeem rewards and discounts, create affiliate links, and trace links to the other businesses featured. Analyzing the traffic generated from link building can make this product seem more appealing to coffee shop owners and the other local businesses associated with their shop.

Contributors

I would like to thank the individuals who helped me in the creation of this project, starting with Dr. William Moner, who was my professor in the iMedia Capstone Course. I would also like to thank my classmates and other individuals for providing insightful feedback throughout the different iterations of this project. Additionally, I would like to thank the professional contacts made throughout this process:

-Phil Smith, The Oak House

-Brian Hereghty, Joe Van Gogh

-Kevin Swenk, Joe Van Gogh

View Site
Back to Portfolio

Sources

10 Steps from Seed to Cup. (n.d.). Fhttps://www.ncausa.org/About-Coffee/10-Steps-from-Seed-to-Cup

Baguley, R. & McDonald, C. Appliance Science: The high-pressure physics of espresso coffee—CNET. (2016, April 6). From https://www.cnet.com/news/appliance-science-the-high-pressure-physics-of-espresso-coffee/

Fortin, D. R., & Surovaya, K. (2018). Measuring the effects of visual scan codes in advertising. 16. 10.1504/IJIMA.2018.095379
 

The Science Behind Perfect Steamed Milk. (n.d.). Clive Coffee. From https://clivecoffee.com/blogs/learn/the-science-behind-perfect-steamed-milk 

Tan, W. J., Kwek, C. L., & Li, Z. (2013). The antecedents of effectiveness interactive advertising in the social media. International Business Research, 6(3), p88. https://doi.org/10.5539/ibr.v6n3p88
 

Van Boekel, M. A. J. S. (1998). Effect of heating on Maillard reactions in milk. Food Chemistry, 62(4), 403–414. https://doi.org/10.1016/S0308-8146(98)00075-2

css.php