Why I included this project

Portfolios are a great way to show our best work, but I decided to show the first thing I ever designed, which wasn't that "great". We've all made mistakes and learned from them to become the designers we are today, and it's important to take a step back and criticize our work sometimes. When I started this project, my goal was to learn iOS Development to become a better developer back then.

Surprisingly, this project ended up being the reason I switched my career aspirations from developer to designer.

How it started

Going into university, I still didn't know what career I wanted for myself in the future. The only reason I decided to join the Industrial Engineering program was because of the breadth of subjects it covered. I figured that choosing a program with a broad focus will help me explore and learn about different fields and hopefully find something that I wanted to do for the rest of my life. In my first year, I took an introductory programming course: it was my first time writing code and I enjoyed every moment of it. I enjoyed it so much that it made me want to pursue a career in Software Engineering after graduation.

Learning by doing

I decided to start spending my free time advancing my programming skills because I only knew how to make basic for-loops and if-else statements in C. I've always believed that we learn the most by making things ourselves instead of just watching and copying tutorials. I decided to build an iOS app that would help students at my school.

The University of Toronto app

After my first year of school, I realized how little I used the official University of Toronto app that I downloaded during the first week of orientation. The truth is, it didn't offer me any value as a student. The app contained some icons that open links to UofT's faculty blogs and social media channels in your browser, which isn't exactly what students need to access frequently. To give you an idea, here's what the University of Toronto app looks like:

The current University of Toronto app

U of T official app

Other existing apps

I did some more research into what other apps were available to UofT students. I found different apps that were developed by the University of Toronto and some others that were developed by third parties such as student clubs and faculties.

Other apps for students

What students care about

From my research on existing apps and talking to a few students informally, I found some areas of opportunity that existing applications didn't address. First, students struggled with planning and managing their time, something that existing applications had not addressed. Second, there was little awareness about safety services available on campus, such as a chaperoning service to accompany students back home to guarantee their safety at night, and offices that deal with anti-racism, cultural diversity, and sexual harassment. Finally, students wanted to know more about the health & wellness services offered by the university, such as the Good2Talk helpline and the Gerstein Center for mental health.

cartoon about education

Academic planning & management

Helping students keep track of their classes, exams, and academic performance

cartoon about safety

Campus safety

Offering students access to Campus Safety personnel and initiatives

cartoon about wellness

Health & wellness

Raising awareness about Health & Wellness services on campus

My first sketch

To be perfectly honest, I knew nothing about design going into this project. I didn't know how to create a proper navigation structure or establish a clear visual hierarchy. I decided to make it as simple as possible: a 3x3 grid layout where each cell would represent a distinct feature with a label and icon. Not exactly the most well-thought-out design, but I was too inexperienced to even explore alternative layouts. I was just focused on becoming a better developer.

sketch

The making of UofT Helper

I couldn't wait to turn this sketch into a real, functioning app that I would build from scratch. A few months before that, I was writing my first "Hello World" program in my introductory programming class, and making an entire app was uncharted territory: it was scary and exciting at the same time.

It took me around 8 weeks to fully develop the app. I called it UofT Helper because I felt the name was appropriate for the goal of the app: to help students at the University of Toronto on a daily basis. From a design perspective, I later realized how many mistakes I had made, which I discuss and reflect on near the end of this story.

U of T helper screenshot

UofT Helper at a glance

Calculating your GPA

As university students, we're always stressing out about our GPAs. Surprisingly, the University of Toronto did not have a GPA calculator that students could use. The only resource that students could use was a lengthy PDF document detailing how to calculate your GPA, which was not practical at all. I decided to build a GPA calculator within UofT Helper to make it much easier for students to keep track of their academic performance. The GPA calculator ended up being the feature that received the most praise from students once UofT Helper was released.

GPA Calculator

GPA calculator

Accessing your class schedule

During my first year, I noticed students using creative ways to easily access their class schedules. For engineering students specifically, we had 25+ hours of classes per week, so it was hard to memorize the time and location of each class. There was also no easy way of importing your class schedule to your phone calendar. Some students printed their class schedule, some took screenshots and saved them in their photo gallery, and others even used it as their phone's wallpaper. To address this, I decided to include a place in the app where students can simply take a screenshot of their schedule and store it for easy access. This approach was better than printing it since you could easily lose the paper, or even saving it in your gallery since you would have to scroll through it each time to find it.

Class Schedule

Schedule saver

Checking your exam schedule

