Reimagining Wireframe Library for multi-platform experiences
A wireframe is a skeletal outline of a web page or app. It visually represents a clear overview of a page structure, hierarchy and navigation patterns. Wireframes are utilised early in the ideation stage to discuss features and flows before visuals and content are added.
At the 2359 Design team, we always think of how we can be more productive and efficient in today’s digital world. Based on a discussion with the engineering team, we thought it would be a good idea to create a wireframe library to allow our designers to get straight to the creative bit.
What’s cool about our wireframe library is not just one thing. It allows us to speed up creating high-quality wireframes across web and app platforms. It can also reduce technical overheads by scaling easily in different environments.
In this article, I will share what motivated us to come up with our new approach to wireframes, how we worked, how it’s structured, and what are benefits we got.
What motivated us
Until the middle of last year, there was no wireframe library — we were creating every single screen from scratch. There were a few shared patterns and components within the design team, but they were inconsistent.
Our chief solutions architect, Samrith, gave us an idea that there is a need to deliver great functionalities at a faster speed while ensuring focus and exciting development environments. Inspired by this, the designers started to think about how the design team also can plan a design’s structure properly, without having to sacrifice our creativity.
How we got here
Since building a library is a continuous activity that requires frequent reviews and updates, we set up a team and made it our internal project. We have worked on bit by bit, but frequently synced up — three times a week for about 4 months. During the sync up, each designer shared what is being done, what/when will be done next and any challenges faced. The following steps are how we used to create our own library.
Overview of the library
The benefits we got
Fast iteration and testing
Our wireframe library thrived even before the start of a project. When we were pitching our project idea to get a YES, we quickly tested and reflected our ideas internally utilising our wireframe library. While doing so, we also discussed what worked and what didn’t and made changes based on the feedback.
High-quality visualisations
Wireframes are the first bridge to a visual product. So it makes requirements become tangible as real features. Once the requirements are visualised in high-quality, designers and developers can imagine what more pages or features are needed. It helps determine the overall development requirements.
Efficiency for communication
Well-made components are not just beneficial for designers. It also increases efficiency for discussions with developers. When we create a component, its variations are also considered such as a text field with an inline error or a button with an icon. The variations of components help our team to implement our designs covering different scenarios.
Wrapping up
While this was a team project that required continuous efforts of the designers, we found that creating our wireframe library was worth the investment and a good learning experience. The 2359 design team enjoys suggesting different ideas for innovative products. So from the start, what we tried is not to have a library that is “one size fits all” since each design solution should be tailored to each project’s needs.
Perhaps the biggest lesson for us was how important it is to understand our businesses and adapt to them. Our designers work on different industries and solutions so there can’t be a “one size fits all” wireframe library. As designers, we also enjoy creating design solutions, so it needs to balance creativity and efficiency for us. So, rather than having a single fixed system, we made it adaptable so that we can look for ways to improve, innovate, and do better.
