Project Overview
Introduction
SFU Snap App was created by students, for students. It provides you with the information you need to easily plan your campus experience in a snap. Access your personalized course schedule, find room locations, consult transit schedules, and explore campus services like dining and parking.
SFU Snap App has existed for a long time, and I saw this as an opportunity to revamp the looks and feel so that the app can become an integral part of Simon Fraser University students’ life. After using it I figured out that the entire app infrastructure and user interface can be redesigned and improved to enhance students’ experience.
Project Duration
This was an individual project and I gave myself 4 months to work on it. I divided my work into weekly goals and every day I tried to fit in small chunks of time blocks in my calendar (approximately 2 hours) to work on the project.
Goal
Make the app user-friendly by fixing the design components and improving usability. Improve user experience and retention by finding user pain points via UX research methods.
My Role
User Researcher, UX/UI Design, and Prototyping.
Problems
According to some research I did, I found the following problems with the app -
The app keeps on logging out
It crashes a lot
Unreliable design
Bad app user experience
Bad information architecture and user flow
Here are some reviews from students -
* Images collected from Apple App Store - https://apps.apple.com/ca/app/sfu-snap/id1033432123
Responsibilities
I carried out several research methods. I had put Instagram stories, surveying app usability. I emphasized with them to understand their needs and pain points.
Created empathy maps, personas, user stories, and user journey maps to understand user needs & develop problem statements to define students’ needs.
Based on the goal statement I created storyboards, implemented information architecture to organize information, developed both paper and digital wireframes (in Figma), and created a low-fidelity prototype initially.
Built mockups and high-fidelity prototypes in Figma using a very appealing design element and principle which synced with the university’s brand identity (similar fonts, colors, and icons).
Challenges
I found it quite challenging to conduct user research and surveys. At first, I used a secondary research method to collect data from the App Store. Later I carried out a survey by putting in Instagram stories and asking to collect their reviews on the app usability. I also had trouble organizing data and assets. I also found that working as a UX Designing in a solo project can get very overwhelming at times because I have to deal with almost everything that a team would have done together. It somewhat gave me an insight into the responsibilities of a UX Designer at fresh startups.
Understanding The User
Design Process
This project was built upon the standard of the Stanford d.school Design Thinking Process. I successfully empathized, defined, ideated, and redesigned the app.
Summary
At first, I collected data from secondary research. I collected user reviews from App Store and tried to identify common pain points in order to build personas.
Later, on I moved onto primary research by carrying out several UX research methodologies. I interviewed my friends, classmates, and others I have had known from my HCI group projects. I did this by asking open-ended questions and allowing them to provide as many details as they could. This helped me collect a large amount of data. I have also documented interview transcripts.
As the app already existed, I evaluated reviews by conducting usability studies. I did this by posting survey links to my social media, posting stories on Instagram with questions, and asking students close-ended questions to generate numerical data.
Interviewing Users (Students)
Here is the transcript of my conversation with Sabina and Alisa. They were kind enough to agree to do a zoom call and we spent about 30 minutes in the interview. I asked her several questions and encouraged them to let her thoughts out.
Interview with Sabina
Interview with Alisa
Pain Points
After the interview, I took some time off to analyze and see things from their perspective. I tried to understand their motivations and needs and came up with a solution which I have posted later in the solution statement.
Problem statement of Sabina
Problem statement of Alisa
Personas
I drafted a persona of their Personas by conducting research (interview) and by identifying their pain points that frustrates them from reaching their goals. I have also quoted a direct statement from them and later wrote a scenario which gives an overview of how their painpoints look like.
Sabina’s persona
Alisa’s persona
Empathy Map
I have documented an additional empathy map for Sabina and Alisa and listed down some of their concerns to have a deeper understanding of her problem.
Empathy map for Sabina
Empathy map for Alisa
User Journey Map
I have created visualization from data of student’s relationships with the SFU Snap App over time and across different paths. The below image showcases a timeline of all touchpoints between students and the app.
Goal Statement
Getting Started With The Design
Paper wireframes
This is the ideation phase. After brainstorming and combining ideas, here are some of the paper sketches I came up with and created wireframes on my iPad. Here are the first five wireframes of how the screen is supposed to look like. While sketching, the user’s journey was my main consideration. I also kept personas in my mind and wrote out a few on papers right next to me, to help me reflect and sketching accordingly.
Low-fidelity Prototype
I created a low-fidelity wireframe and prototype on Figma.
High-fidelity prototype
Later, I moved on to creating and designing the app UI and prototype it.
Information Architecture
I designed the information architecture of the app on Figjam.
Design System
A Design System is a set of interconnected patterns and shared practices coherently organized. Design Systems aid in digital product design and development of products such as apps or websites. Here are the components of the design system I borrowed from SFU’s design Library. The icons for the app are only custom.
https://www.sfu.ca/communicators-toolkit/guides/brand-guide.html
Here is a quick preview of the SFU Snap App Dashboard.
Usability study
Parameters
Study Type
During a usability study, I have observed observe the participants understand how they interact with the prototype of the product and complete tasks. Then I used the insights from the study to make improvements to the later designs. I conducted multiple usability studies because the SFU Snap App looks and functions differently at every stage.
Moderated: I carried it on 2 of my friends.
Unmoderated: 5 of my friends agreed on an unmoderated study.
Location
Vancouver, BC
Dhaka, Bangladesh
Participants
Alisa, Sabina, Joslyn, Sam, Robin.
Length.
2 days.
Findings
The entire dashboard needed a redesign where I they can access every modules from.
Refining The Design
Mockups
I revamped the entire design layout with a new iPhone Xs mockup.
High Fidelity Prototype
This is a board of the newly revamped UI design.
Preview of SFU Snap App
Going Forward
Takeaways
Impact
Make SFU Students actually use the app.
What I learned
What it is like to work as a generalist.
Next Steps
I am looking forward to taking part and contribute towards the month of May which is Mental Health Awareness month by designing an app called Lets Talk.