My Design Process of Creating an App

In the summer of 2016, I chose to expand my design palette and undertake an extensive series of courses at the University of California San Diego to complete my Interaction Design certification. All of my hard work and extra efforts toward this certification come to a close next week and I wanted to take the time and reflect on my learnings.

It has been a lot of hard work trying to complete this course while juggling a fast paced full time job as a Sr. UX/UI designer at Bank of Montreal and being a parent of a 2-year old. This experience taught me a lot about how hard I can push myself given all of the circumstances that arose in the past year.

Even though I have 10 years of experience in my field and an extensive background rooted in graphic/web design, I chose to take on this interaction design certification to expand my skillset and make myself more marketable.

The certification started with a few courses to establish a foundation for best practices in UX and UI. Although I consider myself very seasoned in this aspect, I didn’t mind a little refresher on the subjects.

The certification wraps up with a final capstone project to be completed over 10 weeks. As the 10th week approaches, I feel that I have produced a polished prototype that is both useful and appealing.

Brainstorming

I first gathered the idea of my app by exploring and analyzing my own life and trying to find ways to make certain aspects a bit simpler. Myself, like millions of other people, have very busy lives. From full time jobs to family life, there is a lot to juggle. So why not create an app to organize all of these tasks in one place? While conducting needfinding exercises in the course, it was an obvious need for myself and countless numbers of other people.

Wireframing

Now that I had a solid idea of what I wanted to do with my final project, the next step was to get to work and start fleshing out some wireframes and build a skeleton of this app. Considering the app was going to be fairly complex in nature with how much a user can personalize this app, it was a challenge to compile the most useful functions on the app homepage without making it too cluttered.

See below for one of the first iterations of the homepage of my app:

Overall, I wanted to make it effortless to access the tasks and other functions in the app on the homepage itself. I first explored using tabs for the calendar, tasks, and social sections, but this proved to make the page way too cluttered when the user accessed the calendar and social sections.

When I approached the UI stage, I did away with the tab navigation and started to develop coloring and design treatments to my wireframes.

Here is an example of the first iteration of the homepage and task categories:

Basically, the user would be able to tap an each category and view the tasks assigned to that category with the ease of just 1 tap. The user would also be able to taken to the ‘add new task’ screen straight from the homepage. I figured these were the items the user would want to access upon landing on the homepage of the app.

User Testing

Now that I had a solid foundation and first iteration of my app, it was time to get some real user feedback on it. I A/B tested 2 similar, but different designs with 4 users to see which one was preferable as well as other feedback on the general design and ease of use of the app.

All users agreed that the app was easy to use, but that it could use a bit more polish. One user suggested the use of icons and maybe some photography to liven up the look of the app to make it a bit more appealing. This statement I definitely agreed with. It was definitely in the plans to polish this up following the user testing since this was not a fully fleshed out app at the time of testing.

It was very valuable to get the unbiased opinions of the users on this app. I gained a lot of insight into what was working and what could have been executed a bit better.

Final Iteration

Using all of the great information that I learned throughout the course and useful insights from user testing, it was time to implement some changes to my app. It was time to create some icons and use some photography to clean up the look and feel of the app.

Here is a screenshot of the homepage as it exists today with all of the changes implemented:

By using an icon system and revising color treatments and fonts, the app has transformed into a useful tool that is easy to use and also looks nice too.

Overall, this certification has been a pleasure to pursue and I am honored to receive it. I have learned a lot of useful techniques in the past year to continue my growth as a designer. I am looking forward to pursuing more certifications in the near future!