Case Study

Before The Floor

Services

Timeframe

Overview

Before the Floor is a project with a mission to promote the safe consumption of alcoholic beverages to avoid unintended accidents.

After searching for the right partner, Before the Floor reached out to Graphem Solutions to design and develop their new web application that would best promote mobile-first design solutions.

After analyzing the client requirements, Graphem suggested putting emphasis on a mobile-oriented design that emphasizes a familiar user experience and facilitates functions commonly used in social media.

Project Background

Graphem is to create a new website for Before the Floor, incorporating graphic and contextual elements to emphasize the mobile-first approach and video stories.

Challenge

Approaching an application from a primarily mobile perspective regardless of a screen size incorporates various elements including multi-browser compatibility and functional support for social media like features.

Project Goals & Objectives

Graphem Solutions wanted to make sure that Before The Floor was a functional, well-optimized and configured application that would deliver speedy performance with an extremely well configured UI.

Process

01/

Project Kick-Off

As part of Graphem’s agile approach, the project started with a kick-off meeting that provided a better understanding of stakeholders’ needs and established a project workflow process that was followed throughout the project.

02/

Design Strategy Prototyping & SiteMap

Our design and development team collaborated on creating and choosing a design direction as well as mapping out the design to content. This allowed the team to have an overall design strategy to present the client with layout options for key application views ahead of the development stage of the project.

03/

Content Layering and Asset Acquisition

Graphem worked closely with Before The Floor to better understand their business-related content so as to align the graphic and media assets with proper copy elements to create a logical content flow.

04/

Development

Graphem and Before The Floor held weekly project meetings to ensure alignment of requirements and analyze the deliverables for each sprint in the development stage. Each sprint completion was analyzed, and adjustments were made to better accommodate stakeholders’ needs.

05/

Deployment

Upon completing the website development, the project went through the following tests in a controlled environment before the launch:

Functionality testing
Usability testing
Compatibility testing
Interface testing
Performance testing
Security testing
Deployment

As part of the speed optimization strategy, the website was hosted by Graphem on an upgraded server. The website domain was updated to display the new site, and a documentation guide was created for the Before The Floor Team.

Solutions

01/

Design

02/

Video Story

One of the first elements available to the user is a video story that focuses on the timeline effect. The effect was created to imitate social media- like story functions with many of the effects being incorporated into the web application.

03/

Interactive UI

While considering the UI, the challenge was to create a fluid and intuitive interface that would facilitate the transition between pages and the user’s story function, while maintaining the simplicity of the mobile-first approach. A custom UI was developed to create a fluid transition between the elements of the application and direct the user through each step of the flow.

Free Tools

Learn How To Make The Best Of Your Website