Mar 10 2025
If you have talked to me for more than a minute on design, you have likely heard me talk on iterative design, oftentimes to ad nauseum. I love to talk about research and ideation. To be honest, I have gotten quite exhausted hearing myself on the topic, but I feel that as important as research is, it is often neglected. My hope is that through these guides I can save both myself and my respected clients precious counseling time so it can be better directed elsewhere.
Previously I highlighted the importance of discovery in design work. The core concept is that through research and play, we can break out of our limited vision and see things from an elevated perspective. This in turn leads to better design work. discovery manifests in multiple ways; rather I should state there are different tools that a designer has that can cultivate discovery. In a previous entry, I discussed some of these tools in relationship to enhancing the user experience. Today I wanted to focus more on UI, particularly Prototyping. To be more clear, I would like to specifically focus on the prototyping stages for a website or app.
So Let talk Prototyping
For a web/ux designer, it is foolish to develop a finalized website/app from scratch. In the past I have offered that service to clients and ….well let’s say you’ll never find them on my portfolio for good reason. For some clients, they see designers as these artistic wizards who can visualize a website and wave it into existence. I think we are starting to see a change in that faculty to some extent, but regardless the point stands that we are not magical. What makes a good designer is a combination of education, process, and extinct (which I guess you could argue incorporates a level of wizardry). The result is the bloody but true process of building, bleeding, rebuilding, and unnecessary drama.
By incorporating the mockup for your product, you can test it’s use cases to ensure the product is optimized for consumer use. Different stages require different types of testing and different prototypes to accommodate for that stage of testing. Depending on the scale of the project, longer phases of testing may be required. In the case of a smaller projects, the different developmental phases may be combined to save time and money. That said, this shorter development and testing cycles may affect the scalability and accessibility of the design in question.
α (alpha) Design
Alpha protypes are best described as the rough materialization of the conceptualized product. They may show a glimmer of the final product, but for all extent purposes are a launchpad for visualized aspect of the product in question. For design purposes, the alpha can be a series of sketches that generalize the layout of the design or a rough navigation journey using Figma/XD. The method should match the content. For web/app design, the user journey should be just as important as the content readability, which is why I would recommend Figma in those cases. The prerogative is foundation building.
Wherein research and conceptualization are the foundation of the project itself, the alpha design will act as the foundation of the user interface. For this reason, the designer is less focused on the particulars and more on foundation principles. Typography, color, and images are generally not considered, rather layout and hierarchy take priority. The design is made in greyscale, to allow the shape and form of the layout inform the reader. This ensures that when color is added, it does not have to overwork to enable the design. This also helps with accessibility for color-blindness.
Alpha design work is iterative. The design may be modified many times over before it proceeds to the Beta. Once it has progressed to a Beta design, it should never need to return to the alpha state. If this happens, it is usually a sign of a weak foundation, either in the UI understanding of the product or the initial research and ideation of the product in question.
α Design Attributes
α Design Goals
β (Beta) Design
Wherein the Alpha design is the rough approximation of a concept, the beta design framework is the perpetual approximation to a finalized product. For the beta design, the designer takes the foundation formed by the alpha design and adds the ‘flavor’ to transform the concept into a product. Beta designs will incorporate design elements that were left out in the alphas, including typography, color and image selection. In addition, some layout modifications will be made to rectify pain points in the alpha design.
As the beta design nears closer to testing, additional prototyping connectivity may be made in Figma to allow for additional group testing. As the beta design phases nears completion, the design should start to mirror the finalized product. This final product can then be used as the blueprint to create the webpage or app. Like the Alpha, the Beta design is iterative and will likely have multiple variations as it progresses closer to completion.
β Design Attributes
β Design Goals
Completion
Once the customer has approved the beta design of the product, the design can be actualized. For my customers, I will produce one of two products. For the website, I will provide the finalized site with the CMS of their choice. For app design, I will provide a design document that covers responsive design, scalability, and any additional elements that are not clarified through the beta design itself. The important take away is that the customer is never left with questions moving from the beta to the final product.
For app design, the alpha and beta designs I provide do not replace prototyping tests for said app. Ideally, you will want the alpha and beta testing to coincide with the design work of the design prototypes. In instances where that may not be possible, it is best to have the prototype work for the app functionality prior to the design of the app. In the case where that is not a possibility, additional changes may need to be made to the app design to coincide with testing results, leading to an increased expenditure.
Likewise for bigger web projects, I might recommend an additional usability testing phase after the website has been built before going ‘live’. This is website dependent, based on the size, purpose, and goal of the website in question. For smaller websites, it may be more beneficial for the customer to go live from the beta design and make modifications over time based on user concerns. Ultimately the time, effort, and journey are going to be conform to the needs of the project and the budget in question. For this reason, consultation is imperative to routing a path to success.
All Graphics used throughout this guide were designed by Storyset at Freepiks