Turn your app idea into a reality with our Ultimate Starters' Guide.
Learn how you can turn your app idea into a reality with our Ultimate Starters' Guide.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Stay in the loop! Join our newsletter for monthly updates on industry news, company updates, recent work and job openings.
