UX/UI – eService & Blankett App (Case Study)

Project: 

A mobile app for the eService & Blankett website.

App Name: 

eService & Blankett App

The programs used in this project:
  • Figma
  • Adobe Photoshop
  • Adobe Illustrator
My role:

UX and UI designer

The brief:

To create the app version of the eService & blankett website from Helsingborg municipality. This project is a time-based design challenge from HbgWorks (less than 10 hours). The brief of this project is to analyse the website and translate the features to fit the app version. To create the concept and provide the solution with a clickable prototype.

The solution:

For the UX area of this project, I focused on user interviews (user journey), creating the concept of the app, determining the important keyword of the app, and creating a persona. I started the design process by trying to solve 3 questions:


User Interviews

Since it’s a time-based challenge, the opportunity to do proper research was quite limited. So the user’s interview has only been done with 2 individuals.

User interview was done by asking them about the “eService & blankett” website and discussing what features they expect to get from the app version. I also asked the individuals to create their own user journey, with a specific scenario: They want to apply for kindergarten for their children.


App Concept

To create an app that is action-based where Helsingborg’s residents can safely apply or send applications easily to different offices within Helsingborg municipality from their phones, without needing to go through different websites. They can also monitor all the applications they have submitted easily in one place. I envision this app would start with a few services that the user can apply for at first, then it will grow with time. In the end, it will centralise the application system for whole project areas within Helsingborg municipality.


Main Keywords

I created a few keywords that would be the vision of the app, which are: easy, centralised, convenient, safe, and action-based.


User Journey

As part of the user interview, I asked the individuals to create their own journeys when trying to do a certain task in the app based on the scenario mentioned above. In this case, I asked them to draw a flow of the app when they want to apply for kindergarten for their daughter.

This process gives me valuable insights into what are intuitive for the users and what they expect the app will show.


ProtoPersona

Because of the lack of time to do more intensive work of research on the intended users, based on the small sample of interviews, I created a proto-persona to represent the user that my prototype is aiming for.


Lo-Fi Wireframes

Lo-fi wireframe was then created to sketch out ideas of how the layout and the flow of the app would be.


Wireframes

To explain the flow even further, I created a wireframe to show the different steps that the users have to do to complete their tasks. This wireframe focused specifically on the scenario discussed with the individuals interviewed before.


Main Screen – UI Design
Main screen UI design. Click on the image to zoom in

For the main UI look, I try to use the same design system provided by HbgWorks, which is also used on the “eService & blanket” website. This includes the typography, the graphical elements and image assets.

Since this app is supposed to evolve and get more and more content with time, the design has to be able to grow with minimum change or no change at all. That’s why the menu tab area has only 3 options. So, in the future, it can grow easily and drastic changes would not be needed. The same approach is also done for the content cards where each card can be easily added with more options with small changes.


Conclusion/Reflection

From the brief given, I feel that my design suggestion is quite appropriate. I tried to base all my decisions on the research results and based the functionality of the actual website. Of course, more intensive user research and also usability tests will help to make the app that would be beneficial to the users. I also tried to focus on accessibility, by making sure the main screen has a high colour contrast and reducing the dependency on colour by adding extra elements such as an icon to the clickable card.

UX/UI – eService & Blankett App (Case Study)