The Journey from Product Idea to Full Design

There are many moving parts involved in the journey from bringing a product idea to full design. Each phase of the process plays an important role and deserves the proper attention to deliver a high-quality end product.

In this article, we'll explore the key phases that we work through in the development process and describe the importance of each one.

Three dots divider



Overview of the Journey from Product Idea to Full Design

When taking a product from concept through design, four phases are involved: Discovery, Product Planning, Wireframing, and Design. Each of these phases typically takes four to six weeks but can vary depending on the type and scope of the project.

Note: All examples provided in this article are from our development work with Black Sands Entertainment.

Discovery Phase

The discovery phase always starts with a kickoff meeting between our team and our client's team. We discuss the project vision, objectives, potential challenges, and features that the client imagines will be in the final product during this meeting. We also discuss user needs that will be fulfilled by bringing this product to market and our client's current knowledge of their target market. After the kickoff meeting, we begin different types of research, including user research, product research, and technical research.

User Research

User research involves studying the goals, needs, and capabilities of a product's potential users. We want to know who they are and what they're trying to achieve with a product. Understanding these elements guides how we design and bring optimal functionality to the product.

One way we gather data on users is by developing online surveys. These are short and anonymous, making them a quick and easy way to collect data about potential users. Once the surveys are complete, we analyze that data and create visualizations to show all the information in a presentable and understandable format.

Another way we gather data is through user interviews. We typically ask for volunteers from the user surveys and ask people to speak one-on-one with us. This lets us get intimate with the users. We can receive feedback on their habits, needs and frustrations related to whatever problem a product is trying to solve.

Lastly, we create user personas by synthesizing all the information we gather from surveys and interviews. We define what their goals and characteristics are and highlight this information on a one-page document. We will reference this document periodically as we consider who we are designing for and their needs.

User persona design based on research and created to help build stronger empathy. The persona is meant to represent our core user base.
Secondary and tertiary user personas outlining individual needs, desires and pain points.
User personas created based on our research to build empathy and better understand the people we are designing for.



Product Research 

For product research, we perform a combination of competitive and comparative analysis. In a competitive analysis, we are researching a client's direct competitors and their products. However, during comparative analysis, we look at other products or brands across different industries with comparable functionalities. Looking at how other complex systems and tasks are built allows us to provide appropriate design solutions that adequately consider all alternatives.

For example: If we are building a booking website for a hotel, we might look at other websites that do bookings to see what type of experiences they're providing and what best practices can be applied to our product.

Sample competitive research matrix comparing features and functionalities of direct competitors.
To better understand the market, a number of features and functionalities were compared to see where we stand in terms of strengths, weaknesses and opportunities.

Technical Research

During technical research, we look into third-party integrations that the product is planning to use. We source and compare these integrations to see which is the best fit based on features and pricing.

Third-party integrations allow us to quickly add features and tools to a product using already existing components instead of writing new code from scratch. This shortens our development cycle while helping provide a quality user experience. 

For instance, you might want to incorporate chat features into your product so that people can communicate with your brand or with one another. Instead of designing a new chat interface, the developers can easily incorporate an existing API into the solution, cutting development time and costs.

Product Planning Phase

After the research phase, we begin the product planning phase. Here we look at what features a product will have, build the information architecture and sitemap, define the user flows and create a roadmap for your product.

Feature Set

The feature set contains all the specifications for your product. It's usually shown as a matrix so that everything can be seen at a glance. Since both the product team and client team reference this document, it makes it easy for everyone to discuss what's being built.  

When we define the feature set, we also take each feature and consider whether it should be prioritized for the Minimum Viable Product (MVP) or if it should be scheduled as a future version update. The point of us creating an MVP is to get an initial usable version of your product in front of your audience so we can start testing and validating assumptions. 

If you build what you imagine as the perfect product for users, it runs the risk of having unvalidated features that users might not find useful. We always highlight the importance of creating an MVP because many clients want to build out all the features right away. This can lead to "featuritis," where the abundance of features causes users to be confused or distracted from completing their primary task.

​Example of the must-have feature set for a mobile app, pulled from a larger MSCW matrix. The MSCW method is a prioritization framework used to help key stakeholders understand the significance of initiatives in a release.
We evaluate each features value vs level of effort to build in order to prioritize them into Must, Should, Could and Won’t-haves.

Sitemap

When building the sitemap, we use a client's MVP feature set and content breakdown to define your product's structure visually. Our goal is to organize everything to make it easy for users to complete their tasks and effectively navigate a product. This is especially important if you're building something complex with several layers, such as an e-commerce site, where a user might have to click several layers down to find what they're looking for. On the content side, we try to collect every piece of content that your product will use so we can have it all defined and organized.

Visual site map design that illustrates information architecture and overall product navigation.
These maps shows how the navigation will be structured, where content lives and what the relationship is between pages.

User Flows 

User flows are specific diagrams that show the path and decisions a user might take when using a product. Visualizing this process lets us evaluate ways to optimize the user experience before we put more time into wireframing what the screens will look like. Defining these user flows is especially important for identifying an MVP.

​User flow diagram​s​ ​that outlines the path a user would take to accomplish their task.
Breaking down the steps people take to move through the platform lets us consider intuitiveness and what features, screens, content and interactions are needed along the way.

Wireframing Phase

A wireframe is essentially an initial blueprint for your product. This is where we design your product in low fidelity, where simple blocks and line shapes represent the elements. Sometimes we even start with sketching to ideate and consider different layouts. This method lets us evaluate each page, decide how to set up the content on that page, and visualize interactions between them. 

The skeleton of the future user interface is often referred to as a wireframe. It's a low-fidelity sketch of the user interface. Without diving into the visual design, wireframes communicate the core features, functionalities, and content of a user interface.
Wireframes allow us to grasp functionality, user flow and content layout in a black and white representation.

When wireframing, we go through many rounds of feedback between the client and us. Typically, we'll do some wireframing, share that with the client, and then iterate based on their feedback. We'll also create quick prototypes to share with colleagues who are not on the project to see how easily they can complete a task or navigate around a product. This is a quick way to build something out and test the interface early in the process without spending time on unvalidated assumptions.

Design

The design phase starts with a meeting where we learn about a client's preferences regarding colors, emotions they want to evoke through their brand, possible brands to emulate, and other design elements. Feedback from this meeting allows us to create mood boards and a "design system" that guides the different types of fonts, form fields, headings, icons, and imagery that will be used consistently throughout a client's product. This way, when we apply the design to all the different pages, there's a streamlined look and feel across the product.

​Global UI components designed for a mobile app. User interfaces can be broken down into UI components, which are parts that can be reused on every page.
​Design components from a larger design system. ​Design systems consist of multiple UI components and act as a central repository for reusable UI elements.
A holistic approach to user interface design in which all UI patterns are documented in a centralized system.

We'll typically work through a few rounds of feedback with our clients before agreeing on a final design. Once this is decided, we can hand off the design elements to the development team with annotations, and they can apply them to the wireframes we previously created.

All Phases Matter in the Product Development Process

Bringing a product from ideation to complete design is a process with key phases that require detailed attention. The journey described above has allowed us to build high-quality products step-by-step without delivering features that don't meet users' needs. All features are validated and implemented based on user feedback, testing, and thorough research. If you're interested in learning more about this process or if you want to see how Majestyk can help you on your next journey from product idea to full design, feel free to reach out to us today. 

Sign up for Our Newsletter

Stay in the loop! Join our newsletter for monthly updates on industry news, company updates, recent work and job openings.

READY TO CREATE SOMETHING AMAZING

Let's Work Together

Get In Touch 😊