UX-first

Process

FOLIO UX process
Introduction
A UX-driven development process
The UX process in FOLIO is built to focus on the needs of the end users from start to finish. We strongly believe that this is the optimal way to create software that is useful, simple and elegant. The process starts with defining an overall goal for the system itself as well as for each sub-functionality of the system. UX designers begin by researching and engaging in a dialogue with users; sketch out concepts in close collaboration with users and lastly design the actual interfaces with an ongoing dialogue with users and other relevant stakeholders. This all makes for a strong vetting of both concepts and actual user interfaces before one single line of code is written.
A global, open, multi-team structure
The team structure in FOLIO reflects the underlying technological approach: FOLIO is not a small set of a few monolithic ILS-modules, but rather a sophisticated web of micro-apps that all serve a very specific purpose, and that are all built to exist in an eco-system that is open, evolving and nuanced in functionality and usage.

In contrast to building big, monolithic ILS modules, each area of the library will rely on many small apps that fulfill the needs of that particular area. The apps used will not share their code, but they will be built with the purpose of interacting heavily with other apps, APIs and to function in different contexts for different purposes. FOLIO is thus structured in a way to support this: A UX lead + team designs and manages the FOLIO platform and UX framework, while separate teams focus on various areas like acquisition, resource management, circulation, etc.

Each UX team in the FOLIO project is in contact with the others, making sure everyone is headed in the same direction, and creating a synergy effect where one team can make use of the innovations of another as soon as it is invented. All UX teams work with end users, product owners, developers and, where relevant, vendors, to make sure the apps they design are meaningful and easy to use.

The FOLIO UX team is acutely aware that a good UX design cannot be achieved unless everyone involved in creating the system and the apps are focused on the end users and their needs. Thus a big part of the UX process is making sure everyone can stay informed and engaged in how the design evolves and improves.

An essential part of turning the UX designs into reality is making sure there is a strong link between design and development. For this reason, we strive to have a UX developer—a programmer with strong UX sensibilities—available on each development team.

The UX process, step by step
1. Define high level scope (i.e. purpose of system / group of apps)
The first step of the UX process is simple: Key stakeholders—strategists, developers, designers—discuss what the overall goal for the platform and the apps are. One could call this a scoping out of sorts, however a very detailed scope is defined in collaboration with users in the following steps, so this first phase only deals with setting an overall direction and a high level scope for the work to be done, so everyone can start working towards one, common goal.
2. Research
When the high level scope and purpose has been defined, the UX designers begin their work. The research phase consists of multiple different methods, e.g. on-site research visits, user documentation, and online meetings with groups of end users.

Research trips are conducted to understand how staff users and patrons work with the institution’s systems. UX designers follow staff around and experience how and why they perform the various tasks throughout their working day. This gives designers a good insight into the needs that a software system needs to fulfill, but more importantly, it gives the UX designers a sense of the context in which the system is used, making it easier to create a system that works in practice.

Staff members from institutions around the world help in the research phase by providing walk-throughs of their processes, revealing a lot of information that one cannot efficiently discover by shadowing users in their daily work—oftentimes the processes stretch over months or even years, so letting end users themselves document their workflows is both an efficient and low-risk way of making sure no details get lost. The documentation can be in text, bullet-point, diagram or video format. When something is unclear to the UX team working with end users, meetings are simply set up online or in person to clear any misunderstandings.

3. Concept development
When the initial research phase (more research can be performed ad hoc as needed when questions arise) for a particular area is drawing to a close, the UX designers work with end users to map out the functionality needed in a particular app or function. The research provides the basis for this discussion, and helps get all UX designers and end users aligned on assumptions and premises for the work to be done.

Mapping out the functionality can happen through online meetings, or, as seen above, in in-person workshops. In-person workshops allow for more nuance and creates a good team spirit that is sustained in the following online communication. Having an in-person meetup is also a great way to establish a tone of voice and a sense of knowing the other participants in a project or group, which can be challenging if only online meetings occur.

