Elevator Pitch Generator
For startups to get a clearer understanding of who they are
The Elevator Pitch Generator was developed and designed by Samuel Custer for startups to get a clearer understanding of who they are.
Startups needed a quick way to propose an elevator pitch for their idea, product or service. The elevator pitch statement should be quick and concise for potential users and stakeholders to understand the startup within seconds.
After doing a quick Google search, I was able to discover that PitchGrub offers a similar service. But their solution offers a much longer elevator pitch as an end-result. My Elevator Pitch Generator is built on the findings of Lean UX by Jeff Gothelf.
My first step in this project was to define the major steps of completion and how I would measure success of the project.
- Draft wireframes in Balsamiq Mockups
- Design visual mockups in Adobe Illustrator
- Create skeleton markup in HTML5
- Add functionality with AngularJS and have a working prototype
- Design visually with CSS3, Web Fonts, and JQuery animations
- Optimize metadata for SEO
- Allow for quick and easy user-feedback and improve the product
I quickly drafted two wireframe mockups using Balsamiq Mockups. These were useful for fleshing out the design and expected technical requirements.
Elevator Pitch Generator Wireframe 1
Elevator Pitch Generator Wireframe 2
Create Visual Mockups
I chose to make the visual mockups in Adobe Illustrator. This visual mockups make writing the CSS a lot more hassle free as I give myself a template to work off of.
Elevator Pitch Generator High Fidelity Mockup 1
Elevator Pitch Generator High Fidelity Mockup 2
Create Skeleton Markup in HTML5
Using Adobe Dreamweaver CC I drafted the minimal markup needed without any visual design to prepare for the functional prototype.
Elevator Pitch Generator HTML
Build a Working Prototype with AngularJS
I decided to use AngularJS as my MVC framework because of its quickness. I wanted to make sure that there was no lag and that output was happening in real time without slowing down the client-side browser. It also allowed for quick and easy real-time input validation using filters.
Elevator Pitch Generator Angular View
Elevator Pitch Generator Angular Controller 1
Elevator Pitch Generator Angular Controller 2
Elevator Pitch Generator Angular Prototype
Design Visually with CSS3, Web Fonts, and JQuery Animations
Most of the CSS3 was quick to produce since I used the visual mockup as a reference. I decided to use Gotham Ultra Condensed for the primary type-face and the JQuery animations were very simple. I also used JQuery to control when the buttons could be clicked and the click the button automatically if the user pressed “enter” after filling out the last input field.
Elevator Pitch Generator Final Screen 1
Elevator Pitch Generator Final Screen 2
Optimize Metadata for SEO
<meta name=”description” content=”The Elevator Pitch Generator was developed and designed by Samuel Custer for startups to get a clearer understanding of who they are.”>
<meta name=”keywords” content=”Elevator Pitch Generator”>
<meta name=”author” content=”Samuel Custer”>
<title>SamCus Elevator Pitch Generator</title>
Allow for Quick and Easy Valuable Feedback
I used SurveyMonkey to create a quick survey to get quick and valuable feedback and insights from my users. I designed a very noticeable “feedback” button on the webpage that is visible at all times to the user.
See it in Action
If you see the value in the elevator pitch generator and would like to generate a pitch for your business you can check out the elevator pitch generator here! Feel free to share it around!