Thank you for being here. For a better browsing experience, please use computer to open this website:)


iOS Mobile Design, Enterprise

My Role
User researcher, interaction designer, visual and animation designer.

2 months.

Pen + Paper, Sketch, Principle, Invision

"Find amazing extracurricular activities of your interest and passion here."

Design Outcome

Hula is a student extracurricular-life platform ran by Cloudstation Studio in Shanghai Jiao Tong University. As a design-major student, I was invited to redesign the whole iOS application. Shown in this portfolio is the English version.


Explore what to do after school to achieve your goals.

Students can explore what they would like to do in their extracurricular life, based on their intentions. Also, they may quickly navigate to their targets by filtering among tons of activity information.


Find interested on-campus activities, efficiently.

Students could know about all the necessary details of any on-campus activity, and also they will be able to register with one click and customize the information to get and share with the organizers.


Get fun off-campus events and participate with student tickets.

The platform provides an easier way to explore and purchase student tickets of interesting off-campus events: exhibitions, dramas, competitions, etc. Students will not need any other application.


Manage your schedule and post your own activities here.

Hula also enables students to manage their own activity schedule here. What’s more, the iOS application supports organizers to post their on-campus activity quickly for a better convenience.

My Challenges in This Project

The studio was like a start-up, so I need to consider a lot about the needs from business side such as user growth. Also, as the only UX expertise in the group, I need to communicate user-centered values and spend time delivering my design insights.


Here's my design process.


Understand Current Situation and Design Goals

Our original user group is new students. After some field research, I found several interesting findings that helped me motify my user group and design directions.

    Current Situation and Interfaces

  • Former structure of Hula APP was not quite friendly for users and the interfaces were not well-designed. Users complained a lot about the browsing experience with it.
  • The high-level ambition of HULA is to make it a community for users to post and find interesting activities. But currently there’s very few original content from the users, they just consider the tool as a ticket platform.

    Therefore, the goals for this redesign of iOS version are:

  • Enhance the user experience of Hula.
  • Encourage current and potential users to be more active on Hula and contribute original content.

Interviews & Survey: Who Are Our Users?

After determining the design scopes, me and the team interviewed both current and potential users to know more about our users and their critical user journeys. Also, we did an online survey to dive deep in the detailed information needed by these target users.

    Our high-level research questions

  • What are current user journeys and pains of Hula App?
  • What are their needs and goals of their extracurricular life?
  • What are the challenges for them to find intersted activities or find people to attend their activities?

Students expect an one-stop platform of both on-campus and off-campus activities.

Personas & User Journeys

I built up personas and user journeys to summarize users' needs and experience. The browsing and proposing experience are both divided into three stages.

Summaritive user needs:

1. An one-stop platform of trustworthy off-campus events and student activities
With a variety of extracurricular information source, students prefer a one-stop platform to help them improve the efficiency to determine where to go. But they are also cautious about information made by non-officials and want to know about the initiator before joining in.

2. Easily accessible student benefits to improve the quality of extracurricular life
Without too much money, students have a nature tendency to find cheap tickets, free food, etc. Currently, Hula is a channel to get exclusive student tickets, but users feel that there could be more.

3. Quick and convenient propaganda channel for student activity organizors
Unlike big organizors like school officals, initiators of student activities do not have so much additional information to offer when finding people to attend their activities. Therefore, they prefer a simple post with great efficiency.

Deep Dive into User Preferences & Competitive Analysis

With the quantitative data that we got from the survey, we identified top interested on-campus and off-campus activities for students and got their information needed.
With these data, we took a look at our competitors and evaluated them in different dimensions including information provided, usability, aesthetics, etc.

We found that no current product can satisfy students to find all the information needed, which would be our opportunity. Besides, in analyzing other dimensions such as usability, I got many inspirations and also summarized principles to guide my design.


Design Principles

After understanding users and current problems, I summerized 3 principles that I always kept in mind when redesigning the APP:

  • Efficiency: The design should be easy to use and improve students’ efficiency in activity-related tasks.
  • Trustworthy: The design should give users a sense of reliability, no matter to find or promote activities.
  • Accurate: The design should provide the right information at exactly the right time and places.

Critique on Current Experience Flows and Interfaces

With user insights and design principles, we did a critique session on current version of Hula. We found a lot of problems in their whole experience flow, which also provides us a start point of our redesign.

Experience Flows on Different Scenarios

My ideation starts with an exploration of possible user scenarios for different purposes. I tried to build empathy on those scenarios and thought of their experience flows.



What is a more suitable information architecture for Hula?

Design Alternatives & A/B Testing

After creating the experience flows, I began the redesign by reconstructing the information architecture. Two design alternatives emerged on how users browse on-campus activities and off-campus events.

I planned to go with combined feed first, because these 2 feeds are for satisfying the same user goal: to discover interested activities. My assumption is that combining them might improve browsing efficiency.

However after a simple A/B testing with 5 users and a deeper analysis , I changed my mind.

