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.
Our goal was to redesign Tong Qu to provide a more efficient and enjoyable event-finding experience in Shanghai Jiao Tong University.
1) Analyzed the data from iOS App Store and Apple Analytics, made semi-structured interview plan and conducted competitive analysis.
2) Synthesized the research results and came up with the personas to represent the insights.
3) Created the wireframes and mockups.
4) Led the feedback session and iterated on the design.
5) Prepared the specs and collaborated with iOS developer to implement the design.
6) Assisted PM promote the app update by designing promotion page and banner on Tong Qu's website.
November 2016 - April 2017
Huaiwei Sun | Xiaofan Lu | Ruiyang Wang
Photoshop | Sketch | inVision
In order to capture users' current pain points and other unmet needs, we combined qualitative and quantitative research methods to collect both broad and in-depth data to better understand the users.
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.