FLYBUYS APP Redesign

Flybuys App Redesign Challenge

🎫

Flybuys App Redesign Challenge 🎫

Project Overview

Flybuys is a daily-used loyalty points app that not only brings convenience to users' lives but also seeks to attract more potential users by improving the app's user interface experience.

This project aims to improve the usability and accessibility of the application by restructuring the information architecture and upgrading the user interface design, providing users with a smooth and user-friendly app experience.

Design Process

Role

  • Information Architecture

  • User interface design

  • User Experience design

Timeline

  • Overall: 5+ weeks

  • Testing: 1 weeks

Team

  • Siyu Julie Yao

  • Ruyi Cheng

Tools

  • Mindmap

  • Whimsical Wireframes

  • Figma

<Information Architecture for landing page>

Redesign Ideation

After conducting user research and collecting feedback on the current user experience of the Flybuys app, we have identified some key issues and developed corresponding solutions. As a result, we have created a plan to redesign the Flybuys app, which includes the following features:

  • Visualizing and presenting the status of loyalty points through data visualization to enhance the user experience.

  • Adding a quick access feature for users to view and manage their e-receipts.

  • Displaying nearby locations where Flybuys can be used to increase user engagement.

  • Optimizing the structure and content hierarchy of push notifications to improve user comprehension and readability.

  • Simplifying the user interface to minimize page and content complexity, resulting in a smoother and more straightforward user experience.

  • Adding a night mode option to increase visual comfort.

<Information Architecture for functionality page>

Wireframe

<First wireframe sketch for Flybuys App>

During the UX/UI design ideation phase, we identified areas for improvement and redefined the user flow. Using Whimsical Wireframes, we converted our initial hand-drawn sketches into low-fidelity wireframes.

Then we refined the wireframes according to the Flybuys app redesign plan that we had developed. After three rounds of user testing and incorporating feedback for improvements, we progressed to creating high-fidelity prototypes.

<Final wireframe sketch for Flybuys App>

UI Design Process

We used the low-fidelity wireframes to create a high-fidelity prototype in Figma. In the process, we redesigned the interface elements and layout of the existing Flybuys app, adding new features like quick access to point history, e-receipts, and night mode toggle.

The card sizes were reduced and modified with rounded corners and shadows, also the page information was simplified and categorized. Additionally, we streamlined the registration steps to improve the user experience.

1.jpg
02.jpg
03.jpg
04.jpg
05.jpg

Final Outcome

What’s Next

Our aim is to enhance UI interactions in the final outcome by adding interactive effects to the high-fidelity prototype, based on user feedback from various tests. Since it was a redesign challenge, the project has only progressed to the testing phase.

This project achieved only the interface features specified in the redesign plan. Participants who took part in user surveys were invited to test the prototype, and they provided positive feedback regarding the smooth and satisfactory user experience.

Through this redesign challenge project, from initial research and ideation to the production and testing of interactive prototypes, I continuously improved my learning abilities and design skills.

As a UX/UI designer, I provided targeted solutions to each testing and research problem to achieve the desired results, providing users with the best possible experience.