All of this week centred around one thing - making a prototype that we can get in front of users to test next week.
So rather than the usual daily breakdown of what happened, it all fits together better just to go through the process.
Step 1: Paper!
Good, old fashioned, paper and a pen. Following on from last week's decision to focus on a new "splash page" that sits in front of our current home page, I first sketched something out on paper as a rough idea of what I was thinking of. One main remit of this was to make sure we had a layout for both monitor and mobile displays.
 |
| Monitor display at the top, with three different mobile designs underneath, |
Step 2: Digital
We then moved onto looking at a few different websites that can be used to design a wireframe. I settled on Whimsical as it looked easy to use for what I needed and also had some presets for monitor and mobile layouts.
 |
| Effectively the same design as above, but now with added legibility! |
I used this layout to get my first bit of user feedback from my colleagues who had participated in the consultation a few weeks ago.
Due to the time constraints, rather than call another meeting I set up a shared document and emailed a call to arms. The shared document was a clearer way for collaboration, rather than everyone "replying to all" in an email, which can get out of hand quickly (and we all get too many emails anyway!). From this I asked for thoughts on the layouts, and also ideas for the wording and imagery we could use.
In a short period of time, I had got the first stage of the prototype in front of a small user group and already had feedback. I took it on board and moved onto the next stage.
Step 3: Actual
With already having a background in website design (albeit a bit rusty), it was easier for me to go straight into coding at this point. I put together a splash page based on the designs and feedback that we could get out in front of other users as soon as possible.
 |
| The splash page (v1) |
I took the wording that had come back from the focus group, and ran it through a readability checker. With a few tweaks, I was able to get the scores better which hopefully means a page that will be easier for people to read. This helps us towards one of our main goals in redesigning CABmoney.
Another goal could be met (for this splash page at least) by using Bootstrap to ensure that the layout could be created for both monitor and mobile devices.
I also ran the finished page through the WebAim Web Accessibility Evaluation Tool to make sure that it was fully accessible.
With a finished framework and content now ready to go online, I needed some variations so I could do some A/B testing. One of the areas for concern on the current CABmoney website is the amount of people signing up for an account that then go no further. One hypothesis is that because the "sign up" link is quite prominent on every page, users might think that they have to sign up (when in reality, it's only needed to save their progress on a Debt Management Plan).
For A/B testing, I am going to have one version of the splash page with the login/sign up form and one without. This might show if people are distracted by this, when they could just go into the main sections directly.
At this point in the week, the page still needs a little tidying up, and I may look at a different A/B test on the wording to see if the simpler text makes a difference in how likely the user is to click a particular link. For now though this project has moved into something much more tangible which we can put up on the website very soon.
