This article was published by InVision Blog and curated by Closer Spot. Be sure to check out other Closer Spot news and advice to help you win more business.
Behind its adaptive layout engine and advanced animations, InVision Studio has a story. Like all products, the world’s most powerful screen design tool went through several phases of creative development—but Studio was guided by a narrative that came to influence every pixel.
“We wanted to do something unexpected, something even our audience would find surprising in a good way,” said designer Leigh Taylor, one of the creative forces behind Studio’s inception and delivery.
But creating this surprising experience, along with a cohesive product launch, meant the Studio team had to weave their narrative into much more than the final product.
When it comes to solid product launches, the landing page is crucial. It’s the center of the campaign, and it’s often the North Star for all other components of a launch. So to understand how to design an exceptional product launch, you have to step back and understand what drove the product itself.
Start with the right storyIn the case of Studio, the process started with a discovery session. Its purpose was understanding the brand’s core values, vision, personas, and personalities, according to senior brand designer Jared Granger. “These assets helped set the tone visually and audibly for not only the design team but for content as well. Collaborative research before design began was key for our team to set a successful outcome,” he said.
“Collaborative research before the design began was key for our team to set a successful outcome.”
Hint: Leigh Taylor starts design projects like this by running a personality profile in the form of a Q&A. This helps personify the project.
This discovery process turned out to be crucial. Through each iteration, the team saw a standout idea emerge, and it’s encapsulated by a single phrase: design the future.
With this in mind, Taylor, Granger, creative director Aaron Stump, and other members of the Studio team pushed forward with a guiding star.
Rounding out the story meant looping in other people to carry the vision into all aspects of the launch. Not only is cross-functional collaboration key to getting every element of the launch in order, it’s also a helpful outlet to add more ideas to the creative fire.
“We wanted to get our audience excited about possibilities, not just the ‘tools’”
According to Stump, tones of realism peppered throughout were paramount to the integrity of the design (presentation and narrative). “A lot of focus—whether in video, graphical execution, lighting, shadows and interactions—was made to subliminally emphasize the qualities being communicated. We wanted to get our audience excited about possibilities, not just the ‘tools.’”
From A-team to go-timeThe second phase of bringing the Studio launch to fruition was selecting visual elements that supported the story. To make sure design elements fit the intention, the team continued to refer to the narrative.
Then, according to the creative leads, moving from story to screen happened naturally through a “focused cycle of rapid conceptualization-share-feedback-improve/iterate.” This teased out the visual elements that now represent the story—bold and minimal designs with an InVision-pink pixel represented throughout the landing page.
Next, the team created a full-height design to ensure narrative, content, and design moved forward on the same page. At regular progression points in the design/development flow, a core driver to success was keeping tight feedback cycles.
But things aren’t always a homerun on the first try. Even if you try a similar strategy of starting with a strong story, looping in stakeholders, and moving forward with a shared vision, there will be aspects of the campaign—and the larger product—that still miss the mark.
For example, one early Studio concept didn’t create the right allure of light and shadows needed. Since “revealing from the shadows” was an underlying design theme, some directions didn’t translate on the landing page and an accurate representation of the narrative.
Maintaining a minimalist feel was needed to achieve those surprising, delightful moments Taylor mentioned.
Designing your launch for lots of peopleStudio was announced to a wide audience. So it was important for the information on the page to be understandable and easy to digest—which is true of all great product launches.
“While copy and content on the site seem more traditional, we took a different approach to the showcasing the product. We iterated on the idea of seamless storytelling through a cinema-based art direction of the UI. The scrolling experience of the site provided a way to keep the UI of Studio in the spotlight while supporting the copy,” said Granger.
To do this for your own product, balance your goals and core story components with a number before tying them to concrete elements. For example, the Studio team used an 80/20 split of familiar/unexpected, according to the narrative. Those parameters were:
- Creative yet Sophisticated
- Refined yet Revolutionary
- Familiar yet Unexpected
- Essential yet Premium
- Bold yet Understated
- Elegant yet Powerful
- Modern yet Mature
We needed a brand that visually communicated our persona while still being approachable, inclusive, and relatable. Bonus points: not only did the motion of elements on the site relate to the brand, but it also hinted at one of Studio’s core features—motion.” –Jared Granger, Senior Brand Designer
Carrying landing page look and feel into other aspects of a launchIf you haven’t guessed as much, creating a cohesive product launch campaign doesn’t stop at the main URL. Email sequences, for example, are a great way to extend your narrative and design into the audience’s life.
In the case of Studio, the emphasis was carrying signature touches into the email environment without disrupting the minimalistic composition of the brand. These included things like:
- Scattered pink pixels
- Consistent logo design
- Play buttons that matched the landing page
- Outlines around dates
- Uniform details in type and spacing
But don’t pull together a 2-minute clip as an afterthought to push your campaign forward. According to the team, video was part of the strategy from the earliest stages. “Right from the early branding exercises—we knew it would be a cornerstone of the success of the campaign,” they said.
And because the narrative, vision, storyboards, and mockups had all been documented, Orsow understood exactly what the video needed—further contributing to the uniformity of the entire campaign.
“I was brought in as an observer and occasional participant in the branding process. Being in on those early reviews really helped me get a handle of the nuances, ideas, and themes that continued to evolve—which let my work on the video side of things feel very connected to everything else,” he said.
Advice to design for a successful product launchBeyond adopting some of the approaches taken to create Studio, the team has one other piece of advice: iterate toward reality.
Strategizing and planning possibilities is abstract, but once you move forward with your team and a unified vision, you need to push for concrete realities. “Documents move toward design, designs move to flows, and flows turn into prototypes that create incremental touchpoints and validation. Each one has it’s own criteria and benchmarks for identifying and getting to ‘reality,’” said Stump.