UX/UI redesign of two mobile applications for the education sector

Optimising the usability and updating the aesthetics of two existing mobile applications.

In the dynamic environment of the education sector, the demand for effective communication has evolved into the purely digital realm. Interaction between teachers, the educational institution and families is essential in the daily routine. For this reason, iterations in digital products are constant; we are always exploring new ways to refine these tools and adapt them to the changing needs of users and their different contexts of use.

PROBLEM

Our client currently has two mobile applications, used on both Android and iOS devices. The first app is intended for use by students’ families, while the second is intended for use by teachers. Although both applications perform their functions adequately and have a solid information architecture, the client identified a significant improvement opportunity in the visual domain, which impacted on the perceived usability of the digital product.

The design of both applications was not visually appealing, and it is precisely in this area that our client seeks to make substantial improvements. Recognising the importance of a visually appealing interface, we embarked on an upgrade process that would take into account the presentation layer, while improving the usability of the digital product in some critical processes for both teachers and families.

CHALLENGE

Therefore, the challenge posed by the client was as ambitious as it was motivating: How could we improve the usability and aesthetics of these applications while maintaining their functionality?

OBJECTIVES

Raise the user experience to new levels of aesthetics and usability to transform the appearance of these digital products, also improving friction points of certain processes, pain points that made the product not easy to use in some contexts. 

To make the application not only perform its functions efficiently as it already did, but also to optimise certain aspects without losing sight of generating a captivating visual impact on our users. And all this, without generating a negative impact on those end users, since they were already used to using the processes available in the product with great frequency.

METHODOLOGY

Stage 0: Research

Following the methodology we work with at Thinkers, we started the project with a Kick Off meeting with the client, using the Design Thinking methodology, to carry out a preliminary analysis of the situation and the needs that led to this session.

Outline of the double-diamond methodology we follow at Thinkers Outline of the double-diamond methodology we follow at Thinkers

With this session we managed to specify some basic aspects to guide the design work, in order to clarify and document a clear vision of the client’s expectations and the result to be achieved with the new design:

  1. The business and product objectives
  2. A more precise understanding of the desired scope of the final solution, based on data collected by the client in the use of previous solutions 
  3. The constraints of the project (technical, time, operational, etc.).

During this session, we worked on turning a more general project idea (improving the usability and user interface of an existing product) into a design challenge: transforming the user experience of the product by improving the landing of new users and the management of some critical processes.

Once this alignment with the business has been established, as part of the research, we dive into a detailed study of the current applications. Firstly, we conducted an analysis of the information architecture and the operation of each functionality in both the family and teacher applications. We identified the key differences between the two to ensure a complete understanding of all existing elements that impacted on the design of the user experience.

Secondly, we undertook a competitive analysis (Benchmarking) of some competitors identified by our client, evaluating their different strategies and gathering inspiration and examples of good practice of digital products in the sector. This exercise gave us valuable insight into practices that we could potentially incorporate into the new solution and served as a source of inspiration for the revamped design, of course, knowing that this is only a market benchmark but the needs, expectations and motivations of our users are unique and should be treated as such.

Screenshot of some of the competing solutions analysed during the research phase.

Screenshot of some of the competing solutions analysed during the research phase.

These analysed solutions and market ideas were discussed and prioritised with the client, to ensure which proposals could be accommodated in the new redesign based on user impact and implementation complexity, and which we prioritised in the existing product roadmap.

Stage 1: First UX designs

After the exhaustive research, we proceeded to start with the iterative design process itself, redesigning the first prototypes and presenting the client with various design proposals for the elements to be improved in different processes of the application. During this initial design phase, we collaborated closely with the client, holding feedback sessions and incorporating their comments and making the necessary adjustments in an agile process.

At this crucial stage, key features were established that laid the bases for the new visual design:

  • New colour palette for the redesign: This was closely linked to the application logos and other shades already in use in the company.
  • Incorporation of new visual elements: Organic curved shapes, already present in other company platforms, were introduced.
  • Typography: It was decided to keep the typographies of the Android and IOS systems to facilitate implementation.

All of these decisions were made in order to follow one of the key principles of design: visual consistency. This principle dictates that all of a company’s digital applications should maintain a consistent look and feel and functionality. Consistency not only facilitates navigation and improves usability per se, but also reinforces brand identity, speeds up the development process and builds greater trust among end users of the product. 

It was therefore critical for us to achieve this balance of visual consistency between other products and the specific needs identified for these two applications.

Stage 2: Design iteration and initial support from the development team.

Once the idea for the UX/UI redesign was in focus, we started to engage the client’s development team. We not only wanted to get their feedback on the implementation, but also to understand the technical and resource constraints from their point of view, as well as to recognise critical features to consider before handing over the design to the technical teams.

Following these sessions with the team, we iterated some aspects that were necessary and carried out several tests, including a tablet-specific version, allowing us to ensure how the design would look in different formats before final development.  

Example of different screens with a tablet format Example of different screens with a tablet format

This collaborative and iterative approach not only improved the quality of the design, but also ensured alignment with the capabilities and considerations of the technical team, thus ensuring a more appropriate handover and a more successful implementation

Stage 3: Final UI design

The main distinction between the applications for teachers and families lies in certain functionalities represented by cards and variations in the color palette. Below, we detail the most notable changes implemented in both applications, with a comparison between the previous design and the executed redesign.

Comparison of before and after redesigning the main screen of the families application. Comparison of before and after redesigning the main screen of the families application.

First, we highlight the reorganization of elements in the top menu. For example, the exit button was placed in the top right corner, following a familiar standard suitable to the mental model of users accustomed to other applications.

In relation to the header, the restructuring of elements stands out. Usability was improved by replacing the unintuitive drop-down to select another student with one more common in other platforms (again, adaptation to the mental models of users to reduce cognitive load), with rounded corners that convey friendliness, highlighting the school nature of the application.

Both in the header and footer, curved graphic elements were incorporated, bringing dynamism to the application and maintaining visual coherence with the company’s previous implementations.

In the cards for the different functionalities, we chose to split the icon and the title/subtitles, seeking to improve usability and make the text easier to read. As for the style of the icons, a minimalist approach was adopted, consistent with other company icons, and the organic shapes behind them emphasised dynamism and allowed the design to be consistent, regardless of which functionalities each school engages with. 

A similar design was implemented for each functionality, maintaining visual consistency with the home screen and ensuring visual uniformity of all elements, which directly impacts the usability of the product.

Comparison of before and after redesigning one of the detail screens of the families application. Comparison of before and after redesigning one of the detail screens of the families application.

 

Stage 4: Implementation

With the design phase completed, we come to the final stage: implementation. In this phase, we provide the client’s development team with all the necessary documentation, including the various components created during the redesign.

Throughout the entire process, we maintained direct communication with them, addressing any questions that arose and, ultimately, overseeing the implementation to ensure fidelity to the prototype.

As the developers executed the new design, a thorough review of the design was also carried out to correct small errors in the application, such as distances and colours. These fine adjustments, however small they may seem, are what really make a difference to the user experience.

CONCLUSIONS

In summary, the UX/UI redesign project of the client’s mobile applications has been successfully completed, improving both aesthetics and usability

Through a process driven by research from a business and market perspective, iterative design focused on looking at successive approaches to the solution and constant feedback with the business and development team, we managed to maintain and improve core functionality. The visual consistency has strengthened the brand identity, creating a more harmonious and engaging experience for users in their different contexts. 

Thinkers is excited about the positive impact this transformation will bring to our client. If you also want to redesign one of your digital platforms, contact us!

Otros Blogs