How do I: take a concept and launch a (web) product

Recently, I was asked to describe the process of taking a concept and making a web product out of it. Product development is a tricky topic. There are traditional, agile, hybrid and non-nonsensical approaches to it which can only be defined as right, or wrong, by the organization using them and the ultimate success they provide. No one answer is universally correct and there in-lies the problem.

From my own experience, dating back to the late 90s working at a marketing agency and helping develop several versions of the web product, I can tell you many stories on development and iteration management of web and mobile products gone wrong… as well as a few happy success stories. Some might be shocking but I doubt most are surprising as anyone who’s done any kind of management has probably seen a parallel in what they do to the experiences.

In this case, I chose to focus on a web product that rolled out in about six weeks, from initial conception to first-iteration testing post launch. It was done on outstanding budget constraints with a small, but dedicated team. There was no time for formal documentation and surprisingly little upper-management direction involved, so it was agile without adhering to any specific methodology.

I broke the steps up into logical sections of related elements but this is not a “timeline” of events or chronological steps as many of them happen in parallel to one another.

Conceptualization

  • Initial idea presented in a company meeting by the owner / founder
  • I transcribed the meeting notes to a white board, documenting:

1. the mission statement
2. the expected  target audience
3. the key actions to be taken
4. the expected responses to those actions (goals)

This became the “checklist” for which everything else was cross-references to determine its relevance

  • Target audience was refined in a meeting on a whiteboard by the Marketing Lead, COO and I into three user profiles that sought to explain:

