Product Strategy & Design
From Concept to Cloud
Have you ever wondered how a web-based software product goes from an idea in a notebook to a business reality serving people all over the world? We've been behind the scenes on hundreds of projects like this and have built our business around helping companies bring their web ideas to life.
While the exact process can look different for each project, there are a few key activities that are fundamental to laying a strong foundation.
- Organizational Analysis
- Product Identification
- User Research
- Information Architecture
- Wireframing
- Visual Design
Organizational Analysis
Unless we understand your organization, it's difficult to form a strong partnership. That's why the first part of any Strategy and Planning session we do is dedicated to learning about your business.
Over the course of a project we'll be making thousands of small decisions that impact the end results. We want to make sure each of those small decisions is backed by an understanding of your organization's history, size, structure, and vision for the future.
We also want to know about your competitors and how you compare against them in a variety of categories. While the list below is not exhaustive, it serves as a general overview into the types of things we discuss during this phase:
- Company Overview & History
- Departments, Employees, Revenues, Locations
- Markets, Customers, Products, Services
- Vision, Growth Plan, Future
- Competitors, Strengths, Weaknesses
Product Identification
The next step is to take your project idea and turn it into logical groupings of work referred to as "products." In project management, products are the units of work that can be formally defined, documented, and delivered. Projects usually contain multiple products. The distinction between the two allows for more concentrated focus and reduced risk due to shorter timelines and smaller code bases.
The most common example of this is seen with startup companies looking to build a web application, a marketing website, and a mobile application. Rather than tackle all of those items at once, we divide them into separate products with separate code repositories. This allows us to prevent knowledge silos and get to market quicker because we deliver in smaller increments and shorter intervals. It also helps avoid project debt because value is constantly being delivered rather than delayed.
User Research
Once the products have been identified, it's time to research and understand the end users (target audience). It's so easy to lose sight of the end users and begin chasing something you've dreamt up, but this is a colossal mistake. Paul Graham (of Yahoo and Y Combinator fame) lists "Having No Specific User in Mind" as one of the biggest mistakes that can kill a startup.
To help with this, we develop user personas. Personas are fictional characters created to represent the different user types that might use a site, brand, or product in a similar way. In most cases, personas are synthesized from data collected from interviews with users. They are captured in 1–2 page descriptions that include behavior patterns, goals, skills, attitudes, and the environment, with a few fictional personal details to make the persona a realistic character.
Information Architecture
Information Architecture (IA) is the art and science of organizing, labeling, and navigating within a web-based application. It is an emerging community of practice focused on bringing principles of design and architecture to the digital landscape. We regularly fill and erase over 20 feet of whiteboard space as we organize and arrange links within content, content within components, components within pages, pages within sections, and sections within sites. The end goal is to create the most user-accessible product possible.
Once we've run out of dry-erase marker ink, we begin creating digital versions of our work in the form of user flow diagrams and sitemaps.
Wireframing
Wireframes are a continuation of the information architecture process (prioritizing and organizing information) and a means of capturing software requirements. While wireframes often imply high-level design thinking, we try to avoid focusing too much on the creative aspects of the project at this stage, when so many things are subject to change. It's not uncommon for us to work through 5 to 10 revisions for each page we wireframe to make sure we get it just right. As you can see from the sample wireframe to the left, each page is prepped for 3 views — desktop, tablet, and mobile — and on each one we take special care to ensure information is presented clearly. We use numbered annotations and call-outs to further describe functionality that cannot be easily demonstrated visually.
After careful attention is paid to each page of the application, we find ourselves with an amazing assortment of wireframes that serve as the blueprints of the project. These wireframe blueprints are then distributed to co-workers, peers, and senior management teams for review. What was once just an idea is now a documented specification that's easy for everyone to understand and celebrate.
While the strategy phase represents the largest amount of wireframing, we'll also create them during deeper stages of the project to further refine ideas and requirements.
Visual Design
The software we build is for people: end users who will interact with their browsers and mobile devices to access a set of functionality. The experience they have during their interaction with our software is important to us. We take careful steps to design aesthetically pleasing interfaces that add form to function.
The key things we're concerned with during this phase are color theory, interface elements, navigation elements, page layouts, and iconography. These components all work together to form creative moods and visual themes that make using software easy and enjoyable. We carefully craft a set of reusable templates that can be implemented across a wide variety of page types.
Next Steps
A typical new client engagement begins with a strategy and planning phase that lasts between 4 and 12 weeks, depending on the size of the project. It usually involves travel to Orlando, plenty of shared meals in front of a whiteboard, and lots of follow-up conversations.
(For shorter engagements, please reference our consulting engagements.)
This collaborative process ensures clients are well-equipped to break ground on the project because they have tangible assets in hand and an educational experience to lean on.
- A product roadmap outlining features, functionality, and estimated timelines and budgets.
- Product blueprints in the form of user personas, site maps, flow diagrams, and wireframes.
- A thorough understanding of how the web application development process works.
- A strong partnership and bond with Caxiam personnel, having just spent many hours collaborating, learning, discovering, exploring, iterating, and refining the project requirements together.
