Mobile Digital Library
UNA-SUS/UFMA is one of the pioneering institutions in the history of the UNA-SUS (Open University of the Unified Health System) Network, a project of the Brazilian Ministry of Health. In this project, I worked as head of the UI team, proposing the interaction flow of a mobile digital library the provides users with enjoyable learning experiences, while consuming different learning artifacts.
Keywords
Quantiative Analysis
Qualitative Analysis
Competitive Audit
Literature Review
Interviews
Information Architecture
Wireframing
Prototyping
Design Patterns
Functional Testing
Team
UNA-SUS/UFMA
Role
UX/UI Lead Designer
Location
Brazil – Remote
Timeline
November 2021 – December 2022
Problem: How to support students when consuming resources (eBooks, podcasts, games, videos, others) related to online courses within an educational platform?
Solution: A mobile digital library that encompasses several online resources to be consumed by students. Students will use the app to find resources and consume them online inside the app.
Methodology
The design process considered four main stages: understand, define, design and evaluate. This process was based on the user centered design process and aimed at meeting the needs of end users within the UNA-SUS/UFMA company. During the understand phase, user research was carried out, while understanding the problem domain. During the define phase, we organized the obtained data and characterized the project in terms of problem and goals. Then, we produced user flows, the information architecture, wireframes and prototypes during the design phase. Finally, we evaluated our proposal with end-users.
Execution and Results
(UNDERSTAND)
01A
We carried out semi-structured interviews to gather data regarding what UNA-SUS intended for the mobile digital library. We asked managers why they wanted to develop a mobile digital library given that they had virtual learning environments that students could use. Clients wanted to provide easier access to the coursers that were being offered by UNA-SUS in a way that they could attract more students once they saw the quality of the resources and that by completing courses, they could get degrees and certificates.
(UNDERSTAND)
01B
Clients indicated the need to improve the access of the of students to the resources. We also analyzed the documentation of the goals of the UNA-SUS/UFMA company, understanding its main goals and principles.
(UNDERSTAND)
01C
We carried out a competitive audit to identify what features / requirements were being proposed in similar applications. After analyzing 20 Brazilian an International mobile digital libraries, we identified 14 requirements:
- (RF01) The system must provide general information for each resource (Title, Abstract, Authors, Rating, Image);
- (RF02) The system must provide a resource catalog;
- (RF03) The system should allow searching for a resource in the catalog;
- (RF04) The system must present information about the Terms and Conditions of Use;
- (RF05) The system must provide a dictionary function;
- (RF06) The system should allow creating, editing, highlighting of notes/comments;
- (RF07) The system must have a shelf with favorite features;
- (RF08) The system must have a shelf with a history of consumption to facilitate access to resources consumed and with consumption in progress;
- (RF09) The system should provide a list of news;
- (RF10) The system should provide a list of recommendations;
- (RF11) The system should present information on resource consumption statistics;
- (RF12) The system must have features to engage the student, such as competition and gamification;
- (RF13) The system should allow using the resources offline; and
- (RF14) The system should allow the user to evaluate a resource.
Also, we considered the comments from users in mobile app stores (i.e. apple store, google play) regarding the identified apps during our competitive audit. For instance, we show two comments, one positive and one negative regarding the considered digital libraries.
(UNDERSTAND)
01D
We carried out a qualitative analysis, looking for patterns in terms of features that users considered relevant (either should be included or avoided during development) in mobile digital libraries. For instance, the comments made by end users, allowed us to identify new features in terms of functionalities and quality of use attributes that could be included in our proposal for a mobile digital library.
(DEFINE)
02A
We analyzed the data from the interviews, competitive audit, user comments and document analysis to define which problems users needed support with.
The goal of the Digital Library is to allow finding educational resources and providing an enjoyable learning experience.
(DEFINE)
02B
Value propositions summarize why a consumer should use a product or service. We defined what the mobile digital library provides users and how it addresses users’ pain points.
Also, we defined user stories according to the roles that users could play in the system, to make sure that we were addressing and solving the key problems our users might face when engaging with the mobile digital library.
(DESIGN)
03A
We proposed user flows using adapted activity diagrams to display the complete path a user takes when using a product. The user flow lays out the user’s movement through the product, mapping out each and every step the user takes. We used these flows to guide the identification of screens and, later, the proposal of wireframes and prototypes.
The user flow presented in this page is related to find and view resource functionality for a student type user.
(DESIGN)
03B
We proposed the information architecture for organizing, structuring, and labeling content in an effective way. Our goal was to help users find information and complete tasks.
The information architecture presented in this page displays pages and interactions of the mobile digital library from the point of view of a Student user.
(DESIGN)
03C
A storyboard is an artifact that helps outline an ideal flow for the design. Storyboards use a series of panels or frames that visually describe and explore a user’s experience with a product. The four key elements of a storyboard are the character, the scene, the plot, and the narrative. Considering our goal: allow students to quickly and easily find and access digital resources; we have built the following storyboard.
In the first panel, in the top left of the page, Luis, a doctor enrolled in an online medical specialization course at UNASUS, is examining a patient and wants to show a video he saw on one of his medical courses. In the second panel, Luis remembers that he can find the video in the mobile digital library without having to remember the course in which he saw it. Next, in the panel on the top right of the page, Luis opens the mobile digital library on his phone. In the fourth panel on the bottom left of the page, Luis selects video as filters and enters the topic he is searching for. The fifth panel shows a zoom of the app with a list of related videos and a play button. In the final panel, Luis and the patient are watching the video together and Luis is explaining medical terms to the patient.
(DESIGN)
03D
A wireframe is a basic outline of a digital experience. In this project, we used them to establish the basic structure of the pages and to highlight the intended function of each element.
The wireframe presented in this page is low fidelity and digital wireframe of one of three pages for searching an educational resource. This functionality is presented to students.
(DESIGN)
03E
A prototype is an early model of a product that demonstrates its functionality, without actually building the entire product. We developed prototype for the mobile digital library that showed stakeholders and potential users what our design idea could do. Users interacted with the prototype and we refined it to meet the users needs.
The prototype presented in this step shows two functionalities: (top) searching for educational resources by filters or categories; (bottom) evaluating an educational resource leaving comments. As the app is Brazilian, the high-fidelity prototypes are in Portuguese.
(EVALUATION)
04A
We applied usability evaluation, where end-users tried the user interface. We planned the evaluation and defined which tasks users would perform. Also. We evaluated heuristics and usability rules / recommendations. We considered the Quality Criteria in terms of usability, UX and ease of use that we identified at the beginning of our UX research to verify the interaction flow during test cases. Here, we show an example of the tasks we asked users to perform during the evaluation.
(EVALUATION)
04B
At the end of the evaluation sessions, users provided a report with their notes on their experience. Also, they filled a form in which they indicated the degree to which they believed the application met usability rules. End users also participated in interviews to provide feedback on their user experience post use. The goal was to verify their satisfaction with the mobile application to carry out the tasks. Overall, the users indicated that the system met their expectations, while suggesting maintaining some of the design suggestions or making changes and why. Some of the comments made by the participants are presented in this step.
- The End -
Interaction design has become a valuable part of my workflow as a UX/UI designer. I carried out the research and planned and led the digital sketching of the mobile digital library at UNA-SUS. A main takeaway from this experience was that you need to have a deep understanding of end-users to meet their expectations. Competitive audit is useful, but knowing the specific context of the proposed application and who is going to use it is crucial in order to design an outstanding experience that solves end-users’ problems.