Welcome to Frost
With its clean, minimal design and powerful feature set, Frost enables agencies to build stylish and sophisticated WordPress websites.
RAPID PROTOTYPING TO ENABLE SALES EFFORTS
Show. Don’t Tell.
For over a year, I led the design side of an internal strategic initiative known as Sales Engineering, also known as, The Demo Squad.
Objective
Engage with various Partners throughout the firm and help bring “art of the possible” ideas to life.
Main Goal
Replace lengthy, confusing PowerPoints with actual, fully coded prototypes that can be demoed live in-front of a major client.
Auxiliary Goal
Create faux-branded versions to be used at industry conferences create self-running videos that can be shared with other clients.
Tell me a story
Kickoff Workshop
All engagements start off with an accelerated workshop that
included our small team of 5, SMEs, and Partners throughout the firm.
Here was a typical agenda:
- Intros
- Icebreaker
- Defining the problem
- Activities
- Crazy 8’s
- Share and Vote
- Feature / Idea Storm
- Decision Matrix
- Solution Storyboarding
Story Creation
After the workshop, we would work collaboratively on a script.
This script will be used to define what screens we need, helps get stakeholder sign off, and also can be used for the video voiceover.
We would try to follow a set formula of:
Setup
Set the scene and introduce the character(s)
Confrontation or “Rising action”
Present a problem and build up the tension
Resolution
Resolve the problem
We also tried to follow Pixar’s flow guidelines of:
Once upon a time there was ___.
Every day, ___.
One day ___.
Because of that, ___.
Because of that, ___.
Until finally ___.
“Telling stories is key to getting clients interested”
Healthcare Partner
Method to the madness
Wireframes
Once the script is set, I figure out what key screens needs to be created to compliment the story.
I do all my wireframes in Sketch and make them clickable in Invision.
UI Design
This is where the idea comes to life.
Using Sketch and other apps from the Adobe Creative Cloud Suite, I designed hi-fidelity mockups, utilizing design patterns for consistency and scalability.
Trust the process
Prototyping
All of the key screens are created and arranged and made interactive (static images w/ hotspots) in Invision.
The Invision prototype is then shared with stakeholders, comments gathered, and further refined.
We sometimes stop here and actually screen record for a video.
If we need to do this live, then we move into the development phase.
Development
Working with backend developers, I would create detailed redline specs and also handle some of the front-end development as needed.
I have a lot of experience coding in:
- HTML
- CSS
- PHP
- JS (Angular)
Validation
Once coded, as part of our QA process, we put it in the hands of others to test and to get their initial feedback.
Live demo
Whenever possible, we would aim to do a live demo in-front of a client. Nothing excites stakeholders like a live demonstration of an idea that was just conceived 2-3 weeks prior.
Our demos were also featured at major conferences like:
- Google Next ’19
- Grace Hopper
- Google Next ‘ 18
- Google Next ’18 UK
“Our client was blown away when they saw a working version of their idea in under 2 weeks”
Healthcare CTO, New York
Filming & Editing
Once our demos were complete, we would take it even further.
In order to leverage the work, I would remove all proprietary information, logos, etc. and create a generic version of it.
We would then film, record, create a voiceover, and edit a video version of it.
These videos were then posted internally for sharing.
Take a look below at a few recent videos I created.
Watch the results
What I learned
- Stories help stakeholders understand the problem and solution quickly
- You can make things seem very real with static mocks and Invision alone
- APIs are your friend
- Working fast is sometimes the best way
- Acting (I’m in many of our videos) is really hard
22
Demos created
2 weeks
Avg. time start to finish
$3.5M
Est. attributed sales