CBB

This study sought to research how self-service could be implemented in a phone application while supporting different target groups with different needs. Furthermore it sought
to understand how data visualisation could be improved in a phone application, with regard to improving understanding and communication of information to users. The study was based on a collaboration with the telecommunication company CBB. CBB has an application which allows users to control their phone subscription as well as track their data and phone usage.

Process

Six interviews were conducted with CBB customers in various ages, who were users of the app, in order to gain an insight into the customers needs and problems with using the app. From these interviews an affinity diagram was formed, which helped group and categorise the insights from the interviews, so that it could be used to inform the design process. An interview was also carried out with a communications employee at CBB, with the purpose of being able to analyse the customer journey of the onboarding process at CBB, so that it could be understood when and if customers are introduced to the app, and how that might affect their usage of the application.

Based on the findings from the affinity diagram and the customer journey analysis, a how-might-we question was formed, which could be used as the starting point for the design process. CBB’s application was evaluated through a usability study with eight test users, in the beginning of the design process, in order to gain an insight into how users use the app and which areas needed to be improved upon. The usability study was carried out through a within-subject design, where each test users was given every task. The test was conducted synchronously as a concurrent think-aloud test with a testmonitor to guide the test user as well as predefined tasks that covered the primary functions of the application.

Following the usability test a sketching process started which had the purpose of exploring various solutions and concepts. The sketches were evaluated through the NAF method, and then combined into a wireframe. A design language was then defined in order to facilitate the creation of a unified interface design, which would still reflect CBB’s branding and identity. This was further designed to create a consistent system image that could support users' interpretation of the mobile application, for example the formation of an appropriate mental model. From the wireframe a prototype was created which was evaluated through another usability study using the same test users and approach as the first usability study.

The results of the two usability studies showed that there were 21 usability problems with CBB’s current application, and only 6 usability-problems with the redesigned prototype. Furthermore it was found that users found it easier to navigate and find help in the prototype compared to CBB’s application, which also contributed to making it easier to understand the data visualisation in the app, since it was more clear which data belonged to which category in the visualisation. It was also found that the primary self-service page in the prototype was difficult to find, which hindered the users’ way of solving problems themselves. However test users found it easier to find a way to contact CBB’s customer service, and especially younger test users appreciated the opportunity to contact customer service through a live chat.

Design

In the use of colours, the design principle of aesthetic usability was considered, which meant that colours were used carefully and specifically, so that only important elements were highlighted and so that colours were not overwhelming.

In relation to typography, an appropriate font should be found, as a font with an inappropriate expression could have a negative effect on users 'perception, as its interface and aesthetic expression affect users' perception of a system's usability. It was further necessary to find a font that could be scaled in different sizes without compromising readability, as the font had to be used on a mobile application where screen space is limited. Based on this, a neutral font called Lato was chosen.

With buttons, three different types were designed so that there was flexibility in their use, where they could be used differently in the mobile application depending on their function and location. The buttons were coloured with a light blue color, which was intended to create a consistent use of color for interactive components, so that users could better create appropriate mental models of the system image.

Gallery

This section provides images related to this project, such as sketches, wireframes, screenshots and similar. Click on an image to view the full size.