P-STEP
Sponsored by the European Space Agency (ESA), the P-STEP app was envisioned with the overall objective of linking expert medical knowledge and space-derived environmental data to support safe outdoor walking advice for a broad range of individuals (from healthy to having serious chronic conditions) while gathering user feedback and usage data for an AI optimisation of the different algorithms contained in the app.
Project Overview
Type
An end-to-end project from concept ideation to interaction and prototyping.
Role: UX Lead,
App Design Team
Details
Methodology: Agile.
Duration: 2+ years, 2021-2024.
Tools: Figma, Miro, FigJam, Whimsical, Firebase, SPSS, NVivo, GitLab, REDCap, Teams, Python, etc.
Goals
- To co-design a mobile app for air quality and health advice.
- To engage users through design, boosting their motivation to walk outdoors.
- To create cohesive looks for the app and the brand.
Summary of Main Contributions
- Deciding, defining, and executing user-centred design strategies throughout the different stages of the software development.
- Collecting and organising user requirements.
- Creating user journeys and test case scenarios.
- Designing low- and high-fidelity prototypes of all the interfaces in the app.
- Managing Junior UX Designers on side projects of interest to P-STEP.
- Using data analytics to inform decisions.
- Supporting inspection and usability testing.
- Creating new and building on existing research.
Case #1
Initial plans of having face-to-face co-design workshops were cancelled due to the restricted access to end-users during and after the COVID-19 pandemic.
The Solution
I involved discipline experts (health and environment) as well as healthcare professional stakeholder focus groups in the scoping and co-design processes to facilitate the collection of early requirements. At the same time, online group discussions and surveys were organised and conducted with end-users to circumvent the issue. Face-to-face workshops were possible again eventually without compromising the timelines of the app development.
Interviews and group discussions with Earth Observation and Healthcare experts were carried out to uncover evidence-based advice regarding safe Air Quality (AQ) exposure and recommended exercise. This data was used to construct several algorithms within the app. I collaborated, for example, in setting up the visualization and integration of space data (from an ESA satellite and other AQ providers) with the exercise prescription (according to various health conditions and individual user capabilities).
Case #2
Collecting and organising system requirements from different user-based events.
The Solution
User involvement was categorised into two phases: design, and validation. The planning of involvement design activities and topics for involvement were identified in partnership with the different teams involved in P-STEP. These arrangements worked to produce visualisations that users worked on in the different sessions.
The design phase involved discussion with users to identify their needs to inform the system requirements. With the consent of the group, the group discussions were recorded and transcribed. The documents were uploaded onto a shared platform allowing opportunities for the design teams to comment and raise questions about the discussions.
The validation phase involved at least one core member of each team involved in P-STEP as well as the end-users. Through a process of presentation, observing, and documenting the users’ experiences, we were able to assess what was working within the app design, what needed to change, and what may require further investigation and
user involvement to solve.
Case #3
Data collected from end-users and discipline experts needed to be converted into actionable plans for developers, and understandable information for other teams and stakeholders.
The Solution
Firstly, I transcribed and digitalised user needs to store them in spreadsheets. These requirements were grouped and categorized to guide the general structure of the app design. I arranged requirements into main epics, in the form of system requirements and UML diagrams to delimit the scope of the interactions in the system. Requirements that were out of the scope of the project, or that were not technically feasible to achieve, were discussed during stakeholder meetings and decisions were made accordingly.
I also converted user requirements into user stories, user journeys and test case scenarios to communicate with the different teams and stakeholders.
User stories were grouped and structured by features and converted into sketches in co-design workshops with end-users. Ultimately, I converted these ideas into low-fidelity prototypes using Whimsical.
I gathered feedback on these wireframes from end-users through focus groups and surveys, and this informed the design of high-fidelity prototypes which were produced using Figma following accessibility standards (WCAG) and best practices.
For the Design and Development of the app, we followed an Agile Approach with iteration spans of two weeks. My designs were pre-approved by end-users and discipline experts ahead each software development iteration and these, alongside the corresponding user stories and scenarios, were refined at the start of each iteration with the development team. Test cases referring to scenarios of the same
user story were implemented in the same test suite file.
Case #4
The brand needed a visual identity.
The Solutions
I created a UI kit to share the baseline design style of the brand, including light and dark themes, fonts, and icons for the app.
The colour scheme was used for the app, website, and most marketing communications. I kept on updating the UI kit according to the needs of the project, with various components and personalised icons.
I also reused the logo components on different sections of the app to increase the consistency and visibility of the brand. For example, 'walking Pete' appears on the progress bars, the quick start button, and some badges and rewards. The 'satellite', similarly, appears on some rewards and badges, setting new goals, etc.
Case #5
User dropout is high on similar apps.
The Solutions
I involved end-users in the co-design of the app since its early stages so that they would find the final product to be usable and appealing. I also collected feedback within every iteration to improve the corresponding designs with user input before development.
To motivate and engage users, I experimented with different types of rewards and challenges in order to find the ones that appealed to end-users the most.
The final app rewarded user activity with collectable badges to boost engagement. Badges were different colours and styles depending on the reason and the month they were awarded. For example, I used a red colour for December with icons wearing a Christmas hat, whereas for July I used a bright orange with icons wearing sunglasses.
User input was collected thorugh different methods to select the most appropriate desings. After gathering requirements, different looks and options were often provided to users for their input. Some A/B testing was conducted to analyse user preferences through analytics and usage data.
We also prepared several looks for different elements of the interfaces so that users could give feedback on their preferences.
Finally, I helped construct personalised notifications to promote physical activity and user retention.
Case #6
Evidence-based environmental information tells us that prolonged outdoor exercise can be harmful to users if conducted in polluted areas.
The Solutions
Based on the experts' input, the user requirements, the analysis of documentation and the technological capabilities of our team, I designed different ways to present with important Air Quality Information (AQI) to users. For example, by displaying interactive maps to visualise AQI and weather forecasts.
Or, by providing detailed and personalised AQI, and enabling alerts for extreme environmental conditions.
By using AI to suggest clean walking loops to keep users at safe exposure levels.
And by allowing users to check AQI before deciding on a route for their own destination.
Case #7
People with chronic conditions may not be able to achieve normal exercise targets in similar apps.
The Solutions
I involved potential end-users with chronic conditions since the app's conception for their input, and I used iterative design validation to improve the app's features and interfaces.
Cycle 1 - Sketch
Cycle 3
C1 - Low Fidelity
Cycle 4
Cycle 2
Cycle 5
I co-designed a 'health profile' for users to input their personal characteristics and physical conditions, to aid the recommender system in tailoring health and exercise advice.
The app also enabled tailored goal setting, so that the advice users received was linked to their current needs.
Case #8
We needed to evaluate the reliability and acceptability of the product before launching it to the market.
The Solutions
We recruited a new pool of end-users for a 12-week experiment testing the app. Users gave feedback at three points during this time through standardised scales and homegrown questionnaires. Usage data was also collected and analysed.
Results from this trial helped inform decisions for re-design and general improvements. For example, by finding sections with low traffic that needed to become more obvious in the app, by uncovering app crashes and errors on the machine learning models that needed a solution, or by prompting a change on the interface designs such as the positioning of elements.
