Working Together: Wireframes
Having understood who we were creating our new Carers’ Centre website for, and what information users needed at each point of their journey, we could start to get creative! What might the pages look like? How might we display information in the right way? Or, as our partner Digital Wonderlab like to say, now we begin to draw in the lines! Creating wireframes was definitely a new experience for us at The Carers’ Centre as it’s something we’ve never done before, so here’s our take on this part of the process, with some expert tips from Digital Wonderlab’s Laura, who guided us through the process (see italicised text!) …
What are they?!
Wireframes are a black and white line representation of the pages you will ultimately see on the website. They are the framework and structure of the site and they help to confirm our understand of what we have learnt from the previous workshops by mapping out the user journeys into the structure of the page. Wireframes are quick and they help us to flesh out our ideas.
When should you do them?
The Carers’ Centre developed our wireframes after we’d done work to understand our user profiles and user journeys, but before we’d done any testing of our site. In fact, we used our wireframes as prototypes, to test the journeys we’d created and whether they achieved what we wanted them to!
How did we create wireframes?
The first step in creating wireframes was another workshop. Yes, another one! I did wonder why we needed to meet again, given this was our third workshop session. Wasn’t designing a site what we were paying for? Wasn’t this what a designer should do? True, but that doesn’t mean there isn’t massive value for the designer in understanding how users might design a site and why.
We love a good workshop at Digital Wonderlab, as it’s an opportunity to continue to collaborate and explore what is needed for the site. It is really important for us that our clients are involved throughout the whole discovery phase as it means that can see our thoughts and ideas evolving and contribute to this evolution. This workshop is not about designing the site, it is about ideas creation!
Our session was incredibly exciting as, for the first time in 18 months, we were face to face rather than virtual! It was interesting just how different the dynamic felt and, although I have no doubt you can do wireframing online, it was great to do it in the room.
We started by talking about who would use the site, and what they needed to find. Then Laura gave us each an A3 piece of paper and…. well, she asked us to get on with it! Each participant was asked to draw several versions of the home page, and one other page on the site. Just in outline terms — what buttons were needed; where should they go; what should content say etc.
It was pretty nerve-wracking, especially as we were going to showcase our wireframes. What if people thought mine were terrible?! It was also difficult to come up with 1 design, let alone more than one. Yet everyone really got in to the spirit and for those really not comfortable with drawing it out, they spoke or wrote their ideas out. It became quite interesting to re-do a design over and over, rather than focus on 1 perfect version. As I was completing my first design I thought “No, that bit won’t work’ so I did it again as another design, changing and amending as my thoughts developed.
As a digital partner, this workshop is an opportunity to explore ideas that might not have come up if we had gone away and started creating the wireframes ourselves. This session was particularly rewarding because we had a carer in the session who spoke about their experiences and challenges with the previous site. Hearing her journey, and the experiences, both negative and positive, centred everyone back to why we’re making the changes and what changes were going to have the greatest positive impact to her. Her passion energised everyone to come together to share more creative ideas that would not have been possible had we done this alone in a room by ourselves.
When we shared our designs it was great to see and hear how other people thought the site could work. Everyone had ideas that would enable the user journey’s we had laid out, and would make a site I would be proud of. In a flash, the 2 hour session was over! I was left wondering how on earth Laura would make any sense of our designs and turn this in to something meaningful…
The Carers’ Centre team were great at sharing their thoughts and ideas for their new site, this allowed me to take those ideas and formulate them into a prototype using Adobe XD. The team could then click around and play with the prototype to see how their new website would come together. We were then able to take this prototype into testing with the target audience to see if this would meet their when visiting the site, or if we had missed anything that they would be looking for
The initial wireframes Digital Wonderlab produced were a bit of a revelation. It was great to see how Laura had taken the ideas we had come up with and turned them in to a coherent web design to pull together the 7 user profiles and journeys we had. There’s a definite art to designing a good user experience!
What did we learn?
As with every aspect of this web development process there was a lot The Carers’ Centre team learned about wireframes, but here are our top 3:
- Get the right people in the room. If you’ve read any of our previous blogs, you’ll know how passionate both The Carers’ Centre and Digital Wonderlab are about hearing from stakeholders. This stage is no exception. Having carers in the wireframing session was critical to us understanding what might work / not work. Bringing carers in to this quite intensive workshop might seem a little odd. But, managed well, it brought massive dividends. If they didn’t want to draw their designs, carers were able to talk through their thoughts or use words instead of images to express what they thought. By enabling them to contribute in ways which they were comfortable with, we achieved so much more than with staff alone.
- You don’t have to be creative! Although it’s a worry when you are handed a blank sheet of paper and told to ‘design a web page’ you really don’t have to be creative at all. It’s much more about drawing lines & connections than anything else. In so many places I drew boxes with the word ‘video’ scrawled through it, or the word ‘logo’ written out. It’s not about coming up with the best design. It’s about coming up with ideas — enabling the designer to take this away and weave their magic, turning your ideas into the reality of draft wireframes for the site.
- Don’t accept your first draft as final — Test! Our next blog will focus more fully on the user testing element of our wireframes. However, what we can say is don’t accept your initial wireframes. Test them. Use them as prototypes. Even at this very basic, black and white stage, you can really begin to see if the structure of the site you have planned will deliver what you want. It really is worth the time and effort — although not markedly different our wireframes did change after we showed them to people who hadn’t previously been involved in the design process.
So what next? As you might have guessed, it’s user testing! Genuinely one of my favourite parts of this whole experience and I can’t wait to share it with you……
