Tong Qu is the biggest event-finding platform in Shanghai Jiao Tong University. It allows students, student clubs, university staff and others to publish and find events on this platform. With this platform, the whole university community has become more vigorous, active and diverse.
So far, this platform consists of a website, iOS app and Android app.
Learn more about Tong Qu (Only support Chinese)
Tong Qu's iOS app hasn’t been updated for more than one year since previous iOS developers graduated. A lot of bugs came out and students complained about its malfunction and abandoned using it.
Therefore, our goal was to develop a new iOS version and improve the overall user experience.
Data collection, prepared semi-structured interview and conducted competitive analysis. Came up with the personas. Feedback session for prototype.
Wireframe, mockup, specs
Upon finishing the design work, I collaborated with iOS developer Ruiyang Wang to actualize the design and launched it to the iOS store. I also assisted product manager Xiaofan Lu carry out the app promotion by designing introduction page for the app on Tong Qu's website.
November 2016 - April 2017
Huaiwei Sun | Xiaofan Lu | Ruiyang Wang
Photoshop | Sketch | inVision
1. Find out existing pain points that users had with Tong Qu's iOS app.
2. Discovered other user needs from different user groups.
Selection of Methods and Justification:
1. Collecting Existing User Feedback - We collected Tong Qu's customer reviews from iOS App store and extracted the pain points and suggestions. This method helped us know the existing pain points and user requirements easily and quickly.
2. App Analytics - We checked the historical analytics data of Tong Qu and concluded the trends of how students used Tong Qu. It eanbled us to know the temporal changes in usage which reflected how users really used this product rather than what they talked about their experience.
3. Semi-structured Interviews - We asked students who have used Tong Qu before to probe how and why they used it and their preferences for the platform(website or app). We took digital notes during each interview. We learnt a lot about users' using habits and expectations.
4. Competitive Analysis - We studied exsiting products on the market which also played the role of event-publishing-and-finding platform. It taught us about how commercial products did their function design, information architecture, interaction design and detailed UI design.
First, we collected feedback from iOS store. It ranged from 2014 to 2016.
- According to the feedback, login and crash bugs are the main pain points. As a result, we set the bug-fixing as our top priority in the later product requirement document.
Then we used the Apple's Analytics tool to look at the usage trends of Tong Qu. The marketing data are complete. But the usage data are limited to the users who are willing to share their data with developers like us.
- Students mainly used Tong Qu when they are on campus. When the breaks began, they barely used this app.
- The crashes stayed on a high level which was congruent with users' direct feedback.
After getting the general feedback and usage data, we started to collect in-depth qualitative data including:
- what the users thought of Tong Qu.
- what they expected from Tong Qu's app.
- Whether they preferred app or just the website and why.
We conducted 13 semi-structured interviews with students who have used Tong Qu before(most of them are our friends and classmates) in Shanghai Jiao Tong University and took notes of their answers.
We used SWOT as a framework to categorize and analyze our notes in the spreadsheets.
Meanwhile, we studied two popular apps on the market. We listed their Pros and Cons respectively in terms of the information architecture, function design, interaction design and detailed UI design.
We aggregrated all the insights distilled from the research above and categorized them into two groups: existing pain points and new requirements.
After the analysis of data, we used personas to represent the insights we got. We created 3 personas to illustrate our typical users, which helped us empathize with them and focus on their needs in the following design phases.
After team discussion, we created the product requirement document and set priorities for the requirements.
- First, we would ensure that our designs could meet the user requirements.
- Our designs also had to work in a proper way that users enjoyed, i.e, it needed to meet the design criteria.
- The priority would help us cut certain features if we ran out of time and make design decisions when we were in design dilemmas.
- Firstly, we listed all the essential functions and features for meeting the product requirements.
- Then we discarded part of them due to the restriction of APIs and extracurricular time we had for this project. The remaining functions and features were integrated with Tong Qu's previous information architecutre.
- Finally, we adjusted the details of the structure and created the new version's information architecture.
Based on the information architecture, we came up with the wireframes and flows. However, we tweaked some functions and revised the information architecture in order to better satisfy the product requirement document.
After reaching consensus on wireframes and flows, we created hifi prototypes. We didn't use inVision or other softwares to make the prototype. We manually showed all the screens and interactions on my laptop during the team review.
Due to the limit of time and skillset we had, we didn't conduct user tests, whether it's benchmarking test or A/B test. Each time after knocking out the lofi wireframes or hifi prototypes, we just held quick and dirty internal discussion and review on all the screens. Since we were users ourselves, we were able to figure out the main issues in terms of usability.
If I could do it again now, I would conduct feedback session after wireframe phase and benchmarking test after hifi prototype phase. Feedback session would give me insights of how useful our features are to users. Benchmarking test and SUS score would help me evaluate the detailed and overall usability of the prototype.
With the help of the feedback from other team members, I conducted several iterations.
2. User flow
Our design work was always revolved around the personas(users) and product requirement document. We tested our design and flow in our use cases to see if they could help users achieve their goals.
I exported all the assets and specs to the iOS developer Ruiyang Wang. After he finished 95% of the coding work, we spent several days together testing and debugging to ensure there were as few bugs as possible.
When we were confident enough about our work, we launched it to the iOS store. I also designed introduction page on Tong Qu's website to introduce our new app. Check the introduction page here!
Several updates have been done after I graduated, so some design details are different from those in this project.
1. Objective Data:
In order to evaluate the impact of this update, I compared the analytics data from Nov. 2016 and data from Nov. 2017.
There is a huge improvement on usage data. Sessions(one session means that a user oepns the app and uses it for a certain amount of time once) have doubled. Active devices have went up to 1.4 times. Crashes have decreased by 93%.
2. Subjective Data:
I compared the ratings and reviews for old version and this new version from iOS store.
There is also a huge improvement on users' subjective feedback. Ratings from users have gone from 1.5 to 4.7. Most of the reviews spoke hightly of this update.