Sidero
Case Study Details
Date October 2022 to August 2023
Client Peptalk (via Sidero)
Project Peptalk Wellbeing App
Role Lead UX/UI Design Consultant
Tools Figma / FigJam / Jira / Slack
“Marlon worked with the Sidero team for and I found him to be very creative and diligent in his work. He worked on a number of projects including the redesign of an app home screen for one of Sidero’s customers. Subsequently he assisted the customer in structuring their brand guidelines correctly to allow them to move forward with future iterations of their projects.”
The Client
Sidero was founded in Athlone, Ireland in 2013 and is home to Ireland’s largest and highest skilled team of software developers, consultants and managed services professionals. Employing more than 240 people, they build and modernise mission critical software for their customers.
One of their clients is PepTalk, a purpose-built wellbeing and Team Experience (TX) platform that enables teams to engage and perform at their best. The platform is underpinned by behavioural psychology and combines continuous shared insight and action plans to create unique environments for teams to thrive.
They achieve this with their monthly cycle: Measure, Insight, Action.
My Role
As a UX/UI Design Consultant, I worked closely with Sidero’s management team on a variety of projects. Some key highlights and initiatives were: -
Department of Public Expenditure and Reform - Created a new low-fidelity user interface for the Civil Service Pension Modeller based on gov.ie design patterns (similar to Gov.uk GDS) including user flows and a low-fidelity Figma prototype.
Front-End Practice - I was also tasked with analysing Sidero’s development capabilities to identify gaps in skills and produced a learning matrix which I named The 5 Levels of Competency Mastery (from novice/trainee/graduate to subject matter expert) which would enable management to fill skills gaps and allow staff to up-skill based on the demands of Sidero customers.
Peptalk Wellbeing app* - my role was to evaluate the existing app, conduct user research & competitor analysis, document the app’s information architecture, produce mid-fidelity wireframes and a clickable prototype for the native iOS and Android app and conduct usability testing.
It had been decided by Peptalk management to move away from native apps in favour of a responsive web application. The main component for the Measure, Insight, Action protocol was the team check-in process, so I was tasked with the initial UX and UI design for this as a mobile responsive product, which was the first phase to the web-based solution.
In addition, the original producers of the application had not delivered style sheets, library nor design system for the company, so I set up design system foundations in Figma using the Atomic Design methodology first defined by Brad Frost.
* This case study covers the initial phase of Peptalk’s transition from a native iOS and Android app to a responsive web application but may touch on other Peptalk initiatives where there is crossover.
Problem Statement
Peptalk management had made the decision to move away from native iOS and Android versions of the Peptalk app for a number of reasons including making the platform more accessible without the need to install an app but also simplify the development platform from a single codebase.
Initially, we worked closely with the management team to figure out why the user engagement with the iOS and Android native app wasn’t delivering as intended. Even though several large-scale organisations had adopted the platform to improve employees’ work/life balance, the user experience was letting it down, so this was another reason for the transition to a more accessible platform.
Research and Discovery
In the initial phase, we conducted a UX assessment of the existing app, uncovering several noteworthy issues: -
The user actions header bar was inconveniently positioned, making it challenging for users to access with their thumbs. Furthermore, it lacked intuitive design.
Branding elements were haphazardly placed, diminishing their impact and cohesiveness.
The floating camera icon, while intended to be a useful feature, often obscured critical content and proved distracting to users.
The user profile icon suffered from distortion and lacked an intuitive user experience.
Some of the home screen content required improved organisation to enhance user navigation.
Locating the primary "check-in" call-to-action was a user struggle due to its inconspicuous placement.
The monthly team sentiment data was buried deep within the app's architecture, making it hard for users to access this valuable information.
Moreover, a horizontal content carousel led to "banner blindness," with as many as 85% of clicks focusing solely on the first item. This highlighted the imperative need for more effective content presentation.
Fig 1.1 Slide sample from initial Peptalk evaluation slide deck
It's important to mention that our project had limited access to real users. However, I didn't let this obstacle deter me. Instead, I conducted thorough competitor analysis to evaluate the app's strengths and weaknesses. This analysis played a pivotal role in shaping my design strategy for the application.
Even though the business were planning to transition from native iOS and Android apps to a responsive web application, I proactively developed a Figma prototype to tackle the UI/UX challenges (see Fig 1.2 below).
Information Architecture
Another early actions I took for both project streams was to map the information architecture (see Fig 1.4 below) to give a clear picture of the application content and how users flowed through the various screens. I would also use this for guidance for producing early wireframes and a clickable medium fidelity prototype for both native and web-based applications.
Fig 1.3 Peptalk Information Architecture
Design System Foundations
Before I could start work on the proposed changes to the app, I had to reengineer the Peptalk design library in Figma, as the one delivered by the original developers was not robust enough to embrace the scalability that the business required. I laid down strong foundations for a design system based on atomic design principles including colour, typography and iconography to ensure that the business had a strong base of core components including buttons, cards, navigation, headers, footers and many more to continue their planned growth.
Here is an example from the design system foundations for the advanced colour palette: -
Design Solution
Once the design systems foundations were in place, the design solution was quick to achieve in Figma and a clickable, medium-fidelity prototype for the essential “check-in” process was produced for desktop, tablet and mobile: -
Usability Testing
As mentioned earlier, access to real users was difficult for this project due to the nature of the deployment of the application within organisations. Not to be hindered by this, I tested the prototype internally which, whilst not being ideal, was better than no testing at all! Guerrilla testing is not to be under-estimated nor discarded and the basic testing I was able to complete turned up a few usability improvements, in particular relation to accessibility and contrast issues, which were quickly fixed in Figma.
Implementation
Hand off to developers followed and I presented a session to the development team on how they could interact with Figma and pick HTML, CSS and React code directly from that single source of truth. There were no real challanges with development other than being on call to assist devs with Figma interaction when required.
Results and Impact
For the UX/UI improvements to the app, the quantitative data available showed the app load time improved from approx 8 seconds before the improvements to less than 4 seconds after. In addition, following analysis of a cohort of users who experienced the updated UI, we observed a 15% increase in user retention over a 30-day period.
Even though access to real users was limited, some user feedback was collected from an in-app survey deployed to a selected cohort of users, many of whom praised the cleaner design and improved UI layout. Some comments were
“the new UI feels more organised” and
“I love that the team insights are always available on the home screen”.
There also a notable change in user engagement with an increase of 12% in the average daily session duration suggesting that users were spending more time in the app.
Finally, the engagement with the all-important “check-in” feature of the app increased by 25% indicating that users were more engaged with this process.
Conclusion and Key Takeaways
The Peptalk wellbeing app underwent a comprehensive evaluation, considering both quantitative and qualitative aspects of its performance:
Improved User Experience: The redesign of the app's user interface (UI) led to significant improvements in user experience. This was evident in reduced app load times, increased user retention, and higher conversion rates for premium memberships.
Positive User Feedback: Although minimal user access was available, the qualitative data collected from user feedback highlighted that users found the new UI more intuitive and easier to navigate. Users expressed satisfaction with the cleaner design and enhanced features.
Increased User Adoption: The app experienced a notable increase in downloads and active users following the UI update. This indicates that users were not only attracted to the app but also engaged with it more frequently.
Enhanced User Engagement: Users spent more time within the app, with an increase in daily session durations. Feature usage, particularly the "check-in" feature, saw a significant boost, reflecting higher user engagement.
In conclusion, the Peptalk wellbeing app's redesign not only improved key performance metrics but also positively impacted user satisfaction, adoption and engagement. Its success in enhancing workplace wellbeing and building a supportive user community reinforces its status as a highly effective and successful application in its domain.
