My Role

I took the role of chief designer to redesign the iOS version of the Hula APP during my internship at a studio (now it's a startup) called Cloudstation. Collaborating with the my team, I collected the need of a variety of stakeholders. Following what a start-up should do, I did many iterations by doing testing with users & engineers and finished all interfaces and a prototype.

Duration

September-December, 2017

Tags

Research, UX/UI Design

··· OVERVIEW OF HULA ···

Hula is a one-stop information platform of extracurricular life. It provides students with details of a variety of events and a convenient way to book student tickets. Also, student could post and find interested activities and opportunities in it to avoid the trouble when attending and organizing activities before.

··· RESEARCH & ANALYSIS ···

Design Objective

Hula was an student activity platform which mainly provided cheap tickets of shows and exhibitions for university students. Having operated for 1 year, Hula have accumulated over 50 thousand users and 1000+ daily active users.
However, the current situation is not a good fit for the ambition of Hula's future development:

<<<
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.

<<<
Students only considered Hula as a ticket server and rarely posted their original activities on it. This resulted in Hula's dependance on BD(business development) and its lack of valuable content from users.

Therefore, the goals for this redesign of iOS version are:
- Enhance the user experience of Hula APP by refreshing the structure and the interfaces.
- Encourage users to create and join student activities on Hula to improve DAU (Daily Active User).

User Research and Insights

To understand who are the users as well as their behavior and need I conducted interviews and questionnaires with different users and stakeholders. Detailed analysis about what I found is shown below.

1.Affinity Clustering: abstract users' needs
The information from all the interviews and questionnaires were clustered in the form of affinity. I abstracted the them to form several interesting insights about users' needs from different aspects.

So,what are their essential needs?
No matter current or potential users, they all showed some common needs for extracurrciular life. I summerized 3 most important ones.

1. A one-stop platform of trustworthy 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. Cheap tickets with friendly ticket-purchasing process
Without too much money, students have a nature tendency to find cheap student tickets. But currently, they are usually confused about ticket things like how to collect ticket in reality after ordering online, which also increases operation cost of Cloudstation,Co.

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.

3.Experience Map: get design implications in the whole flow
Analyzing users’ need, action and emotion in 3 stages when using Hula: Browse, Schedule, Participate, I concluded the current user flow in an experience map. Some problems in current interfaces of Hula are revealed and they gave direction to the whole redesign process.

3.Behaviorial Personas: users and their behaviors
By analyzing the attitudes and lifestyles of our current and potential users from interviews and questionnaires, I visualized the 2 different typical users of this platform. Rather than an traditional persona, I utilizedbehaviorial persona because our users are relatively well-defined. I put an emphasize on their typical everyday behaviors and found how they achieve their goals.

4.Synthesis: main requirements and design implications
After understanding users and current problems, I summerized design implications that I always kept in mind when redesigning the APP:

Competitive Analysis: Play to Win

As an entrepreneur’s product, it’s never enough to just satisfy users in our own way. More importantly, rather than just ‘play to play’, Hula needs to distinguish itself and ‘play to win’ in the market.
Therefore, I also made an satisfaction test about features and design of Hula and the competitors when doing interviews. With the data from 15 students and detailed analysis of the products, I concluded their strength/weakness and Hula’s expected core competence.
All of these helped me to better understand Hula’s playing field and guided the following design.

··· DESIGN PROCESS ···

Design Alternatives

I began my redesign by reconstructing the information architecture. Different design alternatives then emerged.

There are two ways to arrange the information flows of ‘Events’ and ’Student Activities’: COMBINE or SEPERATE.
At first, I combined the information flows of these two parts together. Because these two information flows are both intended to help users tofulfill the same goal: Find where to go for extracurricular life, combing them might improve browsing efficiency.

But after some tests with low-fidelity prototype as well as deeper analysis, I found several weakness of it.

#1

According to research, information needed by users varies between ‘events’ and ‘student activities’, users would be confused if all items combine together.

#2

a combined flow could not encourage users to create and join student activities.

#3

Users cast a doubt on its efficiency to seek needed information during prototye test.

It's quite annoying to put everything together, I just want to see what I actually need.

——— Quote from a test taker

Therefore, It seems like it’s wiser to separate these two information flows. But there’s also a problem with the 'seperated' way:
- Users may feel a little bit confused about what are these 2 parts for.

I came up with a solution and made a lofi-prototype of Hula's homepage to do quick test with 3 users:
An introduction sentence and several tags about main features of each part on homepage to help them distinguish between these two parts and quickly find what they want. According to users, it is an understandable indicator to find what they want.

Information Architecture

I finished the information architecture based on analysis above and some other insights from research:

Wireframing

Below is the main interaction of Hula.

Hifi Interfaces

I finished all the user interface in Sketch. Also, in preparation for the evaluation and tests of users, I made a clickable prototype with Invision.

Check out the clickable high-fidelity prototype of the main interfaces below.

··· MAIN IMPROVEMENTS OF NEW HULA ···

After many iterations, we completed the final design.Here below I summerized the main improvements of new Hula.

Refreshment of Information about Tickets
Improvement in Student Activity Part
The New Version of Homepage

··· EVALUATIONS & ITERATIONS ···

User tests

I invited students of SJTU to evaluate the new version of Hula . To my surprise, several scores of new design and main features did not meet our expectations. While new Hula shows a great improvement in aesthetics and information hierachy, people are not so satisfied with the new homepage, activity posting and information readability.

Main iteration

Therefore, I did some quick interview with the users and made some amendments based on the suggestions from test takers and our observation while they are doing tests.
We tested and iterated again and again to get the final design. Below are several main iteractions.

Final Interfaces of new Hula.

··· REFLECTION ···

Think and design like a CEO

It was my first time to intern in a start-up and it was totally different from what I had experienced in China Mobile Co.,Ltd, a big corporation where I interned before. With only a team with several persons, my designer role was extended in this experience. At the beginning of this internship, I followed my former thinking methods and design procedure of UX, emphasized a lot on users and their expectations.
But after some discussion with CEO of Cloudstation Co,.Ltd, I realized that I need to consider more, especially for such a company that faced a severe competition at market. How I arrange the information and interaction should be the manifestation of different stakeholders’ concern and more importantly, business goals. For example, to encourage more original content from users, I renovated the interface structure and redesigned the information flow of student activities into a BBS-like form. In this way, I learned to make analysis to figure out the best way to dmake a balance from the design, engineering and business view while doing my work.

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 wire-framing to hifi interfaces, I need to make some amendments because when fitting real content to the layout. I realized that content-first is not only about reducing the decoration elements and improving users’ browsing efficiency. 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.

PREV

Back to homepage

Copyright©️(2014-2018)
Yizhou Liu

NEXT

Wonderland