Project
The purpose of the project was to evaluate and redesign an existing user interface using both theoretical and empirical usability methods. The project aimed to identify usability issues in a real-world digital product and to improve the interface based on established interaction design theory, user testing, and analysis of user behavior.
The project involved a structured evaluation process, including hierarchical task analysis (HTA), cognitive walkthroughs (CW), predictive human error analysis (PHEA), and two rounds of usability testing. These methods were used to assess effectiveness, efficiency, and user satisfaction, and to uncover both objective and subjective usability issues. Insights from the evalations formed the basis for a redesign guided by usability principles, design guidelines, and user-centered criteria, followed by re-evaluation of the redesigned interface.
The project resulted in a redesigned version of Pressbyrån’s loyalty app, one of Sweden’s most widely used convenience store applications. Despite its broad user base, the app had received low user ratings, indicating usability challenges. The redesign focused on improving clarity, navigation, and discoverability through the use of easily recognizable icons, improved typography, and clearer calls to action. The final outcome demonstrates how systematic usability evaluation and iterative design can enhance user experience, efficiency, and overall customer satisfaction in an established digital product.
Team
Time
4 weeks in 2022
Tools
Figma
KEY WORDS
UI
UX
User Research
Design Process
01 Theoretical Evaluation
Theoretical evaluation methods were used on both the original app, and the redesigned app.
HTA was used to structurally and systematically describe how a task is performed in the app.
CW was used to evaluate usability and identify potential issues.
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 the 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.