by Ben Hall

Estimated Reading Time: 6 minutes


Websites, business systems and mobile apps can come in many different shapes and sizes. And they all have their own unique set of functions and tasks they want the end user to perform. For information-based websites and blogs this can be simply allowing visitors to peruse content about the organisation to whom the site belongs. But for many, there are some real, tangible tasks that an application or site needs to perform. It may be the selling of widgets to widget wanters, it might be surveying people for opinions on a particularly hot topic or it may be providing a platform for users to curate their own content. Or it may be a combination of any numbers of either/or’s.

Whatever the desired interaction with a website or piece of software is, this user interaction needs to be considered, outlined and designed in much the same way that the physical look of a site or application does.

UXplained

Design is very much about exploration. From the outset of a project we work extremely closely with our clients to explore the exact functional requirements of the website or application they desire. What can be done to sell more of those widgets? How can we deliver content to their sites’ users in more efficient and appealing ways? And after all the exploring, conversing and to’ing & fro’ing we’d get our heads down and deliver a selection of page designs that hopefully meet with the client’s approval. This is how we’ve always worked and it’s served us well.

The world doesn’t stand still and neither does the Internet. Technologies underpinning the web have improved with the proliferation of more sophisticated devices and faster data networks, a demographic of more technologically literate users has grown, and the demands for a increasingly more ‘connected’ society have pushed more organisations online. For many, a small presence with a website built using an ‘off the shelf’ generic theme will suffice. However, it’s this apathy towards the value of good design and the increasing homogenisation of the look of the web that has given greater prominence to the discipline of User Experience (UX) design. It’s proving to be the way to go for those who want a genuine bespoke solution instead of more of the same old thing.

As designers and developers not only do we need to deliver a design that is visually appealing, we also need to determine how pages and components within pages will come together to form a coherent whole. To this end, in recent times, we’ve been increasingly adding UX Prototyping to our design process. Our prototyping comes in two distinct flavours:

  • Structural Prototyping – outlines the page structure required of the end product and the content, components and widgets that form each page
  • Functionality Prototyping – this focusses more on the components and/or pages required for a user to complete a specific task when using the end product

Wild Images - A Structural Prototype

Any UX prototype we deem appropriate to produce for a project will take the shape of a selection of designed pages similar to that of a more traditional visual design deliverable. It’s important to remember that visual designs (that have become the industry standard) can still be classed as a form of prototype. A crucial difference is that our UX prototypes come in the shape of wireframes made up of grey boxes that focus more on depicting structural elements over content made up of text and/or images. No specific fonts or colours are specified and the prototypes feature little or no branding. This level of abstraction allows us (and our clients) to focus on the actual components that make up the site and its functionality without getting distracted by the intricacies of the content. Any ‘signed off’ UX prototype will then be used to inform the subsequent visual design phase of the site or application.

Wild Images – A Structural Prototyping Case Study

The beginning of the Wild Images website refresh & rebuild project was aided greatly by a client that had a strong idea of the goals of the new site. Building on this we took their ideas and produced a structural UX prototype.

The prototype specified the use of a card-based design pattern to list the various tours they offered and prominently featured the various image galleries they desired. Working on this prototype also helped us determine how we could best deliver a tab-based interface on the specific Tour pages whilst keeping it contemporary and usable.

Future Care Capital - A Functionality Prototype

Future Care Capital – A Functionality Prototyping Case Study

For the most part, the website Future Care Capital desired was a simple information/blog-based site. However, it did require a specific piece of functionality at its core. As a think tank that carries out research with the intent on influencing government healthcare policy, they had a requirement for canvassing their users opinions on specific healthcare topics. These took the form of projects made up of a questionnaire.

The functional UX prototype we developed for FCC outlined the step-by step journey a user would take through their entire participation in a project. This included selecting a project, completing the questionnaire and returning to the site to view collated results. The prototype also depicted how the journey may differ if a user was logged in to the site or not.

A UX Workman’s Tools

Over the last year in Accent’s studio, the old guard of design tools like Illustrator & Photoshop have been replaced by a couple of new pretenders; Sketch & Adobe XD. Whereas the old Adobe tools are used across a host of design disciplines, Sketch & XD have been developed from the ground up to be page design tools and that alone. This more focussed remit means they are incredibly quick whilst also featuring a host of useful features specific to web & app designers.

Another vital tool in our prototyping toolbox is InVision which is an online prototyping & collaboration platform. Once you’ve added your project of screens you can add hotspot links which allow you to click through the static visuals as if they were a real website or application. InVision are adding more bespoke design tools to their offering all the time including a new application called ‘Studio’ in early 2018. With its strong feature set and the addition of tools to design transitions and animations of web elements this application may soon challenge Sketch & XD.

Conclusion

The web has changed, meaning our working practices and the level of expertise we offer to clients has also had to change. As we’ve been starting to work from a more component-based perspective we’ve had to start adding UX Prototyping to our process. This new approach to design activities that we’ve adopted allows us to evaluate the use of specific UI components against our clients specific needs. It also gives us (and our clients) a greater understanding of the actual functional requirements of the website or application we’re building. The static visual designs we deliver may appear to be the same as before but they are now built on firmer foundations.

Ben Hall

Producing compliant & accessible websites in HTML, CSS and Javascript, Ben has a sharp eye for detail and is also super keen on finding new ways to pair striking aesthetics with high levels of usability.

Related Content