1. Who they were demographically (expected age, sex, education, income
2. What they were like  (expected favorite, website,  music, movie, book, app, cuisine was, the amount of social engagement and technology usage, etc)
3. What was their motivation for being on the site? (ie: for research, because a friend told them to, etc?
4. What the real value of being there meant to them? (ie: to feel good about themselves for learning, sharing or doing something?)

These were used by Marketing to craft messaging, Designer to craft look and feel, Dev Team to refine features and for me as guiding principles for the Product.

  • Broad KPIs (key performance indicators) were defined by the COO and I in a meeting on a whiteboard, such as:

1. Defining most important actions and their click patterns and usage funnels
2. Determine passive engagement metrics (ie: unique users, pages per visit, time on site per visit, etc.)
3. Determine natural acquisition expectations (ie: key words, referring sites, etc.)
4. Understand other business metrics (ie: shares, mailing list signups, etc.)

These were used by Marketing to drive messaging, Design to drive the look and feel, Dev Team to define elements of the tracking and reporting in the DB and by me to focus the Product’s definition.

  • Basic Prototyping was done with the Lead Developer using white board and paper modeling, giving us:

1. An overview of the most pages needed
2. Basic wireframes for those pages
3. A site map / flow chart of how the pages fit together
4. An early model for testing concepts against and receive initial sign off to move forwar

  • I created some basic bullet point specs on a white board that presented the over-arching needs of each page on the site, such as:

1. CMS managed for content elements such as images, copy and SEO
2. with the ability to A/B test
3. done in HTML5/CSS3 standard on the 960gi with web and mobile web optimization
4. include only single displayed marketing message targeted to the (primary) user
5. and single defined call-to-action that drives to a KPI
6. adhering to the existing branding style guide (design and copy);
7. to Google Webmaster best practices; and
8. the legal requirements, etc.

Mos of this became the foundation for acceptance & QC testing later and a reference with examples added over time for the production process itself for everyone involved (Designer, Programmers, Marketing, etc.)

  • Competitive set is framed with the marketing team and I along with input from the Lead Developer and Designer so as to encompass several points of view

1. mission
2. look & feel
3. functionality / use of technology

Pre-Production

  • The pages themselves were then given a release order by myself, determined by relevance to

1. The main mission statement
2. The use cases/  KPIs

  • Working with the Lead Developer, the site itself was broken up into components by us, such as

DB structure, FE themeing, select-and-share tool + related API integration, slide show tool and related CMS integration, Twitter feed API integration, WP Blog feed integration, Analytics tracking, A/B testing integration, etc.

These were then fed into a project management tool for team review.

  • Developers researched and estimated the Topics.  We worked together to add detail in terms of technical specification or specific use case requirements or small feature sets.
  • This created individual tasks, for example

Simple front page image display (no slide show) managed in CMS for initial launch, Front page slide show simple display & Front page slide show with CMS managed customization for next iterations, Slide show tracking tool integrated to site analytics, etc.

  • The features were prioritized by me and assigned by the Lead Programmers by considering

1.Relevance
2. time estimation
3. dependencies
4. existing knowledge base

  • Early stage development occurred with specification notes being made in the PM tool
  • Look and feel ideas are developed from the wireframes I created and the paper prototype from earlier, these concepts are vetted by Marketing and I

1. Considered against brand and target audience guidelines
2.

  •   The marketing messages are created and put through the approval process which I oversaw and included:

1. spell and grammar checked
2. considered against the brand and target audience guidelines
3. sent through user testing
4. reviewed by legal
5. reviewed by the founder
6. revised as necessary

  • The design concept and marketing messages were integrated into final design proposals done in page priority order and put through the approval process which I oversaw and included:

1. reviewed by the FE programmer for development acceptance
2. considered against brand and target audience guidelines
3. sent through user testing
4. reviewed by legal
5. reviewed by the founder
6. revised as necessary

  • the initial A/B test concepts are drafted with the assistance of Marketing
  • The A/B content begins to be created by the design team and goes through the same acceptance / approval process as above

Production

  • The common page elements are completed and put through early QC testing which I oversaw and included:

1. OS / Browser compatibility
2. Code stability
3. Functionality

The Dev team worked together with me to compile the testing, where each developer reviewed components of another developer’s work.  Bugs and non-compliance issues are tagged in the PM tool and reworked.

  • The individual pages are completed in priority order with their v.1.0 features  and QC tested which I oversaw and included:

1. OS / Browser compatibility
2. Code stability
3. Functionality
4. over-arching needs list requirements
5. spell and grammar checked
6. considered against the brand and target audience guidelines
7. sent through user testing
8. reviewed by legal
9. reviewed by the founder
10. revised as necessary

The process was spit into core competencies for QC review.  The Dev team worked together with me to compile their testing, where each developer reviewed components of another developer’s work.  Marketing and I worked together on the remaining elements.  Bugs and non-compliance issues are tagged in the PM tool and reworked.

  • While testing is occurring on the initial pages the secondary pages (v.1.1) undergo the same production process and similarly with the secondary feature sets (v.1.2) and tertiary pages (v.1.3) for the main pages, etc.
  • The pages are placed  live in “safe beta” mode to limit their public access (but not in a traditional private / invite only beta mode) – During this time the benchmarks for the site are established under my supervision

1. Pages are stress tested by Dev Team
2. Pages are user tested (which includes reviewing beta analytics and user feedback survey)

Small revisions are made, as necessary, with bug and QC reporting done through the PM tool.  Any new features or larger revisions are slated for a future iteration’s development.

 

Post-Production

  • The full site is pushed into a public live beta mode and the the first acquisition campaigns occur
  • those are benchmarked as the full site post-launch.
  • In the future, then A/B testing is initiated, results are analyzed (against KPIs), user feedbacks and other stakeholders (foundation donors, partners, etc.) are considered, changes are proposed jointly between marketing & product teams,etc.
Advertisements

About thedoormouse

I am I. That’s all that i am. my little mousehole in cyberspace of fiction, recipes, sacrasm, op-ed on music, sports, and other notations both grand and tiny: https://thedmouse.wordpress.com/about-thedmouse/
This entry was posted in business commentary, Opinion, Product Management. Bookmark the permalink.

One Response to How do I: take a concept and launch a (web) product

  1. Illuminated says:

    It’s arduous to seek out knowledgeable people on this matter, but you sound like you already know what you’re talking about! Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s