CU Mobile App Redesign
UX Research / UX Design / Information Architecture / Usability Testing
UX Research / UX Design / Information Architecture / Usability Testing
The CU Mobile App Redesign was created as part of my studies at Carleton University. The app is used in the everyday life of the students at Carleton, but it suffered from various design flaws.
The redesign of the app enhances the student's experiences, through the clear structure, and new features of the new app.
UX Researcher, UX Designer, & UI Designer
3 months
Zoom, Adobe Photoshop, Miro, Figma, Pen & Paper
This redesign process were the teams series of steps to turn our idea into a prototype. Even though this process might seem very linear it was ever evolving and iterative.
This process is an updated version of the UX design process to allow for a successful redesign as all the important and necessary information and data are collected before starting the redesign iterations.
I started the inspiration and research phase of the design process by conducting market research, an in-depth analysis of the current CU Mobile app, and evaluating the user reviews on the app.
Once the preliminary research was completed, I then moved on to user research. I performed a number of remote user interviews with current and former Carleton University students on the topic of the CU Mobile app.
The findings of the preliminary research and the user interviews were used to focus the attention of the project on these main points:
After conducting the research required for this project, I was able to formulate the problem statement and my possible solution.
From the findings of the user research, I created 4 user personas that depicted the user's different backgrounds and needs, as well as the different major pain points of the current app. I have posted one of these personas here to provide a look into my persona creation.
Once my user personas were created, I developed a task flow for the user. Which I later depicted as a wire flow with the medium-fidelity prototype.
The task and wire flow both show how a user can perform two tasks: save a new lecture link and end a video lecture.
I created a site map to organize the structure of the app, this is also a visual representation of the screens in the project and how they relate to each other.
I started sketching low-fidelity wireframes first with pen and paper, then I continued by using a digital sketchbook and Adobe Photoshop until I finished my low-fidelity prototype in Miro.
As this was a redesign of an already existing app for an existing institution, I based the color and font on Carleton University's Brand Standards Guide (2019) to give the app consistency with the university. The interactable elements and icons were chosen for their easy recognition of their affordances.
Next, I used Miro to create my low-fidelity prototype with a task description of the five tasks users can perform. I then used Figma to make the prototype clickable. This prototype was used to do a cognitive walkthrough (CW) with a number users.
The results from the CW were then used to make the medium-fidelity prototype.
After creating the low-fidelity prototype I wanted to evaluate the prototype using the cognitive walkthrough. First, I prepared a briefing which I gave to each participant, this included background information that the participants needed to understand the app.
Then, I gave the participants the prepared List of Tasks to complete using the low-fidelity prototype. While the user thought aloud and did all the tasks, I as the observer wrote down all important information from each part of the tasks on a separate document.
For each part of the tasks I wrote down yes or no for the given cognitive walkthrough questions, additionally, I wrote down any suggestions, problems, likes, dislikes, and successes of the participants.
After documenting all of the findings I evaluated the results. There were five common issues throughout most participants, for each issue I developed a potential solution for the next iteration of the prototype.
The final mockup consists of the major screens of the medium-fidelity prototype, these include new designs that the existing Carleton Mobile app does not offer.
If I were to continue the development of this project, I would recommend:
Refinement of the home page (make more information immediately available on login)
Reduce the usage of error page (add more dedicated page designs)
Further interaction feedback (button reactions etc)
Further developing the integration with cuLearn and the app (atm only provides an internal link to the website)
Develop a dark mode (which has become more common to help save battery and avoid eye strain)
If you are looking for more information about this case study, please contact me!