After the workshop or online discussions, UX designers work through the information supplied at the workshop, to form a mental image of what needs to be done and the direction that will take the software there. Various techniques are used, and they vary from UX designer to UX designer.

When the findings, advice and ideas from the discussions or workshop has been analyzed, they are summarized and reviewed with the team that attended the workshop. Then adapted if necessary, to make sure they present the consensus reached at the workshop and to make sure everyone feel that the summary is representative of the discussion and conclusions that has taken place.

Following workshop, analysis and summary development, the UX designers work directly with the users through online meetings and written communication to specify what has been discussed. The result is an overview of necessary functionality in different forms, that can then be used in the next phase of the UX process: Turning the concepts into actual interface designs.

4. Prototype, test, refine
The actual design phase serves the purpose of visualizing how designers think the software can best solve the challenges discovered in the research and concept development phases. It goes from sketching, through discussions and then to interactive prototyping which is iteratively redesigned and improved, until the result is ready to go into production.

The prototyping phase starts with a low-tech design, sketched out on paper or a digital tablet. It is a fast and cheap way to communicate highly visual concepts and interaction ideas to users, who can then provide their feedback.

Particular functions can be sketched out and presented in isolation, or a group of functionalities can be designed and discussed at once, to let everyone understand the coherent vision and interaction pattern of a given set of features. Because low-fidelity sketching is so fast and efficient, this process can take place fairly quickly, and changes and ideas can easily be implemented before proceeding.

In the FOLIO setup, wireframe sketches are often discussed in online meetings, and the recordings published for people to watch later if they cannot attend the meeting in question.

When the wireframes seem to make sense to the group as a whole, the sketches are taken a step further. Without any actual coding, interactive prototypes are created through drag-and-drop tools by the designers themselves. The results are crude, but interactive mockups of what the app interfaces would look like. They can then be shared online for people to try out for themselves right in their web browser.

Getting to “try out” an interface gives people a very real sense of what it would be like to use a final interface, and sparks discussions and advice that people might not have thought of during the rough sketching phase. The interactive prototypes can be developed to become more and more specific, eventually looking exactly like the end result would appear. Oftentimes that is not necessary for development to start, because the primary purpose of the interactive, non-programmer, prototypes is to communicate the structure, the flow of screens, menus, drop-downs and buttons, and not so much to communicate styling details like drop-shadows, rounded corners or color nuances.

FOLIO, being a micro-app system, has required us to develop a custom setup where users can explore all the prototypes in one place, essentially conveying the feeling and experience of using FOLIO itself, and how users would navigate between apps and how they would use system features.

The crude interactive prototypes are developed quickly, and are therefore quick to alter and update. Details about the context of the app are communicated through an accompanying video for each prototype, explaining things that might not be obvious in the interface design itself.

5. Support development, refine recurringly
The prototyping process (described above) is continued indefinitely, because it is a tool for ever improving the interfaces. However, when a given feature is finished enough to start being developed, the development process begins, and UX designers then work with developers and product owners to make sure the functionality is implemented in a way that makes sense, based on the research and concept development performed with users. Development functionality is demo’ed to end users as well, allowing for a direct and efficient dialogue between developers and users, with UX designers and product owners as helpers, making sure changes are implemented in a good and user friendly way.

UX designers might, when relevant, provide the developers with “code sketches”—snippets of code meant to convey a concept rather than serve as production code. In the example above, the logic of how the contrast in the user interface behaves is presented as PostCSS code, which is essentially a faster way of communicating that particular logic than for UX designers having to describe it in words. Some UX designers have the technical ability to provide these types of materials and some do not, but have their focus on more conceptual aspects of the UX process.

As the front-end developers, who code the user interfaces that people interact with, start their work, support from UX designers make sure the direction of the work is aligned with the overall UX vision, and that any technical requirements that might impact the UX is implemented in a good and meaningful way.

When specific issues arise during development, UX designers assist in answering questions, rethinking designs or providing more detailed designs when necessary.