The Elevator Pitch Generator was developed and designed by Samuel Custer for startups to get a clearer understanding of who they are.
The Problem
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.
The Competition
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.
The Method
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
Draft Wireframes
I quickly drafted two wireframe mockups using Balsamiq Mockups. These were useful for fleshing out the design and expected technical requirements.
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.
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.
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.
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.
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.