SFU Snap App Redesign
A comprehensive UI/UX redesign of the SFU Snap App to improve user experience and usability for Simon Fraser University students through Design Thinking Process.
Why Redesign?
- The app keeps on logging out frequently
- It crashes a lot during usage
- Unreliable design and interface
- Bad app user experience overall
- Poor information architecture and user flow
Research & Discovery
Understanding the app's purpose, user needs, and opportunities for improvement through the Design Thinking Process
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 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.
Challenge
Working as a UX Designer 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.
User Interviews
Conducted interviews with SFU students to understand their pain points, needs, and frustrations with the existing app through Instagram stories and in-person sessions.
Empathy Mapping
Created empathy maps to visualize user attitudes and behaviors, capturing what users say, think, do, and feel while using the SFU Snap App.
Persona Development
Developed user personas based on research insights to represent different user types, their goals, frustrations, and needs throughout the redesign process.
Ideation & Design Thinking
Applying the Stanford d.school Design Thinking Process to solve user problems systematically
Design Thinking 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 following a structured approach to problem-solving.
Research Plan & Analysis
I carried out several research methods including Instagram stories for surveying app usability, empathizing with students to understand their needs and pain points. I created empathy maps, personas, user stories, and user journey maps to understand user needs and develop problem statements to define students' needs.
Understanding the User
Interviewing SFU students to understand their needs, pain points, and frustrations with the current app
Interview Transcript – Sabina
"The app keeps crashing when I try to check my schedule. It's so frustrating because I need to know my class times and locations. The interface is confusing and I can never find what I'm looking for."
Interview Transcript – Alisa
"I use the app daily but it's unreliable. Sometimes it logs me out randomly and I have to restart everything. The design feels outdated compared to other apps I use. It needs a complete makeover."
Synthesizing Research
Creating personas, empathy maps, and problem statements to define user needs and guide design decisions
Problem Statement – Sabina
Problem Statement – Alisa
Persona – Sabina
Persona – Alisa
Empathy Map – Sabina
Empathy Map – Alisa
User Journey & Goals
Mapping the complete user experience and defining clear objectives for the redesign
Design & Prototype
Comprehensive design process from wireframes to high-fidelity prototypes, establishing consistency and scalability
Paper Wireframes (iPad)
Initial sketches and wireframes created on iPad to rapidly explore multiple layout possibilities and user flow concepts.
Low-Fidelity Prototype (Figma)
Created low-fidelity prototypes in Figma to test basic user flows and validate information architecture decisions before moving to high-fidelity designs.
High-Fidelity Prototype (Figma)
Developed interactive high-fidelity prototypes with full visual design, interactions, and micro-animations for usability testing.
Restructured the app's navigation and content hierarchy to create logical user flows, ensuring intuitive access to all modules from a central dashboard.
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. The components of the design system were borrowed from SFU's design Library, with custom icons for the app.
Design System Components
- • Typeface — PF DinDisplay Pro
- • Type Styles — H1, H2, Body styles
- • Colours — Primary, Secondary, Accent, etc.
- • Icons — App icon set
The redesigned dashboard provides centralized access to all modules, improving usability and user satisfaction.
Key Features Redesigned
- Simplified course schedule navigation
- Intuitive campus map integration
- Quick access to transit schedules
- Streamlined dining and parking services
- Centralized dashboard for all modules
Design Principles
User-Centered Design
Focusing on student needs and pain points
Visual Hierarchy
Clear information architecture and navigation
Performance
Reducing crashes and improving reliability
Project Results & Impact
Comprehensive analysis of testing results, project outcomes, and personal growth throughout the redesign process
Watch the complete SFU Snap App redesign process and final prototype demonstration.