New graduate studies admissions and awards system.

**Role:** User Experience Analyst

**Organization:** [Information Systems, Simon Fraser University](https://www.sfu.ca/information-systems.html)

**Timeframe:** March 2022-November 2022

## Coming soon. 🚀

goGrad

Professional and contract work for various organizations in branding and identity and graphic design deliverables.

**Role:** Design Contractor

**Timeframe:** 2016-Present

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FHcF5P0qXiVpbQrz0GCUQ%2F92e196c6-114d-4af6-9ddc-94e1405681eb.jpg?alt=media&token=1ac46d4c-c671-4670-a5b6-16ab6303687e","id":"92e196c6-114d-4af6-9ddc-94e1405681eb","width":1920,"height":1080,"filename":"sdt.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FHcF5P0qXiVpbQrz0GCUQ%2F73c3c747-b78d-43bd-81b2-a5c3dd72dab4.jpg?alt=media&token=83e7bcc7-4178-4d19-bcf0-3af53f02f895","id":"73c3c747-b78d-43bd-81b2-a5c3dd72dab4","width":1920,"height":1080,"filename":"sabers.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FHcF5P0qXiVpbQrz0GCUQ%2F00663962-ac69-42d0-8021-6fe651b363be.jpg?alt=media&token=e80a60b6-b612-46b2-a494-6cfb4750fb53","id":"00663962-ac69-42d0-8021-6fe651b363be","width":1920,"height":1080,"filename":"viperz.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FHcF5P0qXiVpbQrz0GCUQ%2F6d21b751-1bf5-444e-80e5-94eb4c511463.jpg?alt=media&token=b2c03d6b-bed1-4c09-8c1a-af625c89d6d5","id":"6d21b751-1bf5-444e-80e5-94eb4c511463","width":1920,"height":1080,"filename":"aa.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FHcF5P0qXiVpbQrz0GCUQ%2Fafff5fc5-c80f-447e-a737-7951b786ca50.jpg?alt=media&token=223d2113-9cb9-4004-a04d-888ac7e47413","id":"afff5fc5-c80f-447e-a737-7951b786ca50","width":1920,"height":1440,"filename":"posters.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Graphic Design Projects

Graphics for a graduate studies university department.

**Role:** Marketing & Communications Associate

**Organization:** [Graduate & Postdoctoral Studies, Simon Fraser University](https://www.sfu.ca/gradstudies.html)

**Timeframe:** April-August 2018

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FKSMUIJkGxecBrNTZqYYb%2F75e49f75-ccc3-4251-b428-7efe4aa9852c.png?alt=media&token=a46223ee-a6ff-44c7-ae4a-17fd758425cc","id":"75e49f75-ccc3-4251-b428-7efe4aa9852c","width":1920,"height":1080,"filename":"gps.png","type":"image/png","caption":"","border":false}]}
```

## Overview

I was a Marketing and Communications Associate at Simon Fraser University’s (SFU) Graduate and Postdoctoral Studies (GPS) department. Part of my duties were rebranding the department through graphic design.

## Problem

GPS had no unique visual identity, and used SFU’s general design guidelines, rendering it invisible next to other more uniquely branded departments.

## Audience

The audience were graduate students and postdoctoral fellows of different ages and backgrounds whose primary source of information and help for their studies was GPS; we wanted to communicate this in the branding.

## Process

Over the course of my co-op, I had a few graphic design projects that required consistent elements that were either for me to follow or given to me, or developed as a part of the rebranding.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FKSMUIJkGxecBrNTZqYYb%2F5b1e5e58-52cb-43d5-86e4-e50da030fcbd.png?alt=media&token=e48e3742-4da9-414b-8224-96a4392a17dc","id":"5b1e5e58-52cb-43d5-86e4-e50da030fcbd","width":1920,"height":3476,"filename":"gps-materials.png","type":"image/png","caption":"","border":false}]}
```

### SFU Branding

In all graphics, I had to include the SFU logo and/or our departmental logo (following the rules for positioning and colour usage), SFU colours, and SFU fonts.

### Copywriting

Copy was given to me by either my supervisor or my colleagues. At most my editing of the copy involved making it more concise and divided into step-by-step instructions for ease of reading.

### Rebranding

When rebranding GPS, we wanted to emphasize the initials ‘GPS’ for easy recall for the audience, thus navigational elements such as destination marks and crosses and travelling marks were used in the graphics.

## Challenges

### Balancing Identities

A challenge I came across in my co-op was balancing SFU branding with GPS’s own unique identity that was able to be developed in any direction; this was overcome by narrowing down design elements to navigational elements (influenced by the department’s initials ‘GPS’). This ensured that GPS acquired a unique visual identity that contrasted with SFU’s general branding that had to be followed (i.e. SFU logo, colours and fonts).

### Trimming Copy

Another challenge was getting a sense of how much copy I could trim that was written by others for the design, but this was overcome by initially corresponding with colleagues, and eventually getting the hang of it without consulting as much.

## Insights

At the end of my co-op, I was able to implement SFU branding in GPS’ graphics while distinguishing it from other departments, which resulted in a unique identity read as part of the university as well as its own department. I was also able to quickly produce design materials, allowing more time for feedback and adjustments, resulting in meeting estimated publishing deadlines in a real work environment.

Graduate & Postdoctoral Studies Communications

Branding guidelines for a digital consultation startup.

**Role:** Graphic Designer

**Organization:** [accentedge](https://www.accentedge.com/)

**Timeframe:** June-August 2018

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FcUfFvQzHf5LK33q3qPLH%2Faff494a0-b48f-4e70-877e-f554eb26f585.jpg?alt=media&token=ff781795-e4e0-4c55-abc8-c540f0e29530","id":"aff494a0-b48f-4e70-877e-f554eb26f585","width":1920,"height":1080,"filename":"product.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## Background

I was a Graphic Designer for accentedge—a digital consultation startup. I was tasked with creating the branding for this company which included branding guidelines (for current employees and future graphic design interns to reference), stationary and social media graphics.

## Process

I created part of the branding based on an already existing logo (whose font I refreshed). The logo was emphasized throughout the branding through the outside cover of the branding guidelines, stationary and social media graphics by emulating the angles in the logomark.

### Branding Guidelines

In the branding guidelines, use of the logo was explained including spacing, placement and visibility of the logo. Colours were sampled from the existing logo, as well as other colours that can and cannot be used with the logo. The font of the logo was refreshed to a similar one and the rest of the typography was sans-serif to evoke a modern feeling. Imagery was to give an impression of progress, success and collaboration via physical activities and athleticism, as well as candid photography. Files were linked to applicable graphics such as logo variations, stationary, social media post templates, etc.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FcUfFvQzHf5LK33q3qPLH%2F5015a6d0-221a-4e1e-846e-a5eef55d909b.png?alt=media&token=ef615f58-2a49-45d0-9e14-f305df8c135c","id":"5015a6d0-221a-4e1e-846e-a5eef55d909b","width":1920,"height":2423,"filename":"!guidelines.png","type":"image/png","caption":"","border":false}]}
```

### Stationary

Branding was consistently and visibly emphasized in the stationary which included a letterhead, envelope and business card. Links were provided for these files as well as a Microsoft Word Document of the letterhead, packaged with the company fonts and no graphics at the edges to allow for clean printing.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FcUfFvQzHf5LK33q3qPLH%2Ffc4f3a0e-2eef-48eb-b41f-e913d5c8e1e0.png?alt=media&token=a6198c0c-e5bd-454a-b74e-ba842b276195","id":"fc4f3a0e-2eef-48eb-b41f-e913d5c8e1e0","width":1920,"height":1060,"filename":"!stationary.png","type":"image/png","caption":"","border":false}]}
```

### Social Media Graphics

Social media post templates were developed to highlight current interns and feature quotes. An electronic advert was created which was displayed in the lobby of the building the company resides (among others), describing itself and where to find them (online). Other graphics included social media headers and hiring graphics.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FcUfFvQzHf5LK33q3qPLH%2F1fdc8a2f-8207-4750-8d0d-d2ccc0326c87.png?alt=media&token=1f06eccf-e05b-44ac-a9b2-29c6c17eb0ec","id":"1fdc8a2f-8207-4750-8d0d-d2ccc0326c87","width":1920,"height":827,"filename":"!graphics.png","type":"image/png","caption":"","border":false}]}
```

## Details

Something I noticed when I started to create the branding guidelines was that on their social media display pictures, the logo looked off-center even though it was technically centered according to the given space. This is because the peak of the letter 'A' was not in the middle, and the streak on the right took more space than the left and offset it.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FcUfFvQzHf5LK33q3qPLH%2Ffb1320af-46ef-498c-8670-9a36882be032.jpg?alt=media&token=b34d8b1f-afa9-4476-9db5-b25a8dcb5f2c","id":"fb1320af-46ef-498c-8670-9a36882be032","width":1920,"height":854,"filename":"logo.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Because of this I felt it was important to note in the branding guidelines that the logo should be centered according to peak of the letter 'A', and made sure the logo files the employees had access to were spaced beforehand (with extra spacing on the left) to ensure the result would be the logo's true middle.

## Challenges

This was a remote position, so I had to deliver and justify my design decisions over email and phone, and receive feedback in the same form without live visual feedback. Because of the extra time this can take versus in-person, I made sure to justify my work with evidence and communicate clearly with my supervisor, resulting in quick turnaround of graphics.

## Insights

This internship allowed me to create a brand from scratch and see what makes up a brand, as well as create a reference for future graphic design interns to follow and other employees to use (i.e. templates). The remote aspect of this internship allowed me to practice clearly communicating my work and justifying it with evidence over limited communication (phone and email).

accentedge Branding Guidelines

A progress tracking weight-training smartphone app prototype based on user research & testing.

Academic project in collaboration with Sabrina Lee and Justin Lau

**Course:** [Interface Design](http://www.sfu.ca/outlines.html?2018/spring/iat/334/d100)

**Timeframe:** Spring 2018 (3 weeks)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2Fet8p6u5rS3Yjd9C6T1ih%2Fc3ad672e-088d-4392-9c53-8007b3e9626c.png?alt=media&token=389dcf57-bf33-427a-957a-29b606cb8583","id":"c3ad672e-088d-4392-9c53-8007b3e9626c","width":1920,"height":1080,"filename":"!product.png","type":"image/png","caption":"","border":false}]}
```

## Background

In a group project for a university course, we were to create a smartphone application that would be developed with a persona in context of any area we chose to focus on.

## Process

### Topic

At first, our group wanted to focus on an app that would track and motivate users to be productive with their diet and exercise. After doing research, we found that both these topics were complex to handle within their own apps, so we decided to focus on exercise as we wanted to create an app for a more apparent and commonly agreed upon action that may not have many variations (unlike food).

### Persona

We generated different personas with different needs that would need to be served with the app, and eventually settled on the persona of a young person who has access to weight lifting equipment and wants to start or already goes to the gym. If they want to start going to the gym they may not have any experience and would be too conscious to ask for help. Whatever their weight goals are (to maintain, gain, or lose weight), they want to weightlift to achieve that goal, and eventually gain confidence in going to the gym (for first time goers).

### The Problem

Frustrations this persona has (for the inexperienced gym goer) is that they have no gym experience and are too self-conscious to ask for help with weightlifting. For experienced gym goers, their frustration is that there are too many apps online that either are built for one specific workout or functionally or visually unsatisfying to use, as well as not having multiple components from different apps together (e.g. having to search up images of how to do an exercise or having to write down workout notes in a separate app).

### Goals

We want users to reach their goals in a safe manner by providing them with instructions about how to do different exercises without having to ask anyone and allow users to be able to create a personalized and customizable workout experience for themselves.

## Features

### Creating an Account

The app can be used with or without an account, either storing data on the cloud or locally in the phone (respectively). Data includes user information and exercise history in order to calculate how much the user would increase the difficulty of their exercises by.

User information includes:

* Personal details (age, sex, weight, height)

* Weight goals (losing, maintaining, or gaining weight, goal date)

* Workout goals (workouts per week, length of workouts, goal date)

* Weight check ins

Workout history includes:

* Difficulty of workouts

* Sets and repetitions (reps) failed or completed

Motivation statistics include:

* Starting date

* Workout streaks

* Total weight lost

### Creating a Workout

Creating a workout requires a name and schedule (time and day(s)); optional inputs include length of workout, rest time lengths, default sets and reps to be applied to added exercises, and notification preferences. The user can save and exit this transaction or continue to add exercises.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2Fet8p6u5rS3Yjd9C6T1ih%2F2f24e9c6-116f-4b66-914e-e90202388c46.mp4?alt=media&token=9d5735aa-0ea7-4b9a-a3df-979257245be6","id":"2f24e9c6-116f-4b66-914e-e90202388c46","width":1080,"height":1920,"filename":"create-workout.mp4","type":"video/mp4","caption":"","border":false}]}
```

The workout can be previewed, started, or edited with the three dot menu; an upcoming workout is always highlighted to inform the user.

### Searching an Exercise

Users can search and select multiple exercises to add to workout(s).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2Fet8p6u5rS3Yjd9C6T1ih%2F0bc1efea-9cb0-4b10-bab8-5d3977c56a74.mp4?alt=media&token=6ad1ac56-e87e-4ec1-b50b-2b4cda415f9a","id":"0bc1efea-9cb0-4b10-bab8-5d3977c56a74","width":1080,"height":1920,"filename":"search-exercise.mp4","type":"video/mp4","caption":"","border":false}]}
```

### Adding an Exercise to a Workout

When the user has selected the exercise(s) they want, they can select the workout they want to add it to and is given the option to create a workout if they do not have one or want to create a new one.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2Fet8p6u5rS3Yjd9C6T1ih%2Fa3f9767d-96da-41d5-aa26-f7bf0a90f61c.mp4?alt=media&token=d8f8a8b9-0f01-4996-99a2-1e9084832618","id":"a3f9767d-96da-41d5-aa26-f7bf0a90f61c","width":1080,"height":1920,"filename":"add-exercise-manual.mp4","type":"video/mp4","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2Fet8p6u5rS3Yjd9C6T1ih%2F3368acf5-228f-49d0-b648-b85dc28d9bb6.mp4?alt=media&token=277816a8-a461-475c-bd4d-a30218129b8f","id":"3368acf5-228f-49d0-b648-b85dc28d9bb6","width":1080,"height":1920,"filename":"add-exercise-auto.mp4","type":"video/mp4","caption":"","border":false}]}
```

When the workout is selected, the user can choose the sets and reps of each exercise. This can be bypassed by using the quick add feature which automatically applies the default sets and reps you chose when you created the workout; you are given one more chance to edit that amount for this instance. Exercise weight is either the default or most recently used value.

### Workout Mode

The user can preview a workout where they can swap the order of the workouts (or edit it) or start the workout. The blurred background assures users they have not left the page.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2Fliftfit%2Fccbe0134-1daa-431b-ba96-c32afa58e02c.mp4?alt=media&token=87dab7b8-82fe-495c-b0b3-ad8f0e487b07","id":"ccbe0134-1daa-431b-ba96-c32afa58e02c","width":1080,"height":1920,"filename":"cooldown-mode.mp4","type":"video/mp4","caption":"","border":false}]}
```

When the workout starts, the whole screen is encapsulated which affords the user no distractions and displays the most vital information during their workout. The user can change the difficulty of the exercise which is tracked in the user’s history. The user can toggle how many reps they have completed, the affordance allowing them to easily input information if they have lost fine coordination due to working out.

### Cooldown Mode

When the user is done with their set, they can continue to cooldown mode. The timer automatically starts, and dynamically changes depending on whether you were able to complete a set (if failed, it gives you more time). Overtime is indicated by a tick (and can add up) to let the user know how much they are going overtime by.

Users can pause, reset, or add overtime rest. These values are determined from the default workout values, but can be edited during cooldown.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2Fliftfit%2F5320fcb5-2d14-45ce-897c-84edb80fe393.mp4?alt=media&token=b670a8f6-17e6-4da9-a15f-52ffcf8899e9","id":"5320fcb5-2d14-45ce-897c-84edb80fe393","width":1080,"height":1920,"filename":"cooldown-mode.mp4","type":"video/mp4","caption":"","border":false}]}
```

When cooldown is finished, the user is notified by a sound, and they are free to return to their next set or add more rest time.

### Minimizing Workout / Cooldown Mode

Users can minimize workout/cooldown mode without quitting it to navigate the rest of the app. it presents itself at the bottom of the screen with the most vital information displayed.

On the homepage, the workout card that is currently running is entirely highlighted to let the user know it is running.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2Fliftfit%2Fdc57c42d-8a09-426e-a089-70934b7f9abe.mp4?alt=media&token=006eb301-07ab-448d-ac04-0004e346925e","id":"dc57c42d-8a09-426e-a089-70934b7f9abe","width":1080,"height":1920,"filename":"minimize-workout.mp4","type":"video/mp4","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2Fliftfit%2Ffecac525-1808-4cb2-ab7e-c35402084fe5.mp4?alt=media&token=85fb994f-7574-481b-b10e-96a4d25c5220","id":"fecac525-1808-4cb2-ab7e-c35402084fe5","width":1080,"height":1920,"filename":"minimize-cooldown.mp4","type":"video/mp4","caption":"","border":false}]}
```

The user can get rid of the minimized bar which pauses the workout. They can either resume or reset the workout using the workout card.

### Finding Exercise Information

Users can find out more about an exercise during workout mode or a search.

Above the fold information includes media demonstrating how to do the exercise, muscles it targets (linked to exercises targeting that muscle), and equipment needed (as well as alternatives which are linked).

Below the fold information includes text instructions on how to do the exercise.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2Fliftfit%2F4caa419a-22ac-4497-917d-ecdd7710be64.mp4?alt=media&token=292ec56c-4120-4b0f-b26d-86b39c1b6125","id":"4caa419a-22ac-4497-917d-ecdd7710be64","width":1080,"height":1920,"filename":"exercise-info-workout.mp4","type":"video/mp4","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2Fliftfit%2F47464575-54d6-462a-8117-cc1d8ad46757.mp4?alt=media&token=b476ec00-4ffb-454a-a4dc-079dd88d3e5d","id":"47464575-54d6-462a-8117-cc1d8ad46757","width":1080,"height":1920,"filename":"exercise-info-search.mp4","type":"video/mp4","caption":"","border":false}]}
```

Users can scroll or click the tabs which will take them to the appropriate section.

## Details

### Affordances Accessibility

Affordances (such as on workout mode) were iterated to be bigger so as to allow an exercising person to easily press inputs to account for temporary loss of coordination from an exhaustive workout.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2Fliftfit%2Fbfc0a513-cecd-43a0-93ad-28184e5d8ccf.png?alt=media&token=3c38658c-6482-4206-86ad-bee798ad2199","id":"bfc0a513-cecd-43a0-93ad-28184e5d8ccf","width":1920,"height":1080,"filename":"!affordance.png","type":"image/png","caption":"","border":false}]}
```

## Challenges

The main challenge of this project was narrowing down enough on all aspects to be able to create an app that is able to address everything. This was a simultaneous process where the topic and the persona influenced each other. Because even when separated from diet, exercise is such a complex topic due to the variety of activities, we decided to focus on weight lifting exercises, and fulfilling the needs of a persona who prefers to weightlift.

## Insights

I learned the vital role user research and user experience plays in the creation of user interfaces and user interactions. The creation of features was based on the persona created, and tested with similar users, shaping the final form of the app.

## Future Considerations

### Onboarding

A future consideration to improve this app would be onboarding in the form of demonstrating creating a workout, adding exercises to it, and going through workout and cooldown mode so as to ease the user into exercising language and culture.

### Individual Exercise Card

Allow individual exercise cards for warm up/cooldowns before and after workout sessions. Individual exercise cards would work in the same way workout cards do and require:

* Exercise name

* Exercise time

* Exercise type

* Day(s)

* Time of day

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2Fliftfit%2F727629ec-1bdd-4a13-bc57-661ff9791716.mp4?alt=media&token=fc655cb1-ba0b-424f-91c7-eb581c947b3a","id":"727629ec-1bdd-4a13-bc57-661ff9791716","width":1080,"height":1920,"filename":"exercise-card.mp4","type":"video/mp4","caption":"","border":false}]}
```

### Automatically Generating a Workout

A useful feature for an existing workout without manually inputting everything would be to input a list of exercises with sets, reps and weights, where the app would generate a workout by parsing the text, and allowing the user to review it before adding it as a workout.

### Notification/Smartwatch Integration

To go along with the minimization in-app, prototype a currently running workout notification that can be interacted with on the lockscreen or status bar.

Smartwatch integration can be implemented with a similar minimized and interactive prototype.

## References

Exercise information text used in prototype from [www.ExRx.net](https://exrx.net/)

LiftFit

EDI in Hiring Training Module

Logo for a religious scholarship organization.

**Role:** Graphic Designer

**Organization:** Baabul Ilm Education Society

**Timeframe:** September 2018

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FyiFLk08ptXs1YqgpkPto%2F27f4d4c5-f293-4199-8699-87b8623db654.jpg?alt=media&token=0e2fe209-c364-4c27-9ef8-308f33323e96","id":"27f4d4c5-f293-4199-8699-87b8623db654","width":1920,"height":1080,"filename":"product.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## Overview

I was tasked with creating the logo for Baabul Ilm Education Society, a religious scholarship organization. The phrase Baabul Ilm means “gate of knowledge”, which holds religious significance in Islam.

## Problem

In the original logo, neither Arabic nor Islamic imagery was used, the organization name only being written in English. While this functionally did the job of telling an (English-speaking) audience (Muslim students and their families) about the organization’s name, it evoked no flair or identity and was not memorable to its audience.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FyiFLk08ptXs1YqgpkPto%2F9f9d43b0-1ed3-4e1f-8443-ccfa99bd815c.jpg?alt=media&token=6ebc6e65-2ea9-4b46-9873-9878f0e06edc","id":"9f9d43b0-1ed3-4e1f-8443-ccfa99bd815c","width":344,"height":156,"filename":"original.jpg","type":"image/jpeg","caption":"Original Logo","border":false}]}
```

## Process

To create a unique identity for the organization, I tackled different aspects of what would eventually become the logo.

### Text

According to me, the most important thing that needed to be incorporated into the logo was Arabic text, as the English name of the organization is only a romanization, and not in its original form (Arabic).

To initiate this process, I studied the Arabic letters that made up the name apart and together (as the letters form differently when connected with each other). I also researched examples of writing styles such as Kufic calligraphy (a style of geometric illustration) and Arabic logotypes.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FyiFLk08ptXs1YqgpkPto%2F9bf694b0-8323-4e8a-89ec-d679912847c6.jpg?alt=media&token=9e381ea1-83bc-4c65-80f6-efa886bb366f","id":"9bf694b0-8323-4e8a-89ec-d679912847c6","width":3156,"height":1210,"filename":"letters.jpg","type":"image/jpeg","caption":"","border":false}]}
```

I decided the stroke of the letters based on how Arabic calligraphy is written with an angled writing tool. Throughout the process, I referenced the original letters to see if it was legible. I did this because Arabic calligraphy is an art form—different from writing it, which I was not fluent at.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FyiFLk08ptXs1YqgpkPto%2Fd18ea3ab-ef34-44b2-ab56-fe8a2fadda6b.jpg?alt=media&token=c8f973c0-b256-4b49-a496-fc800cb4387f","id":"d18ea3ab-ef34-44b2-ab56-fe8a2fadda6b","width":439,"height":439,"filename":"text.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### Imagery

To find symbols I could use for the logo, I researched Islamic and scholarship organizations, and found they commonly used mosques and books in their logos (respectively). But because they were used so frequently, I decided to use the door as an element because it directly relates to the name and was rarely used in organizations of the same name (religious phrases are commonly used for different types of religious organizations).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FyiFLk08ptXs1YqgpkPto%2F93280712-6d2f-4cff-8c0d-2a130bb39173.jpg?alt=media&token=35692068-ce15-41cb-898e-652ad08b260f","id":"93280712-6d2f-4cff-8c0d-2a130bb39173","width":442,"height":606,"filename":"door.jpg","type":"image/jpeg","caption":"","border":false}]}
```

The shape of the door was based on preliminary research of Islamic architecture and personal experience. The door outline was made the same width as the Arabic text, and to make the shape more interesting, Kufic knots were added at the top based on research and examples of the style.

### Combining the Script & Door

The shapes of the script and the door were decided with the fact that they were going to be together in mind, and changes on either influenced each other throughout their iterations.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FyiFLk08ptXs1YqgpkPto%2Fb1f9a616-7d43-4545-a181-e4e25bc774d2.png?alt=media&token=f499b5f0-0ae6-4e2e-a52a-f246274411e7","id":"b1f9a616-7d43-4545-a181-e4e25bc774d2","width":1920,"height":1080,"filename":"!doors.png","type":"image/png","caption":"","border":false}]}
```

To bring the script and the door together, I sketched different forms of them until I found a pleasing form. As I had already mentioned, I made the door outline the same width as the script.

### Logotype

Because the logomark was a more pressing concern in getting across the religious background of the organization than the logotype (which performed its purpose anyways), I kept its existing form and refined it with new fonts, justifying the use of the serif for the name to keep it a formal and educational tone, and using sans-serif in uppercase for the rest to fit under and distinguish it from the name.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FyiFLk08ptXs1YqgpkPto%2F717496d4-ea50-4bc0-8762-e8dd107dce4d.jpg?alt=media&token=94426bd0-444d-404a-bea4-3099c4df8a76","id":"717496d4-ea50-4bc0-8762-e8dd107dce4d","width":1921,"height":1080,"filename":"fonts.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### Colours

Though there are many colours associated with Islam, deeply associated ones (such as green) would distract from the educational context of the organization; instead, subdued colours were used. This decision was justified by the fact that the logomark would get the religious nature across.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FyiFLk08ptXs1YqgpkPto%2F1cdf1be3-7766-4035-94d1-26dea6a74e3d.png?alt=media&token=62f514a6-6b51-4ab9-843e-66d557cfa5ef","id":"1cdf1be3-7766-4035-94d1-26dea6a74e3d","width":1920,"height":1080,"filename":"!colours.png","type":"image/png","caption":"","border":false}]}
```

### Combining the Logomark & Logotype

Combining the logomark and the logotype was a matter of matching the height of the logomark to the height of the logotype; this was because the logomark is taller than it is wide.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FyiFLk08ptXs1YqgpkPto%2F24ec83f3-11dc-4dd0-a6d9-84587da66cab.jpg?alt=media&token=28097699-e6ea-4f3a-a8f6-f698ce116533","id":"24ec83f3-11dc-4dd0-a6d9-84587da66cab","width":1451,"height":447,"filename":"combo.jpg","type":"image/jpeg","caption":"","border":false}]}
```

## Details

One detail I wanted to showcase was distinguishing the direction of the stroke in the calligraphy with shadows (using gradients in the final product) on overlapping strokes (imitating the way existing strokes would be drawn over in calligraphy). Any overlapping stroke was highlighted by being given a shadowed edge.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F5uHYKXtxyOcqtPiWms7OWdutpPd2%2FyiFLk08ptXs1YqgpkPto%2Ff59f0315-090e-4fdb-acd0-6fc6ec93f605.jpg?alt=media&token=f0dd382c-8964-4200-9c5d-75e48c0b778d","id":"f59f0315-090e-4fdb-acd0-6fc6ec93f605","width":828,"height":763,"filename":"shading.jpg","type":"image/jpeg","caption":"Determining the shading on overlapping parts of letters using dotted outline of logo.","border":false}]}
```

## Challenges

Although I am a native Urdu speaker which uses the same script as Arabic, I did not know much beyond simply writing the organization’s name in Arabic at the time.

As I mentioned before, I split up the letters and observed how they looked apart and connected. I also researched Arabic calligraphy and logos to see the liberties designers took with the lettering, allowing me to abstract the letters from their original form to design a logo.

## Insights

The primary lesson I learned from this project was that my client did not have anything particular in mind when they asked me to make a logo. It was left up to me to ideate forms they could choose from. This resulted in me learning how to narrow down open-ended projects to only a few constraints. In this project, I prioritized the creation of the logomark over the logotype, as Arabic text and Islamic imagery was sorely needed to get across the religious nature of the organization, giving it an identity and making it memorable to its audience.

Something I would have done differently for this project is to have taken more creative risks and have experimented with different colours that are more deeply associated with Islam, not only to imbue religious significance in the organization’s identity, but to make it more visually interesting as well.

Baabul Ilm Logo

UI Designer & Developer

Interactive Arts & Technology, Design Concentration

Midhat Kazmi

Work Experience

Education

Contact