The New School App Redesign

Jan. - Mar. 2019 | Individual Project | Mobile App

Overview

In this self-initiated project, I looked into the reasons behind the terrible reviews of The New School’s official mobile app. Based on the insights I gained from user research, I conceptualized some new features and restructured the app to best cater to students' needs.

Scope of Work

User Research, Ideation, Prototyping, Wireframing, Usability Testing, UI Design

Tools

Pencil & Paper, Sketch, InVision, etc.

The Background

What prompted me to redesign?

My notes and reflections will go here. 💡

I still remember how ecstatic I was when I got the admission letter from Parsons. “OMG, that’s one of the top design schools in the world! I made it!” While I am honored to be a member of this great community, I was disappointed when I saw its official mobile app.

The New School app aims to offer one-stop access to all kinds of university resources to students.

However, people’s attitudes towards this app are mostly negative:

“A university clueless about app design”, “Disappointed", "Please fix this app", and the list of negative reviews goes on. The questionnaire I sent out asking about people's overall experience with this app also indicated that there’s room for improvement in its user retention and activeness.

Is that all a top design school can do? I decided to look into the underlying problems and see if I could make it better.

 

The Problem

How did I identify the problems?

To get started, I took a closer look at people’s reviews in the App Store to get a sense of where the root of the problems might be. I adopted the KWL technique to help focus on important ideas and ask the right questions to guide my research.

In order to answer the two questions above, I decided to conduct a content audit. I combed through all the existing features and inspected the information hierarchy, after which I identified two major problems.

1. The extensive features are not all suited for a native mobile app.

Although the current app covers a broad variety of resources from academics to campus life, only a few of them are likely to be used on mobile. Contents such as MyNewSchool and Course Catalog already exist as websites. Students are much more likely to interact with these sites on their laptops because they involve large pieces of text and complicated tasks such as uploading and downloading files. Other features merely redirect users to external apps, such as Gmail and Zoom, and thus accessing them via this app actually adds an additional step for users to get what they want.

2. A nontraditional navigation causes confusion.

This app also does a bad job in wayfinding. The current tab bar works in a way that conflicts with people’s expectations. Firstly, the information categories under different tabs are not at the same level. For example, Notifications appear both in the Settings tab and as an individual tab by itself. Secondly, the tabs are not strictly for navigation. For example, the Arrange tab is used to perform actions on the contents in the Home tab. Finally, there are many duplicate entry points such as App Feedback, Feedback, and Send Feedback that appear in multiple tabs.

Apple's Human Interface Guidelines are good references for evaluating usability! 🤓

 

Generative Research Round I

What are students looking for in this app?

The two core problems I identified, irrelevant features and confusing navigation, convinced me that those under-utilized features need to be replaced with new ones that people need. So then what exactly are students looking for? In order to discover solid design opportunities, I reached out to 4 students (2 novice and 2 experienced users) who had previously filled out the questionnaire and conducted some semi-structured interviews. I asked them questions not only about this app, but also about their daily lives and their habits of using digital devices.

At this point, I had a lot of data to work with: statistics and key facts from secondary research, observation and quotes from user interviews... I captured them on individual sticky notes and sorted them into distinct clusters, through which I synthesized two aspects of users’ expectations and used them as key design principles of my redesign.

1. Students are looking for efficiency in managing every aspect of their school lives.

2. Students are looking for engagement with their community in this platform beyond an academic helper.

 

Ideation

How did I ideate and prioritize features following my redesign principles?

Because the two design principles summarized above—efficiency and engagement—were still too abstract, I decided to humanize them by adding more details and building two representative user profiles with their respective habits and needs.

1. Brandon needs this app to help him plan his daily life and keep everything organized.

Img_09.png

2. Amelia wants this app to let her meet new friends and share her skills.

Img_10.png

These detailed personas helped me visualize typical user scenarios and brainstorm new features that are missing right now. In order to validate my assumptions and prioritize among all features, I sent out a new survey to the same group of participants who filled out the first one earlier. They were asked to evaluate the features based on how often they would use them (on a scale of Always, Often, Sometimes, Rare and Never). The results shown below indicated that students have different yet highly concentrated needs for features. These findings helped me prune down the features and keep only what matters the most to students.

Img_11.png
 

Generative Research Round II

How did I create an intuitive information architecture?

At this point, I finalized 21 features that I would include in the redesign. To make sure the information architecture I was going to create matches users' expectations, I conducted a card sorting activity and found that there were some common ways of grouping and naming, such as "Profile" and "Academics".

Now that I understood how users tended to group information together, I drafted a new information architecture that reflected their ways of thinking as close as possible. However, before taking any further steps, I wanted to verify the effectiveness of this new information hierarchy.

 

I conducted a tree testing and defined 2 indicators to measure the effectiveness: one was "correctness", which measured how many participants expanded and selected the right item; the other was "directness", which measured how many participants arrived at the answer without backtracking. I adjusted my information tree after the first round of testing, after which both indicators improved. And I arrived at this finalized information architecture.

I used a platform called Treejack, where I defined my own information "tree", and participants can click to expand subtrees and complete tasks.

 

Prototyping & Testing

How did I generate design concepts together with my users?

I used paper and pencils for my first round prototype to test the holistic structure. In each testing session, I prepared small tasks for participants to complete and asked them to Think-Out-Loud as a way to see whether the user flow was clear and smooth.

Paper prototyping is easy and great for rapid iterations! 🙌

85% of people think the new design is clear and much easier to find the information they need.

I continued on paper and filled in more details. In the first round of testing, students expressed great interest in features such as "Portfolio", "News & Events", and etc. Therefore, I paid extra attention to those pages in the second round prototype. For each of them, I brainstormed different layouts to display all the contents I wanted to include. I weighed the respective pros and cons by looking through the lens of users and thinking about their use cases and goals.

 

Final Design Highlights

Design Concept:

“Portfolio of the Day” as a platform to make new friends

The previous research showed that students are seeking more engagement with their community through the app. A promising feature I proposed here was "Portfolio of the Day", which would select a student's design work every day and display it on the welcoming page when students open the app for the first time on that day. Students can choose to skip or go and check out the full profile.

Design Concept:

Featured “News & Events” displayed as homepage's feeds

One key insight from the user research is that many students use this app on the go instead of on their laptops. Inspired by this finding, I decided to display news and events on the homepage as feeds, similar to other social media. This allows our users to quickly browse through what is happening on campus and engage with the app even when they are moving about.

Design Concept:

Display essential information all together in “Me” page

Through my research, I was able to select only those features that are the most needed and used most often, such as digital ID. With these improvements to the app, I believe that the users can better engage with the app, and more easily find the functionalities that are most relevant to them.

 

Reflection

What did I learn from this project?

  • Talking to your users early on and frequently can provide invaluable insights that cannot be gained otherwise.

  • Adopting appropriate user testing methods in each step of the design process can help validate your design decisions.

  • Your ability to synthesize and ideate based on the insights gained from user research is crucial for creating an experience that the users love.

What would I do if I had more time?

  • ​Interview more users to understand user scenarios more clearly.

  • Involve more stakeholders such as people from the school into the process so their interests and technical constraints can also be considered.

  • Keep iterating and testing the final design.

In the end.

This project sprung out of my personal interest. I really enjoyed the process, and would continue to work and polish it up. I will update my new design soon and maybe propose it to school someday!

 

Copyright © 2020 YAN WU

All Rights Reserved.

Img_21A