XnFun App Design

App design
XnBay Technology
Project type
App design
Project year


The UXI design team optimized and added new features to XnBay's mobile application, looking for pain points in the user's context and solving possible process problems. Moreover, the mobile phone application is correctly connected with the product itself, and a shared album function is added to expand the user group and increase customer business opportunities.

My Role

As the UX/UI design consultant in the project, I produced include:
  • Wireframes
  • Wireflow
  • Graphical User Interface Design
  • Design Guideline


Draw the original design into a wireframe, find out the pain points of use, and simplify unnecessary steps in the use process. Moreover, shared photo album function pages also enhanced the connection between mobile applications and users. It's increased the value of products.


Use Overflow to make wireflow, clearly show each screen's links and actions, and attach explanatory text. At this stage, we have a complete understanding of client needs and the problems that users will encounter in the process. Therefore, the user process is completely optimized, and the user experience is improved.

Graphical User Interface Design

In the graphic design, It was presented by the primary color of the XnBay brand with a simple interface. Allow users to operate the interface and get started quickly and easily intuitively.

Design Guideline

1. Development Process

Emphasize the development process of design specification application and connection method.
Integrate the design and development process into the standard planning considerations, and classify the content according to the role.

2. Design Principles

Continuing the brand spirit and translating the design principles that reflect the brand value.
Interpret the spirit of the digital brand, and gradually carry out a visual translation, conveying the brand image through visual presentation.

3. Design Patterns

Understand user behavior and usage habits, develop design patterns.
Summarize and unify existing products, and organize standard module functions from the demand side. Then carry out modular configuration and design development.

4. Design Components

Support mode behavior, design components that adapt to the usage pattern of mobile devices.
Decompose design elements and visual elements, including various controls, graphics, icons, etc. Create a visual language database from Bottom-Up.

Project summary

In this project, you can find that a fair design process can help users get started quickly. When adding new functions, the interaction between users and the new functions must also be considered to enhance the product's value effectively.
In the Design Guideline, each rule is listed so that engineers can understand the design's intention when portraying. Moreover,  let the subsequent design iterations. There are rules to be followed, allow the design can be systematic.

Other projects