Think about a design to frontend development practice that is ideal. How is it set up? What kind of interactions happen during design and development phases? What is the team structure, tools or methodologies that help a scaling up startup optimize the evolving product?
For the past couple of weeks I have been working on a solution with our talented team but before we jump into the solution it’s essential to have a clear understanding of the parameters around an evolving startup. It is important to lay the groundwork of a unified process to enure the product is set up for success. As the product reaches different markets, new requirements will be uncovered that will eventually translate into design changes and consequently frontend development features. It can be challenging to keep track of findings from customer engagement or the influence of a new market. How do we make sure they become features that optimize the product rather than creating extensions that are not coherent with the existing product. Scaling up a startup has many facets and it eventually becomes challenging to figure out how to integrate new requirements within the already defined parameters of the product. Another challenge is the financial burden that quite often prevents scaling up startups from growing and adding more team members, which means extra work on top of daily tasks for the existing team. A coherent design to frontend development ways of working can address those challenges and bring together collaborators within design and frontend practices with helpful definitions of interactions, unified tools and a seamless process.
Stakeholders
UX governance
This is where the CTO, design manager, product owner, customer support and account managers share insights and help each other formulate new requirements or discuss possible enhancements. Key responsibilities of this team are to ensure As-Is and To-Be workflows are documented, requirements for an end-to-end project management tool are captured and selection criteria are defined and evaluation is performed.
UX design and delivery team
A team of frontend developers, designers, testers, business administrators, respective managers, tech leads, product owners and managers who work together closely in delivering designs and incorporating changes raised during development. Key responsibilities of this team are to determine the operational practicality of a new feature, look at the reusability of existing assets in the product, develop the feature according to a defined timeline, determine test cases and identify areas of improvement in the product and determine if those improvements can be implemented as part of the feature or require a separate project.
Design process
Discussions for a new feature usually start with a meeting between the project manager, product owner, tech leads and the designer to assess if the new feature requires a new UX or only involves minor UI refactoring.
In case of a new UX, user research needs to be conducted and wireframes drawn based on the outcome of the user research. A wireframe is a basic outline of a digital experience, like a page or a whole feature of a website or an app. As the name suggests, wireframes look like they were created with wires. They’re mostly lines and shapes with some text. So why are wireframe s needed at this step? Wireframes establish the basic structure of a feature, before any extra visual considerations, like color or images are added. Wireframes serve as an outline to get the team on the same page early in the project, using guiding questions such as
- How do I organize information on the page in a way that makes sense for users?
- How can I highlight the intended function of the feature in the product.
The next step is to generate hi-fi designs from the wireframes.
If minor UI refactoring is needed, the existing design needs to be refactored, versioned and added to a high fidelity library of designs. When drawing the alternative designs, we consider how the elements serve the overall functionality and can be reused as much as possible.
The next step is to perform user testing and validate the outcome. During user testing, we will have a diverse group of users test the new feature and provide feedback. To be able to do this, we need to start recruiting users that fit the target profile, so the design sprint stays on schedule.
Next we need to evaluate the design system. A design system is a series of reusable elements and guidelines that allow teams to design and develop a feature following predetermined standards. Design systems help teams combine brand identity and design guidelines in one place, including important information like components, color palettes, fonts and more. The way I recommend to implement this is to use Figma for the design system and storybook for the frontend display of components. To ensure synchronization between the design and frontend streams, a tracking reference is required to display the status of components in each stream, as shown in the image below.
If the outcome of the design system evaluation is changing the designs then a design variation needs to be created only for those components that are affected. The new changes then need to go through the design system evaluation process again. The tracking system needs to be updated with the latest status of the affected components.
If the outcome of the design system evaluation is no changes to the designed components then the design goes through frontend implementation and the tracking system should be updated accordingly.
Conclusion
Empowering designers and frontend developers to work together with shared language, processes and more importantly vision creates an environment that works towards the best outcome for an organization and this is crucially important for scaling up startups. Optimizing the team’s workflow helps facilitate communication and an environment where creativity thrives. Defining an inclusive process that guides teams from problem all the way to solutions under a central cover fosters a culture of continuous improvement and learning filled with possibilities which is essential to the successful growth of a startup.