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.
Context and Challenge
01
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.
The Process and Insight
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
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.
