My Role

Senior UI/UX designer.

• Collaborating with diverse stakeholders, product managers, and engineers to identify issues and offer solutions.
• Creating an end-to-end UX/UI design process, starting from conceptualizing a vision and goal to generating solutions and executing them.
• Delivering use cases, wireframes, high-fidelity interactive prototypes, specifications, and annotations for both on-site and remote development teams.
• Conducting usability studies, considering accessibility, and iterating on designs.
• Determining information architecture and implementing responsive design.

The Problem

The original website's content delivery of information alone is no longer sufficient to meet the needs of users and align with business goals. There is a desire to enhance the reading experience and interactive features. However, the platform currently faces several challenges, including:

• The sole delivery of information lacks interaction with members.
• Enhance the commercial value of the layout.
• A more comfortable and intuitive reading experience, as the current website lacks consistency.
• Blurred member profiles, unable to increase the number of members.
• Advertisements disrupt reading, and users are unaware of additional benefits of joining as members.

Stakeholder interviews were conducted to ascertain the objectives of internal users.

The Key Design

1. 

2. Better browing experience

   In order to increase the number of users on the official website, we will focus on planning basic services and optimizing existing projects. By providing users with more CTA buttons, we aim to increase user engagement, increase the time they spend on the site and increase conversion rates.

3. Consistent visualisation

   We aim to achieve a simple and easily readable interface while optimizing advertising space to enhance the value of advertisements. The original vision lacked consistency, which we aim to address in the redesign.

4. 
5. 

6. More engaging content

   We have enhanced the interactivity of voting, topics, and e-commerce, enabling more social interaction between functions and visuals. This emotional connection increases user engagement and retention.

7. Personalized service setting

   We prioritize personalized settings, ensuring the high integrity of user data, and gaining a better understanding of user profiles.

8. 
9. 

10. Gamification mechanism

    We establish an interactive membership mechanism that encompasses production, use, and consumption, creating an economic system within the website.

Impacts

Interactivity fosters business growth in multiple aspects.

• 20% up

  Total website traffic

• 70% up

  New users

• 50% up

  Website interactivity

Process

User Research

We collected 207 surveys and chose 5 users from the 52 that agreed to be interviewed. By understanding the user's personality and common habits, we verify future core functions and conduct usability tests.

User Persona

The end user function primarily caters to individuals between the ages of 21 and 29, aiming to comprehend their user journey and identify potential future opportunities.

Key Finding

We found some main reasons why target users like to get in the game.

• 01

  Hardware and game information

• 02

  Gaming Experience

• 03

  Gameplay Social Circle

• 04

  Pursuing game goals

• 05

  Like learning

---

Design iteration

With every step of implementation, from the initial sketches to the final design, I continuously uncover new insights and discoveries. The process of problem discovery and subsequent problem-solving has been particularly enriching and rewarding.

Sketch - Concept ideas are drawn

Wireframe

Mobile and PC, check layout position the same experience and review design with stakeholders by the read and use.

Solutions

1. Card type layout

   Information, pictures, main titles, description text, and buttons should be presented in a way that allows users to easily read and understand them. The arrangement and structure should be clear, and the application and layout should be flexible.

2. Desktop

   Optimize the balance between advertisements and content on the page by readjusting their proportions, while enhancing the interaction of diverse topical content methods. This strategy aims to amplify the value of advertisements displayed on the page.

3. Mobile

   The menu functions like a mobile application, and the addition of a Toolbar function key at the bottom of the original webpage allows for seamless conversion of the webpage into an application-like experience.

---

UI Guideline

The UI system was implemented to enable easier maintenance and adhere to design specifications, as there was no previous system in place.

Prototype

In the finishing stage of interaction design, realistic scenarios are simulated to assess the overall sense of smoothness and identify any potential gaps or disruptions.

---

Questionnaire survey after product launch

Collect qualitative and quantitative data and user feedback to inform the upcoming revision process. Notably, the revision survey showed that users were most impressed with the revision in terms of priority functionality, textual content, and user interface (UI).

---

Results

The implementation of continuously loading content has resulted in an overall traffic increase of more than 20%, effectively helping editors overcome long-standing difficulties. Furthermore, the incorporation of a gamification mechanism, combined with tasks, has led to a significant growth in membership. The number of members has risen from 10,000 to over 70,000, and this number continues to grow.

I am grateful for the opportunity to implement my design in this project, as it has been a valuable learning experience. Applying what I have learned to real-world projects and showcasing the prototypes to users and team members has been instrumental in addressing challenges and achieving transparency, collaboration, and efficiency across teams.

---

B2B communication system Online teaching platforms