This is the second instalment of a two part series exploring common UX challenges you may face when working on large scale projects. In part 1 we discussed wireframing as a team and the importance of version control in this post, I’ll be discussing how carrying out component audits and using widget libraries will allow you to deliver at speed, whilst ensuring consistency.
Consistency is the Key
Referring to the 4 initial challenges we posted in part 1, we’ll now be addressing the next two challenges.
- C3. Keeping consistency throughout the project file, by re-using UI patterns, masters and consistent styling.
- C4. Catering for different team members with different levels of experience (keep it simple).
Upon reviewing these challenges we can see these are symptomatic of the people effect; different people naturally have different ways of working and will be of different skill levels in understanding the wireframing software.
Furthermore, people can wireframe to different levels of fidelity (detail) from low fidelity, flat sketch based outputs (typical within tools such as Balsamiq) to medium fidelity prototypes (typical within tools such as Axure and UXPin) to high fidelity polished prototypes (typical within tools such as Invision).
When working in project teams with multiple UX Designers it’s therefore important to ensure all team members are familiar with the wireframing tool you’re using and you all agree on fidelity and styling up font. To do this you could consider starting with a component audit or using custom widget / pattern libraries.
Component audits are exactly that they say on the tin, they are a checklist of all the common UI patterns you’ll be using across you’re wireframing projects containing everything from page headers to navigation, pagination to carousels, image galleries to accordions etc.
To carry out a component audit, simply gather your team together around a whiteboard and start to brainstorm how many components you feel the site your designing needs. For each component you should encourage conversations such as:
- Where will we use it?
- How many versions do we need?
- What information will it contain?
- Do we need it or could we re-use another component instead?
- Key functionality/constraints/limitations?
- Responsive Behaviours
For example you may decide you need 3 different pages headers for landing pages, section headers and article pages. 3 different versions will be required as the headers will need to be different heights and contain different elements (background image vs colour fill, Titles, Descriptions, Taxonomy labels etc).
Once you’ve captured all the components down it’s worth nominating a team member to capture all your components down into a centralised spreadsheet which will act as your reference point later in the project. Your spreadsheet should capture details such as:
- Component name
- What information it contains
- Number of variants
- Key functionality/constraints/limitations
- Responsive behaviours
Next, simply divide up the components listed in the sheet amongst team members and create these components first. Reconvene in a couple of days to check progress.
At the end of this process you’ll have all key elements of the website UI created as standalone widgets you can then re-use the library of widgets throughout your wireframe document thus ensuring a consistent look and feel throughout whilst also allowing your team to work at speed when putting pages together.
Using pre built widget Libraries
Most wirefarming tools these days now come with a series of in built widget libraries which allow you to add common UI elements to your wireframes without the need to first create the component.
Balsamiq and UXPin for example offer users with a lot of pre-styled UI elements such as images, calendars and tabs right out of the box along with device and browser frames allowing you to get to work quickly and also helping to create consistency across your wireframe documents.
If you’re using Axure, well… let’s just say the widget libraries you get out of the box aren’t exactly bursting at the seams. Luckily the The Axure Community pulls together a series of the best widget libraries available combining both free libraries and polished libraries available for a small fee. It’s definitely worth stopping by if you’re going to be using Axure as your main wireframing tool.
Building your own Widget Libraries
If you work in an environment where you’re going to be producing a number of wireframes for different clients you may wish to consider building your own widget library. Both UXPin and Axure allow users to build custom widget libraries which you can then re-use across multiple projects to create a consistent cross project look and feel.
I’ve just led this very experience within my current role with tremendous success. Initially as a team we started to talk about how we could create team efficiencies by creating a Responsive Axure widget library. The original was was to build a responsive widget library containing 25 common UI Patterns we develop a lot across various projects i.e. carousels, tabs, pagination etc.
Today the library contains over 100+ UI elements and has already been used across 3 different wireframe projects helping to significantly propel forwards the wireframing part of projects.
Axure Responsive Widget Library
If you’re not used to working on large scale projects, there are a number of key challenges you’ll almost certainly come up against on your journey. You can limit the impact of these challenges by agreeing working approaches upfront. In particular it can be helpful to ensure your internal process can accommodate for multiple UX designers to work simultaneously whilst having version control processes and pre-built widget libraries helps to facilitate management and encourage consistency.