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 in order to become the designers we are today, and it's important to take a step back and criticize our own work sometimes. But this was never a design project to begin with, 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. Here's the story:
Going into university, I still didn't know what career I wanted for myself in the future which is why I decided to go into engineering and keep my options open. In my first year of engineering, I took an introductory programming course. It was my first experience writing code, and I loved every moment of it. I liked it so much that it made me want to become a software developer after graduation (seriously). I was so happy to have found something that I could see myself doing after graduation. The following summer, I decided to improve my technical skills further by learning Swift through online tutorials and building an iOS app.
I decided to build an app for students at my school, the University of Toronto, that I ended up publishing to the App Store. The app has been downloaded over 7,000 times since its release. BUT, the main reason I decided to include this project in my portfolio isn’t to brag about the number of downloads or the fact that I developed it by myself. I included this project because it sparked my desire to learn and explore the world of Design so I can be better at it in the future.
Type: iOS Development
Tools: Xcode, Swift
Completed: August 2016
Quick links: App Store
After my first year of school, I realized how little I used the University of Toronto mobile app that I downloaded during the first week of orientation. The truth is, it didn’t really 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:
I did some more research into what other apps were available to UofT students. I found two categories of apps: apps developed by the University of Toronto and apps developed by third parties such as student clubs and faculties.
From my research of existing apps and talking to a few students informally, I found some areas of opportunity that existing applications didn’t tackle. A big struggle in university is planning and managing your time, something that existing applications had not addressed. Additionally, there was little awareness surrounding safety services available on campus such as a chaperoning service to accompany students back home to guarantee their safety at night, and anti-racism, cultural diversity and sexual harassment offices. Finally, there was little knowledge of health & wellness services offered by the university such as the Good2Talk helpline and the Gerstein Center for mental health.
I'm using the word design loosely here as I had no prior experience designing interfaces or any knowledge of typography, visual design or information architecture: I was simply a developer trying to get his app done as fast as possible. I did start out with a rough sketch of my idea though:
The design was the simplest layout I could think of: a 3x3 grid that would contain all the different features. Not exactly the most well-thought-out design but I was too inexperienced to even explore alternative layouts.
I couldn't wait to turn this sketch into a real, functioning app that I would build from scratch. A few months prior to that, I was writing my first "Hello World" program in my introductory programming class, and building an entire app was uncharted territory: it was scary and exciting at the same time.
It took me around 8 weeks to completely 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. Here's what the final product looked like along with an explanation of its features:
Although I thoroughly researched exisiting applications and talked to a handful of people before starting, I should have tried talking to more students to gain a better understanding of their needs. Thankfully, the features I had come up with turned out to be valuable to students, but I should have not taken the risk of fully developing 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 from the survey to test my ideas with.
I was trying to get this app done before school started so I could launch it during the first week of classes and advertize it to freshmen. Looking back, I should have dedicated more time into the design and iterated a few more times on it instead of going from paper sketch to functioning application. Design is a continuous process.
If I had to do it again, I would have created multiple paper sketches of different designs and then tested them with the user group I formed from the survey responsders. 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.
Before this project, I wasn't familiar with the amount of work and detail that went into designing digital 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, and more. I should have put more time into reading about design systems, typography, color theory, and spacing.
If I had to do it again, I would have clearly defined some "rules" regarding colors, spacing, iconography, and typography to make the app more consistent and up to design standards.
4 months prior to starting this project, I had never written a single line of code in my life. My introductory programming course really got me interested in expanding my technical skills beyond what I was taught in the classroom and applying those skills to build something real.
As of today, UofT Helper has been downloaded over 7,000 times and I've received positive feedback about the app. The app is definitely not the perfect solution, but it fills a gap that existing applications didn't.
Taking a programming course and building an app are two totally 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 the application (thank you Stack Overflow). However, I realized that the part I enjoyed the was most brainstorming features, making the interface in Xcode, and picking colors and icons. In other words, I really enjoyed thinking of my users' needs and translating them into an app, even though I didn't have a good eye for design back then.
After that project, 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-centered design courses at my school, enhancing my design skills through personal projects, interning as a UX Designer at 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 my evolution as a designer as much as I have!