A mobile app redesign

A redesign that is aimed to accommodate the needs of a Goldsmiths student by creating value through its usability, functionality, and aesthetic

A grad school redesign project for Goldsmiths, University of London student application, that includes user research, product design & prototyping

Problem

The application was holding a vast amount of content but was failing to deliver it efficiently, in other words, its information architecture was failing the students from achieving the information they needed.

  • The application was - especially the home page- eye-straining and crowded. Most of the sub-pages, such as careers, were an adaptation of the web pages into the application and not created mobile application-specific.
  • It was involving colors and animations to reflect Goldsmiths’ colorful and diverse habitats and artistic positioning, but the user experience was overwhelming and complicated.

Challenges

  • The project had a 1-month time limitation & the application had a vast amount of content.
  • As so, sub-sub categories and Learn.Gold; which is a product all by itself, is not included in this project’s scope

Interviews

During the ideation phase of the project, I conducted user interviews to build new personas and to inform the design. By focusing on my target audiences' values, motivations, and daily routines I've gathered their insights on using the application.

They were having a hard time navigating through the application, having trouble finding the essential information that is available in the application but taking too much effort. The home page was giving the feeling of exhaustion due to its crowded look and essentials were lost. I referenced the user interview findings throughout the entire design process.

Information Architecture

To test the information architecture of the existing application a usability test was conducted to see if the users were able to find the information they needed.

Of the participants, 56% completed the task successfully and 78% of the answers were a direct success, which means 22% of the participants backtracked between options before deciding.

The brainstorming process started with laying out the application’s existing information architecture.

As can be seen in Figure 1, there are multiple ways of arriving at a single category. Wellbeing, Careers, Library, and IT Support in addition to others, for example, are both existing as their own categories on the Home page as well as also as a sub-category under the Student Essentials which is creating information pollution.

The IA was restructured in a more unified way as can be seen in Figure 2.

Sketches

I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user interviews, the business goal, and the results I have gathered from my research on information architecture.

They each pointed to the fact that there were too many distractions in the flow. We came back to the sketches throughout the entire design process to make sure that we don’t lose sight of our primary goals and ideas.

Typeface & Color

Color selection was inspired by the school’s branding colors which were Gold, Purple, and Black. The yellow shade that was used in place of Gold was the color that is currently being used on the Goldsmiths website.

UI Design

The existing login page was not a good reflection of the Goldsmiths’ colorful and diverse culture since it looked serious and cold and also it wasn’t matching with the home page.

With the use of the university’s photograph in the background and creating a welcome screen that is personalized with the user’s photo and name, the redesign intended to create a warm and personal experience for the user’s login.

Login Page

By using rounded cells and a colorful yet, coherent icon structure it is intended to accommodate friendliness and to reflect upon the youth of the students the university holds.

The text “Goldsmiths Students” is replaced with a personal welcome message of “Hello X” as a continuum from the personal hub feeling that is intended to send out.

Home Page

As a result of the new information architecture, fewer categories are being displayed on the home screen making it look more organized and comforting.

The bottom navigation is removed, Settings is moved into the Home screen as a category, and arrangement is still possible with the “+” icon, which also gives the students to add or remove their own essential categories and customize their home page.

The “Log out” option that used to be at the bottom of the Settings menu is moved to the User icon & signing out and changing user when necessary is simplified.

Timetable

One of the insights that were gathered was that students were having a hard time using their timetable to look for classes and then using the Room Finder to learn the location of the classroom.

It was a 4-step process for a student to go from Home Screen to their timetable, look at the room number that the class is going to take place, then return to Home, scroll down to Room Finder, enter the room number, and see the map.

Calendar

New Calendar integrates with the room finder and shows the location of the class directly from within the Calendar which drops the process into 2 steps.

Moreover, the redesign aims to have a more intuitive calendar that unifies the student’s life at the university by including the events that he plans to attend to integrate with his calendar look in addition to his lectures. When adding an event from the Events category, it automatically synchronizes with the calendar and can be viewed here along with the lectures in the daily view.

In the existing application in order to change the date to view next week’s lectures, students need to tap on “Date” and select from the bottom-down date picker menu whereas in the redesign student can simply tap on the date.

Settings

The Settings menu is moved from the bottom navigation and into the cells on the home page.

The contents have not been changed however an identity card is created to show the personal details on the same screen instead of going down one other level.

Receiving alert preferences have been changed with a switch button like Touch IDs to create a unified look.

Student News

The website look that the Student News had is renewed by an original look that is mobile friendly and easily scrollable.

A distinction is created between the News whether they are ‘read’ or ‘unread’ by the student so that newer ones can not be missed.

Events

The existing events category was only showing the student’s department events, in this example, Computing Events. The category is renamed as ‘Events’ and positioned as an all-inclusive category.

In other words, Events is holding the information for all-campus activities such as workshops, concerts, movie nights, etc. However, a similar distinction that was in the Student News is applied here and the Events were divided into two; all vs department.

As so, the student has the capability to search and find all the related information from a single screen.

In addition, when going into the detail page of an event, if the student decides to attend that event, he can simply “Add to Calendar” and the Events will be synced with “Calendar”.

Next steps

Goldsmiths, the University of London's mobile student application is an indispensable information hub which is holding huge potential but fails to deliver it efficiently.

The problem with the application is that it is too complex and too crowded that the students are forced to seek out the information rather than being presented with it.

The paths are unintuitive and the number of steps that are required to fulfill one task is too much. The aim of this project was to solve these problems by redesigning the application.

01

Starting with sketches and post-its, the process evolved into its final version with the use of Sketch and Invision. The alternative versions were also designed and evaluated.

02

By creating and deploying a survey the user feedback was collected and those that can be applied were immediately implemented while some were saved for the need for deeper research and analysis which will lead to future iterations of this application.

03

This redesign of the Goldsmiths mobile application is solving the problems this project focused on. However, there is still too much room for future improvements that will create an even better user experience for the students of the university.

Check other cases

See all studies
Go