Overview
In this portfolio case study project, my aim was to design an application called 'La Chiave' for the smart working citizens of Milan, provided by the municipality. The app was designed to offer vacant buildings and multipurpose spaces based on different space types, working modalities and amenities. One of the unique features of the app is the "Green Score", based on international standards such as air quality, carbon footprint, energy efficiency or decibel levels, which highlights the sustainability of the spaces. With this project, I wanted to create an easy-to-use and efficient platform that helps citizens find the perfect workspace that meets their needs while contributing to the environment.
Expertise
UX Research, UI Design
Platforms
iOS, Android
Year
2022
Duration
1.5 month
Software used
Framer, Figma
See it live
Preview of the redesigned app
TL;DR
The project created an app called "La Chiave", which offers Milanese citizens access to vacant buildings and multi-purpose spaces for smart working. The app helps users to find and book sustainable workspaces based on different criteria. The following case study explains the decision-making process behind the app and its design, providing insights into the research, ideation and testing phases that led to the final product.
The App
The La Chiave app provides easy access to publicly available spaces in Milan.
Effortless
The booking experience on the app is effortless , contextual, easy to understand and follow
Sustainability
App highlights the sustainability of available spaces through green scores
Discoverability
la Chiave allows users to easily find nearby spaces that suit their needs
About The Brief
The design opportunity to create a platform that provides a sustainable smart work alternative between home and office by allowing users to book scattered third party spaces fit well with the new work from home/hybrid work trend where more and more people are looking for flexible and alternative workspace options outside of the traditional office. The platform aimed to provide a solution to this need by offering a variety of workspaces that were easily accessible and sustainable, thus catering to the changing work culture.
Neighbourhood Workspaces
The platform was designed to show users neighbouring spaces, allowing them to easily find and book spaces nearby (15min city concept).
Match Offer with Demand
By incorporating a booking system, the app ensured that users could always find available spaces that met their requirements, helping to maximise the use of available spaces.
Adequate Facilities
The app focused on detailed filtering and search to help users make an informed decision about which space to book based on their needs.
Process
In this process, our main focus was on understanding the needs of our users. We initiated the redesign by conducting thorough research to analyze the existing market and competitors. Next, we conducted a tree testing exercise to define the information architecture. Then, we ideated the design through wireframes, capturing any outliers that we had missed in the IA, and validated our approach through testing. Once the wireframes and IA were finalized, we proceeded to work on the look and feel of the app, exploring numerous different visual versions. Finally, we created the high fidelity prototype, which allowed us to validate the final design.
methodology visualisation
Smartworking spaces
During our research on coworking spaces, we identified emerging trends and aimed to gain an understanding of the spaces preferred by users, as well as the necessary facilities. As we delved deeper, we explored the concept of the 15-minute city, which considers the working schedules of individuals and the importance of sustainable practices. This notion became a key factor in the development of our final coworking space service.
Relevant Criteria for Coworking Spaces
Pedestrian Access to POI in 15 Minutes
Benchmarking
To develop our coworking space service, we analyzed existing market leaders and the features they offer, as well as their overall approach. Through benchmarking, we were able to identify essential features that our service must have, as well as features that could potentially differentiate la Chiave from its competitors. This process allowed us to create a comprehensive list of features to include.
benchmarking summary
Positioning
To determine the potential area of opportunity for La Chaive, we utilized a positioning graph. This involved placing existing benchmarked services on an X-axis from expensive to cheap and a Y-axis from homogenous to diverse spaces. By plotting these services on the graph, we were able to identify gaps in the market and potential areas where La Chaive could differentiate itself from competitors. This process allowed us to focus our efforts on creating a service that stands out in the market while meeting the needs of our target audience.
Positioning graph
Stakeholder Values
Through our desk and user research, we were able to identify the key values that our stakeholders would require from La Chiave. We discovered that individual stakeholders placed a greater emphasis on the personal work life of citizens, while municipality stakeholders were focused on revenue and service standards. However, we were able to identify four key values that overlapped between the stakeholders, forming the basis for prioritized features that we would address when defining our service.
Stakeholder Values overlap
Mapping the experience
To better understand the user experience, we created three key mapping tools: the User Journey, the Service Journey and the Service Blueprint. The User Journey was designed to identify potential pain points that users might encounter throughout their journey. It provided a detailed perspective from a UX perspective and highlighted design guidance based on the identified pain points. The Service Journey aimed to identify different touch points and interactions between users and service providers. This identification process led to the development of interface elements to connect service providers directly with the user. Finally, the Service Blueprint highlighted the user interaction line and the points at which the service and user would touch. This information was crucial when working on the application interface, as it allowed us to focus on relevant user actions and goals that needed to be supported by the UI. We also identified the behind-the-scenes actions that the service would take in order to implement the presence of these actions in the interface, such as requesting a review after someone has worked at a location, and how this review would be presented to the user.
User Journey
Service Journey
Service Blueprint
Tree Testing
To ensure the logical placement and structure of navigation, actions, and nested functions, we built a preliminary model of the architecture and tested it with tree testing on nine users. The feedback we received from the tree testing revealed that we needed more entry points to enable the same function, such as cancelling a reservation. Additionally, users wanted to revert to standard actions more often than we had anticipated, highlighting the need to differentiate between similar actions. For example, we needed to make a distinction between contacting the space provider and contacting the app developers. These insights were invaluable in refining our approach to user experience and optimizing the service accordingly.
Final Information Architecture
The finalised information architecture graph for the app showcases a clean and simple structure, with a focus on prioritizing simplicity and redundancy. There are four main bottom navigation items that act as the primary entry points into the app's core features, making it easy for users to navigate and access the functionality they need. Additionally, the information architecture includes multiple, correlated entry points into the different sections of the app, which provide redundancy and ensure that users can access the same features from multiple locations. By balancing simplicity and redundancy, the information architecture creates a clear and intuitive structure that makes it easy for users to use the app effectively, while also ensuring that they always have a backup option if they get lost or need to find a feature quickly.
redesigned information architecture
Ideation
During the ideation phase, the team used the Crazy 8 ideation method to generate a wide range of ideas based on the findings of previous research. This approach allowed a large number of ideas to be generated quickly, without getting bogged down in detail or becoming overly attached to any one idea. The resulting wireframe sketches visualised these ideas, making it easy to explore and evaluate different design possibilities. By using this ideation method, the team was able to generate a wide range of ideas and ultimately arrive at a solution that met the user needs and goals identified during the research phase.
Wireframing
Once the initial sketches were created, Figma was used to convert them into low-fidelity wireframe prototypes. This allowed the team to quickly test and refine design concepts before investing too much time and effort in high-fidelity design elements. The low-fidelity wireframes were deliberately simple, using basic shapes and placeholders to represent content and functionality. This allowed the team to focus on the overall layout and structure of the app without being distracted by visual details. By creating low-fidelity wireframes, the team was able to quickly iterate and make changes based on user feedback, resulting in a more refined and effective design.
Testing
During the Testing phase, the low-fidelity wireframes were tested by users to evaluate the effectiveness of the design. The testing involved asking users to complete a series of tasks, such as checking out new places in Navigli and adding the first one to their favourites list, locating the cheapest place nearby, finding a place with specific characteristics using filtering, getting the QR code for their next booking, and changing their default payment method. The results of the testing were largely positive, with users easily able to complete most of the tasks. However, one task was partially unsuccessful, indicating that further refinement was needed to improve the usability of the app. Overall, the testing phase provided valuable feedback that was used to refine and improve the design before moving on to the next phase of development.
home screen - upcoming bookings
using search and filtering
using map for discovery of spaces
adjusting payment settings
Design System
The design system heavily relied on visual imagery from around Milan as inspiration for the entire application, with a focus on standing out while maintaining accessibility-compliant color schemes and high-quality design. This approach ensured that the app was visually appealing while also being user-friendly and accessible to a wide range of users. The result was a unique and engaging design that effectively communicated the app's core functionality and value to users.
Style guide
The final style guide of the app reflects the warm colors of Milan with pops of green to remind users of the app's sustainability aspect. The design features simple and effective components, along with easily recognizable fonts, to ensure that the app is both visually appealing and user-friendly. Overall, the final style guide effectively communicates the app's unique identity while maintaining a focus on usability and accessibility.
benchmarking summary
splash screen & login page
reservation process
home screen
space details
map of locations
search & filtering
navigation
settings
Summary
In the final stages of the La Chiave app design, high-fidelity prototypes were created and tested through several primary tasks. These included locating coworking spaces, reserving a private office, contacting the municipality for donations, and editing or cancelling upcoming reservations. User testing showed that users did not struggle with any of these tasks and were able to complete them with ease, indicating that the design and functionality of the app successfully met the needs of its target audience. Overall, La Chiave's user-centred design approach proved effective in creating a seamless and user-friendly app for reserving coworking spaces in Milan.
When the redesigned La Chiave app was presented to the client, the Intelera Group, they were impressed with the final product. The new design and user experience of the app successfully met their initial objectives. Intelera Group was pleased with the visual identity, simplicity and functionality of the app, as well as the effectiveness of the user-centred design process.
As the designer of the La Chiave app, I am thrilled with the outcome of the design process. Through extensive research, ideation, testing and refinement, we were able to create an app that met the client's requirements and provided a great user experience.
