We integrated multiple online products into a single user experience and provide the case for the executive board.
User research – front-end development – Agile – information architecture – wireframes – interaction design – UI design
One of our clients was a senior and respected company that offered business-to-business information to its select clients. They had multiple online services but they had all been developed separately. They wanted Thought Into Design to see whether they should be integrated or not and if so, how it should be done.
We were lucky in that some research had already been done by another agency. The company was disappointed with that progress, but it gave us a head start once we’d read through. The real difficulty here was communicating the value of a good UX process to the company itself which felt that other agencies had wasted its time.
A quick content inventory gave us the scope of the problem: We needed to understand how much information there was and how it was currently structured before we could figure out what we needed to do.
Research with stakeholders was next to understand the particular problems each product faced as well as giving us an informed understanding of what each of them did. We reported these back to a weekly steering committee who were reassured that we were truly on the case.
Working closely with one of the company’s business analysts, we identified users among clients who we could interview and survey to better understand their issues with the various products. Despite the relatively small user base, there was little consistency amongst users we decided not to do personas. Instead, we used the interview data (analysed with content analysis) to provide questions and responses to a survey which gave us greater numbers. What struck us was how passionate the users were about the products this company offered: The information was truly first class, but it was being presented in a poor way.
A close-up of the card sort using k-means cluster analysis
We began a card sort to see how the users would organise all this information. For some aspects, we found a strong agreement but for others, there was little. Investigation of all the data we had (previous interviews, our interviews, a survey, a card sort and site analytics), it seemed that the navigation bar that was central to their site was just not being used or understood. Instead, we found that users were more likely to navigate in a completely different way! It also helped explain why a topic-based information architecture was unlikely to satisfy users.
A sitemap / information architecture
This insight helped us devise an information architecture that matched how the users thought and worked. With some stakeholder workshops and examination of help logs helped us provide a range of additional features that would help make the site’s navigation and design something more usable to the users. The company’s senior managers and executives were also asked to participate so that they could understand that our designs were based in users’ mental models, and also so we could compare their mental models with those of clients. Sadly, there were no resources to undertake a navigation test.
Annotated wireframes. These followed hand-drawn sketches.
With the sitemap drawn, we began designing the templates. Close work with the development teams helped us understand the constraints they were working in, and discussions with the graphic designer (who really bought into user experience) helped her create a world-class visual design. Annotated wireframes were documented for the development teams but we also produced a working model in HTML using the Bootstrap framework to communicate the navigation and site functions to the steering committee. This working prototype took time but effective information architecture work is best done “hands-on” in our experience.
We handed the project over to the company once the designs were finished to a company that was happy with our work.
Need a consultant to do some UX work for you? Fancy being audited against ISO 9241-210?
Want an official qualification in UX? We can teach the British Computing Society's foundation certificate in user experience.
Fancy a few hours learning some new UX skills? We offer workshops on a range of subjects.
HCI and UX courses for further and higher education sectors.
Here are some cool tools to help get your UX job done. Whether card sorting without recruiting participants, or measuring people in detail, see what we have to offer.