IoT Mobile App
Design onboarding for an app that pairs with and manages an e-ink price display.
About the Project
Project Specifications
PriceLink is the innovative solution proposed by Fortech S.r.l. to address the requirement of displaying national and regional average fuel prices at gas stations, a regulation mandated in Italy as of August 1, 2023. This project combined two design aspects: the product (Physical Device - Price Display with e-ink technology), developed by the Production Team, and the software (Mobile App), developed by the Marketing Team. I served as the point of contact for UX and UI design within the Marketing Team. I introduced solutions to enhance configuration and usability. I collaborated closely with the Mobile Development team to integrate a new section into an existing application.
Duration: 2 Months
Significance of the project:
With the requirement to display average prices, all operators are obligated to find a practical and non-invasive solution, especially for unmanned facilities, to avoid government penalties. Installing an additional price display device is expensive and necessitates installation by trained technicians equipped with the appropriate equipment, which incurs costs for the manager. Daily price updates are sourced from an online government database, which would compel operators to visit the site daily and manually transcribe prices in a rudimentary manner.
About Company
Fortech was set up in 2006 from the synergic collaboration of professionals who had long been working in the field of fuel distribution.
Various giants in the field of petrol distribution have decided to rely on us for the Fortech know-how and professionalism, building solid and long lasting partnerships.
Fortech today is market leader in Italy providing customized solutions to improve business performance of single service stations, fuel retail networks and large petrol companies.
In the last few years, Fortech has also started a process of internationalization, which, thanks to various partnerships, has led it to establish bases in various foreign countries.
Project Execution
Tools
- Figma
- Notion
- FlowMapp
- Adobe Illustrator
- Adobe Photoshop
- MockView
Roles
- User Experience (UX) Designer
- Interaction (IxD) Designer
- User Interface (UI) Designer
- Visual Designer
Deliverables
- Competitive Analysis
- Personas
- Storyboard
- User Flow
- High-fidelity mockups
- Usability tests and findings
Research & Discovery
Competitive Analysis
I initiated this project with a fundamental question in mind: What complexities might arise when designing a gasoline price display? This question led me to explore further inquiries, such as, "How can we streamline the installation of a new panel?" and "Is it conceivable to make it as user-friendly as a home automation light bulb?" In my quest for answers, I delved into the portfolios of prominent panel manufacturers, envisioning the gasoline price display evolving into a smart, intuitive picture.
(Dribble)
Persona
When envisioning our product as a home automation device, a critical question arises: who is our target user persona? To address this, I've delved into the characteristics of Fortech S.r.l.'s primary customer base and developed a representative persona. This persona is expected to take on the responsibility for independently installing the device. Notably, this individual lacks professional technical expertise and may possess limited computer skills.
Current Design System
The guidelines for designing the configuration application were strict: users had to use an existing application provided by the company for a different service to integrate PriceLink. The challenges in this task stemmed from adapting to a rather outdated user interface (UI) because the company had postponed the UI redesign until after the product launch. Consequently, the UI Kit was already well-established, and my role primarily involved designing a distinct visualization.
What I found out?
The "SiteManager" app for iOS and Android is quite outdated and hasn't received significant updates for a long time. This establishes constraints for developers and designers, as the company isn't considering a complete rebuild of the app. The user interface, while basic, maintains consistency across the platform. However, the lack of a home page complicates navigation through the various services offered by the company. Moreover, the app becomes confusing for users managing multiple facilities, due to the absence of dynamic navigation between these facilities.
Design Process
Storyboard
To be clearer about what the full path of this experience was, I worked on storyboards, which helped the whole team involved understand where the main complexities could arise. This helped the CTO make more focused decisions in even the smallest gestures.
User Flow
Following the creation of a fairly extensive storyboard, I delved into envisioning an optimal user flow that could seamlessly integrate the product experience with the software. The primary challenges I faced revolved around the dedicated configuration application. Since it was outdated, and the company had no plans for a simultaneous redesign during development, I had to make certain design compromises. After presenting these concerns to the stakeholders, the decision was made to proceed despite the constraints imposed by the tight schedule.
High-Fidelity Wireframes
The primary goal of this project was to deliver a user-friendly and visually captivating experience. Leveraging a comprehensive user research phase, I gained deep insights into user behaviors, needs, and pain points. These insights informed the creation of an intuitive and aesthetically onboarding interface. Through meticulous attention to detail, I crafted a high-fidelity prototype that not only met but exceeded the project's objectives. The resulting Mobile IoT app is a testament to the fusion of advanced technology and user-centered design, offering users a seamless and delightful experience in managing their IoT devices.
Testing
Usability Testing
The phase of testing with real users was skipped because of the pressing need to have the product ready for deployment as soon as possible. As a result, the company might be exposed to unforeseen challenges that users could encounter when interacting with the application. This is particularly concerning during critical processes such as device association, where user feedback is crucial to identify and rectify usability issues. The omission of this testing phase means that certain user experience problems, which could have been identified and addressed through user feedback, might remain unresolved, potentially affecting the overall effectiveness and user satisfaction with the application.
Research & Discovery
Competitive Analysis
I initiated this project with a fundamental question in mind: What complexities might arise when designing a gasoline price display? This question led me to explore further inquiries, such as, "How can we streamline the installation of a new panel?" and "Is it conceivable to make it as user-friendly as a home automation light bulb?" In my quest for answers, I delved into the portfolios of prominent panel manufacturers, envisioning the gasoline price display evolving into a smart, intuitive picture.
(Dribble)
Persona
When envisioning our product as a home automation device, a critical question arises: who is our target user persona? To address this, I've delved into the characteristics of Fortech S.r.l.'s primary customer base and developed a representative persona. This persona is expected to take on the responsibility for independently installing the device. Notably, this individual lacks professional technical expertise and may possess limited computer skills.
Current Design System
The guidelines for designing the configuration application were strict: users had to use an existing application provided by the company for a different service to integrate PriceLink. The challenges in this task stemmed from adapting to a rather outdated user interface (UI) because the company had postponed the UI redesign until after the product launch. Consequently, the UI Kit was already well-established, and my role primarily involved designing a distinct visualization.
What I found out?
The "SiteManager" app for iOS and Android is quite outdated and hasn't received significant updates for a long time. This establishes constraints for developers and designers, as the company isn't considering a complete rebuild of the app. The user interface, while basic, maintains consistency across the platform. However, the lack of a home page complicates navigation through the various services offered by the company. Moreover, the app becomes confusing for users managing multiple facilities, due to the absence of dynamic navigation between these facilities.
Design Process
Storyboard
To be clearer about what the full path of this experience was, I worked on storyboards, which helped the whole team involved understand where the main complexities could arise. This helped the CTO make more focused decisions in even the smallest gestures.
User Flow
Following the creation of a fairly extensive storyboard, I delved into envisioning an optimal user flow that could seamlessly integrate the product experience with the software. The primary challenges I faced revolved around the dedicated configuration application. Since it was outdated, and the company had no plans for a simultaneous redesign during development, I had to make certain design compromises. After presenting these concerns to the stakeholders, the decision was made to proceed despite the constraints imposed by the tight schedule.
High-Fidelity Wireframes
The primary goal of this project was to deliver a user-friendly and visually captivating experience. Leveraging a comprehensive user research phase, I gained deep insights into user behaviors, needs, and pain points. These insights informed the creation of an intuitive and aesthetically onboarding interface. Through meticulous attention to detail, I crafted a high-fidelity prototype that not only met but exceeded the project's objectives. The resulting Mobile IoT app is a testament to the fusion of advanced technology and user-centered design, offering users a seamless and delightful experience in managing their IoT devices.
Testing
Usability Testing
The phase of testing with real users was skipped because of the pressing need to have the product ready for deployment as soon as possible. As a result, the company might be exposed to unforeseen challenges that users could encounter when interacting with the application. This is particularly concerning during critical processes such as device association, where user feedback is crucial to identify and rectify usability issues. The omission of this testing phase means that certain user experience problems, which could have been identified and addressed through user feedback, might remain unresolved, potentially affecting the overall effectiveness and user satisfaction with the application.
Conclusions
Problems
Throughout the project, not all functionalities were defined from the start. This required us to maintain a flexible design adaptable to ongoing changes in direction from the sponsor, employing a minimal and least intrusive approach.
The multi-step form was designed to be divisible into two parts in case the product's elements needed configuration in two separate phases.
Unlike home automation products, this product has only one configuration pathway. This could pose issues if that method does not work for the user.
What I learned
I believed that the implementation of such an important feature like Pricelink would lead the company towards more substantial development, but sometimes, in the race to be ahead of others, fundamental steps are skipped, risking becoming the main issues in the user experience.
The important thing is, therefore, to work with what we have and try to bring out the best possible. If I don't have the materials and resources to build a skyscraper, I must be able to build the best possible house.
How I faced the major challanges
The biggest challenge was designing everything within tight deadlines (10 days) and constantly adapting to the developers' evolving requirements as they progressed with the development of protocols and processes. This led to frequent changes in the desired outcomes, almost every day, and much of the work done was evaluated in multiple phases, taking into account all possible scenarios.
Research & Discovery
Competitive Analysis
I initiated this project with a fundamental question in mind: What complexities might arise when designing a gasoline price display? This question led me to explore further inquiries, such as, "How can we streamline the installation of a new panel?" and "Is it conceivable to make it as user-friendly as a home automation light bulb?" In my quest for answers, I delved into the portfolios of prominent panel manufacturers, envisioning the gasoline price display evolving into a smart, intuitive picture.
(Dribble)
Persona
When envisioning our product as a home automation device, a critical question arises: who is our target user persona? To address this, I've delved into the characteristics of Fortech S.r.l.'s primary customer base and developed a representative persona. This persona is expected to take on the responsibility for independently installing the device. Notably, this individual lacks professional technical expertise and may possess limited computer skills.
Current Design System
The guidelines for designing the configuration application were strict: users had to use an existing application provided by the company for a different service to integrate PriceLink. The challenges in this task stemmed from adapting to a rather outdated user interface (UI) because the company had postponed the UI redesign until after the product launch. Consequently, the UI Kit was already well-established, and my role primarily involved designing a distinct visualization.
What I found out?
The "SiteManager" app for iOS and Android is quite outdated and hasn't received significant updates for a long time. This establishes constraints for developers and designers, as the company isn't considering a complete rebuild of the app. The user interface, while basic, maintains consistency across the platform. However, the lack of a home page complicates navigation through the various services offered by the company. Moreover, the app becomes confusing for users managing multiple facilities, due to the absence of dynamic navigation between these facilities.
Design Process
Storyboard
To be clearer about what the full path of this experience was, I worked on storyboards, which helped the whole team involved understand where the main complexities could arise. This helped the CTO make more focused decisions in even the smallest gestures.
User Flow
Following the creation of a fairly extensive storyboard, I delved into envisioning an optimal user flow that could seamlessly integrate the product experience with the software. The primary challenges I faced revolved around the dedicated configuration application. Since it was outdated, and the company had no plans for a simultaneous redesign during development, I had to make certain design compromises. After presenting these concerns to the stakeholders, the decision was made to proceed despite the constraints imposed by the tight schedule.
High-Fidelity Wireframes
The primary goal of this project was to deliver a user-friendly and visually captivating experience. Leveraging a comprehensive user research phase, I gained deep insights into user behaviors, needs, and pain points. These insights informed the creation of an intuitive and aesthetically onboarding interface. Through meticulous attention to detail, I crafted a high-fidelity prototype that not only met but exceeded the project's objectives. The resulting Mobile IoT app is a testament to the fusion of advanced technology and user-centered design, offering users a seamless and delightful experience in managing their IoT devices.
Testing
Usability Testing
The phase of testing with real users was skipped because of the pressing need to have the product ready for deployment as soon as possible. As a result, the company might be exposed to unforeseen challenges that users could encounter when interacting with the application. This is particularly concerning during critical processes such as device association, where user feedback is crucial to identify and rectify usability issues. The omission of this testing phase means that certain user experience problems, which could have been identified and addressed through user feedback, might remain unresolved, potentially affecting the overall effectiveness and user satisfaction with the application.