When the final exams schedules were released, each faculty would release its schedule on its website. In many cases, these were hard to find and students had to navigate through multiple links and pages to access them. It becomes even more time-consuming when students are taking multiple courses from different faculties. To make it easier, I linked each faculty's exam schedule to the app and also allowed students to create their custom exam schedule.

Exam Schedule

Exam schedule Exam links Add an exam

Staying informed

In case of any emergency or closures, the campus status website is immediately updated by the University of Toronto. Unfortunately, there was little awareness about this website so I decided to include it in the app. The "Campus Status" button simply opened a web page within the app and loaded the University of Toronto's campus status website.

Campus Status

Campus status

Getting the first downloads

To get the word out, I posted a short message on all the University of Toronto groups on Facebook. I realized that people weren't always incentivized to download apps, so I decided to give away three $20 gift cards to 3 people who downloaded the app and left a review on the App Store. It was also a way for me to encourage students to give me feedback to further improve the app.

Facebook Post

Facebook post

With one of the three gift card winners

Gift card winner

Getting to 7,000+ downloads

Since UofT Helper's release, I have stopped promoting the app but it's still being downloaded to this day. As of 2019, the app is the 3rd search result when searching "UofT" or "University of Toronto" on the App Store. Although I haven't updated the app in years, I've decided to keep renewing my Apple Developer license to keep it on the App Store for students to use. Surprisingly, the largest download spike occurred in September 2017 with 2,000+ downloads, one year after the app was released. The spike occurred at the start of the 2017-18 academic year, so I imagine many first-year students had downloaded it when they began their studies. At that time, UofT Helper was the first result when searching "UofT" or "University of Toronto" on the App Store, surpassing the university's official app.

App Store download statistics (2015-2019)

U of T helper app store stats

The valuable lessons I learned

Get more input from your target users

Although I thoroughly researched existing applications and talked to a few people before starting, I should have tried talking to more students to better understand their needs. Thankfully, the features I had come up with turned out to be valuable to students, but I should not have fully developed an app without testing it first.

If I had to do it again, I would create a short survey to post on our student group on Facebook and get some insights to guide the design process. I would also try to form a small group of users to test and share my ideas with.

Be quick, but don't hurry

I was trying to get this app done before school started so I could launch it during the first week of classes and promote it to first-year students. Looking back, I should have dedicated more time to the design and iterated a few more times instead of going from paper sketch to functioning application. Design is an iterative process.

If I had to do it again, I would have created multiple paper sketches of different design alternatives and then tested them with the user group I formed from the survey responders. That would've helped me converge towards a design that worked best for my users while also testing the initial features I had thought of.

A lot goes behind design

Before this project, I wasn't familiar with the amount of work and detail that went into designing products. That was the main reason my app didn't look "great" in the end: I didn't have consistent visual assets, some spacing and alignment was off, the overall navigation could have been more usable, and much more. I should have spent more time reading about design systems, guidelines, typography, visual hierarchy, colour theory, and spacing.

If I had to do it again, I would have clearly defined some "rules" regarding colours, spacing, iconography, and typography to make the app more consistent and up to design standards.

Why this project is still my favourite

I learned a (really cool) new skill

4 months before starting this project, I had never written a single line of code in my life. My introductory programming course sparked my interest in expanding my technical skills beyond what I was taught in the classroom and applying those skills to build something real.

I built something that students found useful

As of today, UofT Helper has been downloaded over 7,000 times and I've received a lot of positive feedback from students about the app. The app is not the perfect solution, but it fills a gap that other apps didn't.

I realized what my true passion was

Taking an introductory programming course and building an app are two different things. Building an app while learning Swift wasn't as smooth as I expected it to be because I spent more time debugging than developing (thank you Stack Overflow). However, I realized that the most enjoyable part was brainstorming features, making the interface in Xcode, and picking colours and icons. In other words, I enjoyed thinking of my users' needs and translating them into a tangible solution.

From developer to designer

After launching UofT Helper, I started discovering the world of UX Design and shifted my focus from strengthening my technical skills to building my design skills. I've come a long way since then by taking human-centred design courses at my school, interning as a UX Designer at Google and two of Canada's biggest companies, and winning prizes at hackathons and competitions as the designer on my teams.

Everything in this portfolio is a result of this first not-so-great design, and I hope you'll enjoy seeing my evolution as a designer as much as I have.

Continue reading

Cortex

Designing a mental health app for students

Read story →
← Home