Updating my UX & HCI skill set

During my Master studies I particularly enjoyed learning about digital tools for learning and communication. This was tighlty connected to research methods, and how to investigate digital learning environments with respect to their effectiveness. Now, some years later, I lead and consult projects about exactly this: developing tools which support employees in their learning and development process. I felt that it was time to update my user experience and human-computer interface knowledge and skills to become even better in my role and to have a stronger impact on the project results. That’s why I enrolled in Human-Computer Interaction as a freestanding course at Uppsala University. It was a project-based distance course, where I was able to work on my own desgin project throughout the course. I admit that I am not a born designer, but it was a valuable learning experience which inspired me both from a content and a methodical perspective.

The first sketch for my design solution

Bridging the research-application gap

I enjoy reading research articles and finding out how I can apply new findings to my daily work (see also this post and this post). This is why I came up with the idea of a “relevant research finder” for my project in the HCI course. Below you can find my description of the idea while the above picture shows my very first sketch for this idea.

Reading research articles can be beneficial for non-academics and practitioners seem to be aware of and willing to use scientific literature. There are two problems with academic publications. Firstly, they are not accessible to everyone and secondly most practitioners struggle with what they should search for. With my design solution (“The relevant research Finder TRRF”), I want to tackle the latter by designing an easy way to find relevant academic research for practical problems at work. Figure 1 shows the first sketch of this idea.

Human-centred design work starts with understanding

The idea of the course was to learn along the way. It was guided in a clear way and accompanied by well-designed tasks and corresponding course literature. First I thought that there was no further user investigation for my project needed. After all, it was me who felt thrilled by the idea to finally see the interface of TTRF. But I soon understood that it was essential to understand that I as the (soon to be) designer would not be the user. Instead, I would have to interact with real potential users to better understand how I should design my idea. So I designed an interview (a combination of user observation and semi-structured interview) which I conducted with five participants (it was so much fun!). Based on this, I derived personas and scenarios which finally would lead to my initial seven design requirements.

#	Description of requirement	Rationale
1	Include search field (similar to Google) on main page	Participants use Google for their search in Q1 and are familiar to the designs’ functionalities
2	Support in specifying the search terms	Users request support in looking for relevant results
3	Giving a short summary of each article	Participants find short abstract/summaries helpful, which answer practitioner-oriented questions
4	Add a full text availability indicator for articles in the search results	As access issues are common amongst users, this indicator would manage expectations
5	Rating-option for articles/search results	Interview results indicate that users want to have opinions from other practitioners
6	Comment-options for articles	Interview results indicate that users want to have opinions from other practitioners
7	Categories which reflect practitioner perspectives – industry, functional area, target group	Users see existing categories as insufficient and could make better decisions with these additional ones

Envisioning the design solution

After I decided to desing a webpage, I browsed the web for quite some time to test tools for my design work. As you might have guessed from my first sketch, I am not super creative in a way that I have a hard time imagining the design without understanding how the underlying technology would work. So one big step for me during the course was to let go of evaluating the idea for it’s potential (too much of an entrepreneurship focus) and also to let go of imagining how the webpage actually would work in reality (too much of an engineering perspective). After some technical struggles, I came up with three frames for TTRF, based on my design requirements above.

This slideshow requires JavaScript.

All in all, the design solution is a webpage, which was decided based on the user’s context and work practice. The first picture shows the landing page. The design solution has features which resemble internet community functions. Besides the title of the design solution “The Relevant Research Finder”, you can find a profile picture and the note “not logged in”, as well as a menu in the bottom right corner. Here you find three hyperlinks. The “About” link will lead to a subpage explaining more about the TRRF. The “Contribute” link will lead to a page describing how the user can contribute to the project. The “Sign-up” link will lead to a page where user can sign up if they wanted to. The search function is always available, independently of if the user has a profile or not. The next frame shows (as mentioned above) the expanded menu of the Advanced Search. All subpoints can be expanded by clicking on the black arrows, which will reveal the answers to choose from. Answering the questions will be connected to the categories the search results will appear in. So for examples, the question “Which field are you working in?” will have answers which corresponds to the subcategories of the industry category (please refer to the third and last frame on the next page). The last frame in he third picture shows an example of how the search results will look like. Clicking on the search item will start the query process. The user will be led to a partly new page, where an additional menu on the left side appears. Also, search results will appear in the middle. All design requirements are highlighted by corresponding numbers. (3) represents a short summary of an article directly under its title. While (4) is the full-text availability indicator, (5) and (6) are community functionalities, namely recommendation and commenting respectively. Finally, (7) represents the categories, where the (7) in the left menu categorises all results and the (7) below the first article represents the categories for this particular article. All items in the right menu stay the same. The advanced search moves up, and has been placed right below the search bar.

Evaluation of the design and a final polishing

Before handing in the final report for this course, I received a detailed peer-review of my design based on a structured evaluation guideline (and I had to do an evaluation myself, as well). In this evaluation, design solutions had to be tested based on scenarios, a hierarchical task analysis, a streamlined cognitive walkthrough, an heuristic evaluation, and a think aloud. Finally, we ranked the usability problems.

For my final report, I decided to keep the landing page (picture 1 and 2) as it is, especially because there were no design restrictions found in the evaluation. I put my effort into the results page.

The final design solution

First of all, I improved the three elements for interaction with the search results. The icons have been changed to a traffic light for full-text availability indication, a speech bubble for the comment function and a thumb-up icon for recommendations. All icons are accompanied by explanatory text as well as number indication the existing amount of interactions. Secondly, the layout for displaying the search results has been improved. The frames have been reduced as well as the text has been rearranged. Styles and fonts of the text have been adjusted. The display format for the articles appears lighter and easier to read. Also, more space between the menu to the left and the articles has been added. The overall idea was to improve aesthetics and reach a minimalistic design which does not overload the user’s perception. Finally, I adjusted the design of hyperlinks to reach consistency and standards in the design. The user should not have to wonder whether different aspects of the design solution mean the same thing or not.

Implications for my work

What a great distance course this was! In hindsight, it is great to see how I iteratively improved the sketch based on different feedbacks and evaluations. This gave a good overview of the design process and further insights into how to be clear about user requirements. I also used personas and scenarios for the first time. Design thinking is such a buzzword recently and I feel that trying it out has added a lot to my perspective on it. I am completely aware that I am not a professional designer and most probably will never be. But this course resulted in a better undestanding about what designers and developers need to better support me in my projects and how I can improve my input to guide them along the way.