Canon Print App

‍

‍

Project Overview

This project’s main goal is to redesign the current Canon Print App on both UX and UI. This app is for Canon users to be able to scan, print, and copy wirelessly using their mobile devices. My aim to redesign the app by following the Human Interface Guidelines of Apple iOS and Canon branding guidelines. I would like to provide a more professional, up-to-date, and usable app that users will enjoy interacting with.

‍

‍

‍

‍

Creative Process

In this project, I have achieved my goal to follow and execute the iOS Human Interface Guidelines with our redesigned Canon Print app. It was also my first time to use Figma as my prototyping software. Before I started this project, I have watched a few video tutorials about Figma design and prototyping and I was surprised that the software offers tons of features and plugins that will be useful for our project.

‍‍

Tools:

Figma | Adobe Photoshop | Adobe Illustrator | iOS Human Interface Guidelines

Project Duration:

January 2022 to March 2022

My Role:

UI/UX designer | Researcher

‍

‍

‍

‍

‍

The Problem

Canon users are finding it difficult to use the current Canon print app due to lack of features, outdated interface and slow loading time.

‍

‍

‍

User Research

I have conducted interviews with some Canon print app users to be able to identify their struggles when using the app. I did some user-testing and was able to recognize the pain points of the users. The majority of users are working professionals and college students with busy schedules.

‍

‍

‍

‍

Design Process

‍

‍

‍

Reflection

My ultimate goal for this project is to be able to provide a professional, clean-looking, and up-to-date app that can easily be navigated by Canon printer users. I believe that I have met those goals by first enhancing the typography used in the app. For this project, I have used the SF Pro Text as my main font face which is also the system font style of Apple since part of my creative process is to follow the iOS human interface guidelines. To make the app looks more professional and clean, I made sure that the icons would be consistent in both shapes, structure, and color.

I had difficulty starting my low and mid-fidelity wireframes because I already have a design idea in mind. So what I did is I jumped into creating the high-fidelity wireframe first before doing the rest. Another difficulty I went through was finalizing the navigation bar. I am undecided whether to make a responsive dock or just a typical nav bar. Still, I ended up doing a clean navigation bar to avoid confusion from the users.

I have learned so many things in this case study, but the one thing I am proud of is learning how to use Figma. I have gained another software skill that I can use to be able to pursue my desire in becoming a UX and UI designer.

‍

Next Steps

- Review the consistency of font face and font sizes

- Add more tap and button indicators to the prototype

- Create a user-flow for photo printing

‍

FIGMA: INTERACTIVE PROTOTYPE LINK HERE