Category
iOS Mobile Design, Enterprise
My Role
User researcher, interaction designer, visual and animation designer.
Duration
2 months.
Tools
Pen + Paper,
Sketch,
Principle,
Invision
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.
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.
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.
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.
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.
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.
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
Therefore, the goals for this redesign of iOS version are:
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
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
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.
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.
After understanding users and current problems, I summerized 3 principles that I always kept in mind when redesigning the APP:
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.
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.
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:
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.
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.
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.
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
2. Event & activity participating experience
3. Layout and visual elements
Based on these problems identified, I started to conduct refinements on the key interactions.
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.
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.
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.
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.
Besides, I did many detailed refinements based on users' feedback and suggestions, here's the final interfaces that I created for Hula.
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.
|
PREVNitefly |
NEXTAssociate Tasking |
|