Role
UX Designer,
UX Researcher
Collaboration
Mary Ditta,
Samm Du,
Murray Smith,
Nehchal Kalsi,
Yasamin Zarghami
Timeline
Sept – Dec 2022
(~ 12 weeks)
Overview
TravelSco: academic trip preparation app
At the University of Toronto, we developed TravelSco, an app aimed at helping international students prepare for their academic journey. This project involved user research, design, and usability testing to gain practical experience in UX design and research.
Problem
Our goal was to simplify the complexities of travel, legalities, and relocation for undergraduate students.
Outcome
Developed a mobile app with reliable resources for students studying abroad.
Highlights
01.
Discover requirements
Access and save essential immigration information.
02.
Create multiple journeys
Explore several countries and universities at the same time.
03.
Track your progress
Track progress with a checklist of requirements.
04.
Communicate with peers
Join discussion to learn from others' experiences.
Problem Exploration
Streamlining study abroad preparation
International students, including myself, struggle with finding clear information on entry, housing, documentation, and local community in destination countries. This experience raises the question:
How might we reduce the stress of international students?
Research Summary
User research findings
Conducted 5 user interviews and white paper research, supplemented by a survey of 10 individuals, to identify pre-departure and departure stage pain points. Here are the findings:
01.
Official websites: complex yet reliable
Hypothesis: Information overload leads students to secondary resources.
Finding: Official sites provided credible information but were time-consuming due to complexity.
02.
Managing multiple tasks
Hypothesis: Students struggle with deadlines.
Finding: No issues with dates, but difficulty in managing information across schools. Surprises included housing and fund confirmation for Canada.
03.
Challenges in socialization
Participants struggled with making new friends, often turning to online communities like Reddit for both social and formal issues, including housing.
User Journey
Incoming students experienced frustration upon arrival from overlooked pre-arrival steps.
Insights
Streamlining pre-arrival resources like official websites and social platforms can save time, reduce stress, and ensure crucial steps are not missed for students.
User Flow
Collaborative ideation and app modules prototyping
Team members individually ideated and wireframed to address user pain points. Then we reviewed all sketches on a Miro board. Based on the individual sketches I created a collaborative lo-fi prototype, categorizing TravelSco's user flow into Onboarding, Discovery, Tracking, and Discussion modules.
01. Onboarding
Select the country to explore
Select university to explore
02. Discovery
Explore immigration information
Save resources for future access
Explore multiple journeys
03. Tracking
Mark requirements completed
Use a progress bar
04. Discussion
Join discussions
Share experiences and questions
Wireframes
Iterating on modules
We validated prototypes through heuristic evaluation and usability testing, refining design based on user feedback and behavior analysis.
Onboarding – Before
👁 #1: Visibility of system status
Unclear progress bar (2 or 4 steps).
💎 #8: Aesthetic and minimalist design
Confusion between Skip and university choice as CTAs, and screen clutter.
Onboarding – After
The redesign enhanced UI readability, simplified elements, and emphasized university selection over the "Skip" button.
Discovery
The Discovery module begins with the "Discover" page, offering two pathways: immigration and university information.
Before
🕹 #3: User control & freedom
No progress reset option. Can't explore multiple universities simultaneously.
Iteration
🤔 Confusion with "Reset progress" functionality
Uncertainty about its impact on list items after heuristic evaluation.
🚶♂️ Unclear journeys initiation or editing
Users missed the "Create new journey" button for adding universities, couldn't explore multiple countries at once, and lacked journey editing.
After
"Add a new university" replaced "Create new journey" for clarity in exploring multiple universities within a country. We also introduced an Edit icon-button for journey editing, based on usability testing feedback.
"My journeys" was added to the profile menu for easy access, displaying a user's explored countries and universities.
Tracking – Before
The prototype lacked consistency in typography, spacing, and alignment with other app elements.
Tracking – After
The updated version aligns with design guidelines, improving spacing and layout for headings, checklists, and resource lists.
Discussion – Before
📖 #4: Consistency and standards
Discussion not available on general pages, only within each section page.
Discussion – Iteration
🥱 Difficulty noticing discussion panel
Added discussion panel after evaluation, but users struggled to notice it, mistaking it for a non-functional element at the page bottom. Closing the discussion page was also challenging due to an unusual pull-down motion.
Discussion – After
Discussions moved to the bottom bar for easy access, categorized by countries for separate immigration and university discussions. External platform links, such as Reddit, available on the community page.
Branding
TravelSco’s Design System
TravelSco combines formalized blue for credibility with user-friendly rounded shapes and playful hand-drawn illustrations.
The design system includes components and styles to maintain consistency in the branding.
Final Prototype
A few screen of hi-fi solution
Feedback & Takeaways
Positive feedback
“
It's a really good place to have all the information in…I found it very hard to have these [documents, housing, etc..] questions answered, just look at the official website - there is so much information.
“
The app gives you a concise way of structuring here stuff. I would definitely use this if I would be applying to new universities, cause nothing like this exists, so that’s why I really love this application.
User requests:
Co-ops/work placement integration.
Expanding to tourists.
More flexibility in marking requirements as complete, including custom tasks.
Team's future goals:
Improve multiple journey features.
Consistent UI design.
Streamline user flow to reduce the number of steps needed to accomplish user goals.
Integration with external platforms (e.g., Reddit) for discussions to get user trust.
Diverse usability testing participants from various universities and backgrounds.
Lessons learned
TravelSco taught me the importance of user communication, teamwork, and leadership. User feedback drove effective design solutions, and leadership improved my communication skills and accountability with group support and feedback.