Since opening its first wind tunnel in 1998, iFLY has made the dream of flight a reality for more than 10 million people in over 70 locations worldwide. With aspirations of making body flight the next great extreme sport, iFLY needed to redefine how people thought about the flight experience to not only welcome first time flyers, but inspire the next generation athlete. Our team at Accomplice was tasked with re-designing iFLY's digital experience.
THE CHALLENGE
Widen the aperture
Historically, iFLY has been marketed as an entertainment company, similar to Top Golf. A thrilling activity, yes, but if you do it once, there's not much of a draw to do it again. In fact, more than 90% of iFLY's sales came from 'First Time Flyers'. But beyond the birthday parties and social draw, there's an actual sport called Bodyflight — a sport complete with different flying disciplines, competitions, and professional athletes. We needed to bridge the visual gap of entertainment and sport to inspire more return customers for iFLY.
OUR GOALS
A new perspective on flying
We set off on a mission to completely re-design the way iFLY's customers — past, present, and future — think about the flight experience and, to not only welcome first time flyers, but inspire the next generation athlete. With research and business goals in mind, we identified specific design streams to focus on.
01. Storytelling
02. Information Architecture
03. UX Design
04. UI / Visual Design
STORYTELLING
I fly, you fly, we all fly.
Being a multi-disciplinary team (content, UX, and visual design) we needed personas to fall back on as each stream progressed. Ultimately, we developed four distinct archetypes to hold our decisions accountable to. For me, this meant that I was able to ensure each proposed section within the website was designed for a specific user.
INFORMATION ARCHITECTURE
Evaluate and enhance
We then started documenting their existing website in Whimsical. This allowed us to fully understand the industry and it's neccesary content, refine it, and then create organization for the new sections of information to be added. This was critical since each section would ultimately speak to different users and have different take-away goals.
OLD WEBSITE SITE MAP
iFLY had issues with accessibility and finable issues with redundancy and their SEO.
NEW WEBSITE SITE / CONTENT MAP
Each proposed section was crafted around a particular archetype, so it became a hybrid site and content map.
UX DESIGN
Simplify and templatize
Because of the tight timeframe on the project, and the fact that iFLY would be handling the development, we decided on two key factors as we began wireframes:
01. Wireframes would be mid–high fidelity so iFLY could use to begin development.
02. With the increase in pages (IA) and development out of our control, templatize as many screens as possible.
HOW TO FLY
How to Fly is one of the new sections being introduced to target more of the sport-centric users (The Frequent Flyers).
Here, users can discover the different levels of flying skills, view all the different individual skills, and dive into the particular steps to achieve a specific skill.
A filter system was created based off a flyer type, skills path, and skill level. This would allow users to see all the possibilities of bodyflight.
SKILLS SYSTEM
A step-by-step breakdown of a skill, how to perform it, and practice it will be featured on every skill detail.
DRILL INSTRUCTIONS
GROUPS & EVENTS
iFLY prioritized creating a section to call attention to their different offerings for group flyers, and events. We created multiple templates that would accommodate for different types of content as they finished fleshing out their messaging.
A landing page for all Groups & Events puts all of iFLY's offerings on one page for users to easily see and learn about them.
G&E SHOWCASE
Because iFLY has a little steeper pricing, it was decided to display packages in a gannt chart format to show users the true value between each one.
PRICING CHART
PROGRAMS > STEM
Previously, the feature for STEM programming was a paragraph and a page full of resource links. We expanded this to give STEM its own page, and subpages to focus more on highlighting the distinctive curriculum for each grade level.
.png)
iFLY's STEM program curriculum varies depending on grade level, so laying out each option clearly, while indicating they can learn more on a new page.
PROGRAM LEVEL
The STEM Detail page allows for different ways to show what students would actually do on field trip: video, image + text, image gallery, and text links.
STORYTELLING
UI & VISUAL DESIGN
Collaborate to elevate
Halfway through the engagement, iFLY decided to bring in another agency to focus on the consumer-facing marketing/advertising front. However, this proved to be a slight obstacle because responsibilities on developing the new visual language overlapped, and it seemed that the agency didn't have any knowledge or experience in designing for digital experience. This meant we has to do our best to educate both client and partner agency in best practices for web design, while working within concepts that were already approved.
SUGGESTED TYPE, COLOR, AND MOODBOARD
This was the initial proposal from the team prior to collaborating with the other agency.
FINALIZED DESIGN SYSTEM
Working with a typeface that iFLY had attached to, we helped create an accessibility mindful type system and color palette to be used across their all their digital touchpoints.
PROJECT
STUDIO:
Accomplice
DATE:
September 2018 – April 2019
TEAM
PROJECT MANAGER:
Denise Burke
LEAD DESIGNER:
Steph Ciccone
DESIGNER:
Britt Savant
CONTENT STRATEGIST:
Caroline Lee