Project
Redesign Pressbyrån
Pressbyrån is one of Sweden’s largest convenience store chains with around 300 stores and around 300,000 visitors every day. As a complement to the physical stores, Pressbyrån has created an app for its loyalty customers where the customer can, among other things, see current offers, use stamp cards and receive free coupons. Although the app is well established, it only has a 2.6 out of 5 rating on both Google Play and the App Store with reviews such as “Stamps ‘disappear’ after I’ve fully stamped?” and “Where can I find my free coupon?“.
The aimn of the project was to evaluate Pressbyrån’s loyalty app through theoretical evaluations, usability tests, and analysis methods. The goal was to enhance customer satisfaction by redesigning the interface with increased usability and user experience. By adding easily accessible icons with a high recognition factor, easy-to-read fonts and cues to action, the redesign contributed to increased effectiveness, efficiency and satisfaction during use.
Team
Time
4 weeks in 2022
Tools
Figma
KEY WORDS
UI
UX
Design Process
01 Theoretical Evaluation
Theoretical evaluation methods were used on both the original app, and the redesigned app.
Hierarchical Task Analysis (HTA) was used to structurally and systematically describe how a task is performed in the app.
Cognitive Walkthrough (CW) was used to evaluate usability and identify potential issues.
Predictive Human Error Analysis (PHEA) was used to examine possible usage errors and their potential consequences.
02 Prototyping
A prototype of Pressbyrån’s existing app was built in Figma. The goal of the prototype was to maintain high fidelity to serve as a realistic representation of the app. By building both the original and the redesign in Figma, the comparison between the apps becomes more reliable.
03 Ideation
An ideation session was conducted to address the problem areas identified during the initial evaluation and analysis of the original app. The focus of the idea generation was on developing concepts that enhance both efficiency and satisfaction.
04 Wireframing and prototyping
The redesign process began with the creation of wireframes to visualize the user interface, incorporating elements such as information architecture, content, and layout. The interactive prototype was built in Figma.
05 Empirical Evaluation
Two identical usability tests were conducted on prototypes of the original and the redesigned app. To minimize learning effect, between-subject tests were used for fair comparison. The 14 participants, aged 19-25, had varying levels of experience with Pressbyrån’s app.
Each participant were asked to perform four tasks representing common user scenarios. Their interactions were documented through screen recordings and a GoPro camera strapped to their chest, while an observer documented their behavior and body language.
The criterias evaluated were efficiency and satisfaction. Efficiency was measured through task time, error count, and number of clicks. Satisfaction was assessed through interviews, observations, and a semantic differential scale.
06 Analysis
The theoretical and empirical evaluation on the original and redesigned app were analyzed and compared. The study assessed whether and how the redesigned interface improved efficiency, including users’ guessability and experienced user performance, as well as overall satisfaction.
Result
Usability Test
Two usability tests were conducted – one on the original app and another on the redesigned version. The users’ behavior was documented using screen recording and a gopro, strapped to the user’s chest, aimed at the mobile phone. The video recording documented the number of clicks, errors and navigation in the interface.
It was difficult to understand if it is free or if I should take a stamp, I would have liked to interact with the cashier to understand.
The results from the user studies indicated that users had difficulty navigating the interface. The analysis showed that free coupons and offers were not used, as a result of them being difficult to find. Additionally, the user had to scroll back and forth in the interface to find what they wanted, especially those who were new to the interface.
There were three different tabs with offers, stamp cards and free coupons, sure it was organized but it got messy having to go into all three.
Main Takeaways
The original app was perceived as outdated, disorganized, and difficult to use. The participants found the information scattered and challenging to navigate. Many participants struggled with the side menu, as it de deviated from the navigation patterns they were accustomed to. Additionally, when browsing offers and stamp cards on the Home page, users instinctively scrolled vertically rather than horizontally. This behavior reflects their established mental models from prior experiences, highlighting a mismatch between user expectations and the app’s design.
Original vs. Redesign
Improved Navigation and Mental Model Adaptation
- The original app required horizontal scrolling on the home page, which felt unnatural to many users who instinctively scrolled vertically.
- The redesign compressed components for a clearer overview and enabled vertical scrolling, aligning better with user expectations.
- Instead of traditional indicator dots, the redesign used partially visible images to subtly signal horizontal scrolling, improving discoverability.
Enhanced Accessibility and Efficiency
The original side menu was replaced with a bottom navigation bar, allowing quicker access to key functions directly from the home page. This change resulted in faster and more intuitive navigation between different sections.
Better Visibility of Coupons and Offers
- A notification badge was added to the free coupon icon, reducing the risk of users overlooking their available coupons.
- Additional redundancy was added to highlight active offers, minimizing missed discounts.
- In usability tests, participants missed using their free coupon in the original app, whereas no participants missed it in the redesigned version.
- “Gratis kupong” was redesigned to resemble traditional coupons, leveraging users’ prior knowledge for easier understanding. Used coupons were visually marked as torn-off, providing clear feedback.
More Consistent User Performance and Fewer Errors
- Participants made fewer mistakes and clicks per task in the redesigned version compared to the original.
- In the original app, users initially made many clicks but improved over time, suggesting poor guessability. The redesign showed more stable performance across tasks.