How we improved the design process at Randstad with a wireframing library
UX Designers are known for their role in improving the experiences for users and keeping a sharp eye on spotting the opportunities that will make an impact on day-to-day interactions. We're trained to do this for others, but how about doing this for ourselves?
In this article, I will walk you through Randstad's journey to improve our wireframing process. From identifying the need — to making an impact. I will tell you about the steps we took for improving our way of working to foster better collaboration between roles and deliver effective designs.
Introduction
Since I started working for Randstad Global as a UX Designer, I noticed we didn't have a dedicated tool for wireframing. Soon, after asking around what tools other designers used for the lo-fi stage, I realized I was not the only one missing it. Based on conversations I had with Randstad designers, I came to the conclusion that we were in need of something that would help us:
- translate research insights into lo-fi visual ideas;
- create alignment between the development team and designers;
- communicate the ideas to stakeholders to get buy-in, test & validate concepts quickly before spending time on hi-fi designs.
There was an opportunity to improve our way of working in the initial stage of the design process.
Opportunity
When working on the end-to-end design process, we all used various methods to create lo-fi designs. Ranging from paper sketches to Miro wireframing templates, which resulted in inconsistent design practices. With our recent move to Figma, an opportunity arose to migrate the lo-fi design process to Figma as well and make a unified lo-fi kit that is easily accessible within the Randstad design team.
We took the chance to introduce a lo-fi design wireframing kit that helps communicate the conceptual aspect of ideas and validate in lo-fi with developers, stakeholders and users before jumping into pixel-perfect designs.
The Wireframing Kit
Instead of reinventing the wheel, we decided to take an existent lo-fi library, created by designers at Method that is available for public use in Figma community. We modified it and adapted it to our specific needs, as the original library was mobile-focused.
The process of launching the wireframing kit
- As we started working on a new conceptual project, we used the Figma community library to test its feasibility and flexibility. As we were creating lo-fi designs, we enriched our library with the most commonly used components and refined the public wireframing kit by getting rid of the components that were not relevant.
- We created documentation to clarify what the Wireframing Kit is about (purpose), how it works (content & functionality) and who is it for (audience).
- Then, we launched the library and sent out the communication organization-wide. We also added the contacts of the responsible persons, so that we could collect feedback and reactions from interested parties.
- Shortly after, we received lots of positive responses and messages of interest from other teams that were wondering if this tool is something they could use as well. For example, the data analysis team and the system architecture team were both curious if they can use the wireframing kit to visualise their concept ideas. This shows there's room for improving current processes in other fields besides UX.
- Three months after the launch, we collected feedback from all designers within the Randstad organization. We were happy to see notes suggesting adding more components and improving the flexibility of the existing ones. Hence, we optimized the lo-fi kit accordingly.
- In the future, we're planning not only to continuously gather feedback from frequent users to refine the wireframing kit but also to make sure it matches our needs.
Impact of the wireframing kit
Currently, the wireframing kit is widely used by various teams, from researchers to designers alike.
See below the impressions we got from our colleagues:
[…] one week ago we tested a prototype made using the wireframing kit! The designer said it really helped him to prototype a flow without using any of the brands that we have in NL.
Also good thing: we tested it with 10 participants, and in total, we only got 2 comments about the visual design. Which is perfect for this stage of the project!
[…] The test users just focused on flow and functionality, just the thing we were testing.
This feedback proves the successful accomplishment: the wireframes are used to validate the concepts early on, highlighting the flow and showing only the most important information a user needs to look at on the interface and bring insights to the team before spending time on hi-fi designs.
Moreover, previously in our way of working between the UX Designer and the Visual Designer, there was a hard handover to pick up the sketches or flow diagrams and translate them into hi-fi designs using our Orbit design system. Now, that we have a tool for the lo-fi stage, the two roles work closely together to design the concepts and support the decision-making in stakeholder meetings.
Conclusion
The design process at Randstad was made easier and faster since the introduction of the wireframing kit. The UX Designers and Visual Designers are working closer together to visualize the flow. While the stakeholders are delighted to see their topics come to life in a faster timeframe than before.
What makes me happy is that I saw an opportunity and acted on it to make things better in our process, unify our way of work and make it consistent with wireframing in Figma.
As designers, we are primarily user-focused and often forget that we are users too. This being said, I'd like to encourage you to look for opportunities to make things better around you. Dare to ask and improve your team's way of working.
Have you introduced wireframes to your organization's design process? I'm curious to hear your story. Get in touch at alexandra.timus@randstad.com
Thanks for reading!
I hope you found it useful! 😊
References
Paper Wireframing Kit by Method, https://www.figma.com/community/file/1075811850250564922
Orbit design system by Randstad, https://randstad.design/
