Creating Website Design Through User Journeys

Redesigning your library website can be overwhelming but thanks to the Build A Better Library Website Bootcamp it can be much simpler. The lessons are free to all New Jersey library employees and you can either take the course in full or focus on certain lessons that pertain to your needs.

The Build a Better Library Website Boot Camp is available through WebJunction’s course catalog for free to enrollees, including librarians and library workers, as well as museum and archive staff.

After you’ve identified what visual design principles to incorporate in your website design, you’ll want to know how to create and test this design which is Lesson 4 of the bootcamp. In this post we offer a brief overview of how to use ideation and user journeys to create a website design that can be tested before it’s finalized. If this sounds like information that you need, you can refer back to the online course to dig deeper into creating website design.

Ideation & User Journey

When you start looking at how to redesign your website, the first step will be to do some brainstorming in the form of ideation. You previously got to know your website users and the pain points they’ve been experiencing with your website. Ideation is thinking of different solutions to the problems and then testing multiple solutions to see what works best. This is best to do in the early stages of the project in a team environment so you can collaborate on ideas. It might be a good idea to outline the pain points and goals of a problem prior to a brainstorm session and then tell your team members to bring solutions to the meeting with no rules or dismissals to deter creativity. It also could help to create a storyboard so you have a visual on how a solution could play out. The best way to understand how a solution your team has come up with could work is to visualize how the user will go through the website and test how it handles their pain points through user journey.

Prototyping

You’ll need to build a prototype website for your user to test. This will be less expensive and time consuming than making changes to your website each time. A wireframe can be a visual guide for what your page layout will look like without color and graphics. See below for examples of a wireframe and its components.

When building a wireframe or prototype, be conscious of the different screen sizes that your website will be viewed on. Taking responsive design into account is important because you’ll want a website that responds to different devices. Consider the width, number of columns, font sizes, button sizes and image sizes. Build your layout so the content stacks on top of each other on smaller screens. Once you’re ready to test it out, feel free to use any of these free tools to create the prototype digitally so that your users can give it a try before making any big changes on your live site. When the design changes that need to be made are identified, then you can really get going on the layout…but that’s another lesson for another day!