“Seperated info feeds” is more suitable for Hula because:

  • Current users feel they usually have decided to go for "off-campus" or "on-campus" activities when opening the app. Combined flow may decrease their efficiency.
  • According to our research, information needed varies between “off-campus events” and “on-campus activities”, combining them together may cause mess and confusion.
  • A combined feed may discourage school organizers to post and promote their activities.

Wait! Users may not know where to start exploring with 2 seperated feeds.

To solve this problem, we reflected on our experience flows: It would be helpful to introduce these 2 feeds when users just get started to explore. Therefore we modified our experience flow and made a mock as a direction to guide the design of Hula's homepage.

Information Architecture

I finished the information architecture based on analysis above and the refined experience flow.


As the first step to create the detailed interfaces, I produced wireframes to indicate the key interactions and the information architecture.


How to encourage users to be more active on Hula?

Think More of Business Side

After finishing the wireframes, I firstly ran a cross-functional review with the whole team explaining the new designs. One biggest consideration I identified through the discussion is about motivating users. Based on former analysis of user goals, there’s two parts to be considered.

1. Browse and attend more events and activities

From the discussion, I get to know an interesting fact from current backend data:
Users have a high bounce rate, most of the users only browse the homepage then quit.
Therefore, I did some refinements to attract users on the homepage and hook them in the Hula to browse more.

2. Propose more on-campus activities

For the activity organizers, more effort needs to be placed in the marketing part. But there’s also something that App UX could contribute: let users be more aware of this feature, then post their activities on Hula when they have such needs.

User Feedback and Problems

Besides, I walked through the wireframes with 5 users and tried to understand how users perceive the user flows and key interactions. We found that users generally like the “all-in-one activity platform”, but there are some significant problems.

1. Information provided

  • Filtering is not enough for users. They would like more on ‘time’ and ‘initiator’.
  • Activity organizers is important for them but easy to be ignored right now.

2. Event & activity participating experience

  • "What if I want to buy a regular ticket and a student ticket?"
  • "What if I want to customize whether to get notification on it? What if I can control better on my privacy?"

3. Layout and visual elements

  • Users expect more space to show content after scrolling.
  • Users felt all the interfaces to be visually intensive and not comfortable.

Based on these problems identified, I started to conduct refinements on the key interactions.


Refined Interfaces & Invision Prototype

Based on the problems identified, I did refinements and created high-fidelity interfaces and demonstrated our workflows with it. With these, I prototyped out the workflows with InVision and it can be checked here.

Usability Testing

After I finished the key interfaces, I did a usability testing with 6 users with the InVision prototype. The test takers were asked to conduct 3 benchmark tasks and finish a short survey with likert-scale(1-5) questions of 6 usability dimensions. Based on the results, I tried to identify the problems existing in the current prototype.

Refinement #1.

How to increase users’ efficiency to find their target events/activities?

New Solution: Intent-based Recommendations

I did an analysis of current solution and identified that there are a lot of noise and irrelevant information along the way - they need to filter in their brain for each activity: whether it is suitable for my intent?
This is why users felt that they would use much cognitive muscle in this inconvenient tool.

Therefore, I tried to help users browse the feeds easier by clustering activities by intents on the homepage. But still, I tried to satisfy business concerns and learnability requirements in this new solution of Hula homepage.

Refinement #2.

How to help organizers promote school activities better?

New Solution: Pictures for School Activities

Another concern we got from users is that they still expect to upload pictures in promoting their school activities. Therefore, we iterated on the ways to show pictures of school activities.

Final Interfaces

Besides, I did many detailed refinements based on users' feedback and suggestions, here's the final interfaces that I created for Hula.


Next Steps on the products

1. More A/B testing

I only did qualitative user research and designed based on some assumptions about users’ behavior and mindset. Therefore, the next step for this project is to implement all the functions and do a real A/B testing to make better design determinations.

2. Think of Business Model to Win Larger Market

Even though current product solve the users' problem, can it survive in the market? Could it provide better interactions among people rather than just provide information? Currently Hula is supported by SJTU but it would be good to think about how to make profits in a larger market.


1. Content First!

HULA is an information platform, abundant texts and pictures need to be shown to the users. So when I started to design the layout of it, it gets a little bit difficult cause every detail need to be considered. In this process, I found that it’s of great importance to begin the design with a comprehensive grasp of what content would be placed in the site.

One of the examples is that when transferring wireframes to hifi interfaces, I need to make some amendments because when fitting real content to the layout. It’s more like a methodology, which drives me to analyze the real content and design the ‘form’ based on what the texts and pictures will be shown on the interfaces.

2. Take Real-world Challenge

During the redesign, I was faced with a lot of real-world challenges: business needs, brand safety, different stakeholders’ preference. These really helped me not only think as a designer, but also stand in a start-up CEO’s shoes. This forced me to jump out of my comfort zone of a designers’ view and I learned a lot in this process.