POLIMI LIBRARY was developed during DIGITAL DESIGN STUDIO at Politecnico di Milano. We were assigned an app to conduct usability testing and analysis on its original design, followed by making improvements. Our design process followed a strict working method, including defining a new app information structure based on the results of card sorting and tree testing. We conducted user testing and analysis for each design stage, including wireframes and hi-fi prototypes.
Tools and Skills
I have learnt, applied, and improved the following tools and skills through this project.
Tools : Figma, Adobe Illustrator, Useberry, RawGraph, Excel
Skills : User Experience Research(UXR), User Experience Design(UXD), User Intereface Design(UI), Usability Analysis, User Test, Wireframes
Usability Analysis
Methodology
To analyze the original app-POLIMI LIBRARY, we initially created an information architecture to provide us with an overview of the app. We then identified the most crucial pages and conducted a heuristic evaluation, using the Nielsen 10 as our reference. Following the heuristic evaluation, we invited six users to participate in user testing. Finally, we analyzed the results from both our inspection as evaluators and from the users’ perspectives to prepare for the next step, which is redesigning the app.
Information Architecture Analysis
Heuristic Evaluation (divided by main functions)
User Test Planning
Previous
Next
User Tests
Redesign
Methodology
Considering as a starting points the key findings and recommendations in the previous stage, and in order to validate the proposed redeisgn solution, we applied several UX tools as to maintain the focus on a user-centered design approach. Users were actually involved in each step of the redesign activity.
As first step, we used “open card sorting” method and “tree testing” method to obtain insights about users’ mental models, especially related to process when we created the new information architecture. To confirmed the final information architecture, we produced 4 version according to the results from both UX tools.
Results of “open card sorting”
Result of 2 rounds “tree testing”
Result of 2 rounds “tree testing”
Final version of New Information Architecture
As next step, we translated the information Architecture into wireframes, as to test both the hierarchy of information and the smoothness of interaction. This process was also carried out with the use of heatmaps, clicks counting and success rate of tasks performance.
Lo-Fi wireframe examples
Lo-Fi wireframe tests
Mid-Fi wireframe examples
Mid-Fi wireframe tests
Hi-Fi prototype
Previous
Next
Hi-Fi Pilot Tests
Design System
Design System : Atoms
Design System : Moleclues
Design System : Organisms
Dark Mode
Responsive
UI Prototype
Team Members
Carlotta Castenetto
Federica Sciretta
Xiyuan Hu
Letizia Bianchini