Bluetick — A UX Case Study

Amid the Covid-19 outbreak this year, fellow students and I were enrolled in the minor User Experience Design. About the time that we were getting accustomed to the new situation of working and studying at home, the end of the minor was already near. With time plenty, our focus was on the final course of the minor called the “Mastertest”. During this course we had to combine our gained knowledge and skills, and work full-time on a design challenge opposed by an external stakeholder. Different challenges were available to us, but we chose the challenge presented by Bluetick.

Bluetick is a scale-up company in legal tech that has developed a state of the art AI search engine for jurisprudence. The platform has been launched for some time now and it is constantly changing to work optimally. The platform primarily focusses on the Dutch market and therefore their website is in Dutch (Dutch terms will be explained when necessary).

Platform impression (1/2)

Platform impression (2/2)

The initial challenge required us to propose a design feature that could facilitate the users to collaborate and work more efficiently. This project started in May and ended in June. However, this won’t be the project that will be covered in this story. A far more interesting project was also running behind the scenes. Around the same time the guys at Bluetick were hinting and sharing an interest in a mobile app. A lot of uncertainty and many questions was/were involved in this quest, so an app wasn’t a priority. I was very enthusiastic about this project once I found out about it. I was eager to take the opportunity.

The challenge

This case study was aimed at designing and prototyping the mobile app of the Bluetick platform. The requirements stated were to (1) design an app that is similar or at least includes the most important functions. Another requirement (2) was that the overall tone of voice, look & feel are appropriate and are an extension of the existing platform. The latter didn’t result in any complications however, the former requirement made designing the mobile app complicated. This problem was not specific to just this case study. It is believed that this is often an issue when replicating a digital product for a different device.

Key deliverables

• User Story
• Scenario’s
• User Flow
• Prototype
• Presentation to Bluetick

User story

As a lawyer, I want to be able to access all my files (dossiers in dutch). I need to see the most recently edited files, the contents (jurisprudentie in dutch) of the files, and the highlights. Also, I’d like to be able to make some changes to these files and its contents when necessary. It would be ideal if It would be possible to do all of the above on the fly.

Scenario’s

1. On the fly /commuting — users are on the road quite a lot (e.g. commuting to the office, to the client, to court).
2. Before court — users spend some time preparing statements that they will use to make their case (e.g. taking some time before going in to court to briefly go through the preparation again).
3. After court — users spend time on their devices to prepare for a case that will happen in the near future (e.g. find new jurisprudence that might be relevant for a particular case).

User flow

Suggested concept

The design process resulted in a high fidelity prototype made with Figma. Some of the key flows are shown below in the designs. All flows will be discussed in summary.

Splash (screen), Landing & Home

You may have noticed from the platform impressions I shared earlier that Bluetick’s design is very clean, yet informal. This clean and informal design is due to the round shapes, easy colors and good use of (white/negative) space. These aspects are important and was paid a lot of attention to in the design of the app. The flow below shows the user when logging into the app. Horizontal scrolling behaviour is available on most screens.

New File (Nieuw Dossier)

The home screen is the most important screen in this design. With the scenario’s taken into account, I was under the impression that 3 features should immediately be accessible from the home screen.

1. Reviewing/editing an existing file (dutch: dossier).
2. Access the reading list (dutch: leeslijst).
3. To issue a new file (dossier).

Below is an example of the flow when issuing a new file and adding some filters to the first search query.

Jurisprudence (Uitspraken)

Readability was a challenge on the lowest level of the app. Comparative analysis led to the function to increase the font size with a single click (also, in settings there is an option available that set the default font to big). The highlight option is still available in the app for some on the fly editing. User interviews also gave rise to the idea to include a search function (control-f) depicted in the lower right corner.

Search Function

Last but not least; the search function. It was expected that the search function wouldn’t be used in the same way compared to when a user is working on a computer. More specifically, users would not conduct an in-depth search/research. This was expected because doing such research on a mobile device just isn’t efficient. This was something that users would mostly do on a laptop/desktop. However, I didn’t want to exclude the possibility to conduct a broad search that’s why it’s build into the design, but less prevalent than the functions that are more important.

Outcome

The designed Bluetick app was received very positively by the client. Some critical in-depth questions were asked during the presentation that were not necessarily on the design but more on how to put this in practice (e.g. should the app be offered to users only, or use it as a sample to gain more users?).

Thank you for reading this far! Let me know if you have any questions or comments on my design and/or if you’d like to discuss design related I’d be more than willing.

Future recommendations

• In the next project I will be paying more attention to the testing phase, both early in the process and in a later stage.
• Creating a design system (more experienced UX designers use design systems. This could contribute to the outcome of each project).

Next up: Omgevingsweb — Mobile App