Before the Floor
Challenge
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. PROJECT TIMEFRAME: 6 WEEKS 02 The 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. 03 Project Goals and 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.
Solution
04 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. 05 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. 06 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. 07 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. 07 Development 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. The Solution 01 Design David Boyle from David Boyle Design Co. created a unique layout which Graphem was mandated to code. While putting emphasis on a fluid mobile-first design, Graphem simplified the navigation and created an interconnected, intuitive content flow that heavily focuses on the mobile-first design. Functionally it is both intuitive and adaptive. 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.
Want fresh marketing stories in your inbox?
Get the weekly email that makes you a marketing genius.
Stay informed and inspired, for free.