
<CollectionGrid head title="Arabic Type Explorations" desc="
Selections from a series of Arabic type explorations, including 42 days of Arabic Typography. 
As a muslim growing up learning arabic caligraphy, I've been fascinated by Arabic type for a long time, particularly its intersectionality with european type design traditions. 

">

<CItem src="/assets/arabictype/01.jpg" />
<CItem src="/assets/arabictype/02.jpg" />
<CItem src="/assets/arabictype/03.jpg" />
<CItem src="/assets/arabictype/04.png" />
<CItem src="/assets/arabictype/05.jpg" />
<CItem src="/assets/arabictype/06.png" />
<CItem src="/assets/arabictype/07.png" />
<CItem src="/assets/arabictype/08.png" />
<CItem src="/assets/arabictype/09.jpg" />
<CItem src="/assets/arabictype/10.jpg" />
<CItem src="/assets/arabictype/11.jpg" />
<CItem src="/assets/arabictype/12.jpg" />
<CItem src="/assets/arabictype/13.jpg" />
<CItem src="/assets/arabictype/14.jpg" />
<CItem src="/assets/arabictype/15.jpg" />
<CItem src="/assets/arabictype/16.jpg" />

</CollectionGrid>

<CollectionGrid title="Halwa" desc="Expanding from a few studies built off of Wim Crouwel's modular type systems, Halwa's limited shape language results in interesting typographic possibilities.">
<CItemBig src="/assets/arabictype/halwa-1.jpg" />
<CItemBig src="/assets/arabictype/halwa-2.jpg" />
</CollectionGrid>


<CollectionGrid extraClass=""
title="In a universe of global space collabs"
desc="NASA's <em>Worm</em> logo from the 80s has always been one of my favorite examples of distilled graphic form. Here I explore a logo for a speculative world of collaborative space missions with the North African Union"
>
  <CItem src="/assets/arabictype/nasa-1.png" />
  <CItem src="/assets/arabictype/nasa-2.png" />
  <CItem src="/assets/arabictype/nasa-3.png" />

</CollectionGrid>



export const path = "/assets/hypercard/";

<VideoCover
  src="/assets/hypercard/cover"
  caption="3D vis of product care artefacts"
  num="1"
/>

<ProjectLayout>

## Hypercard collaborated with us to create a solution that combined the exclusivity of the AMEX network with their lifestyle benefits, aiming to revolutionize benefits for companies and employees alike.

      <ContextCont>


      <ContextInfoList header="Context"> Client engagement at Daybreak Studio</ContextInfoList>

      <ContextInfoList header="My Responsibilities"> Brand Design, Design Research, Product Design, 3D Visualisation</ContextInfoList >
      <ContextInfoList header="Tools"> Figma, Blender, After Effects </ContextInfoList>

      <ContextInfoList header="Team"> Ali Rasheed, Taha Hossain, Javier Pardina, Vanessa Bahk, Benya Sutyanong </ContextInfoList>
      </ContextCont>

</ProjectLayout>

<ProjectLayout>

# Hypercard Rewards

<Anchor link="client" />

{/* ### Design-driven High-end Active Wear & Gear */}

While companies significantly invest into their benefits, employees can often see them as small perks with little to no direct influence on their lifestyle. Burdened by bureaucratic processes, lengthy approvals and archaic software, employees struggle to find value in the benefits provided to them.

Hypercard aims to revolutionise benefits by introducing a company-provided personal credit card that combines exclusivity of the AMEX network with Hypercard’s lifestyle benefits directly into their pockets. Hypercard sought our expertise to devise a solution that highlights the benefits revolution. One that would appeal to the companies that endorse it and the employees that leverage it.

{/* <MainGraphic caption="" src="/assets/hypercard/hypercard-2.webp" /> */}

<HalfGraphic caption="" src="/assets/hypercard/hypercard-2.webp" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-6.webp" />

{/* <HalfGraphic caption="" src="/assets/hypercard/hypercard-1.webp" /> */}

<HalfGraphic caption="" src="/assets/hypercard/hypercard-4.webp" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-10.webp" />
<MainGraphic caption="" src="/assets/hypercard/hypercard-5.webp" />
<HalfVideo
  caption=""
  eStyle="aspect-ratio:1/1.1276849642"
  src="/assets/hypercard/hypercard-7"
/>
<HalfVideo
  caption=""
  eStyle="aspect-ratio:1/1.1276849642"
  src="/assets/hypercard/hypercard-8"
/>
<HalfGraphic caption="" src="/assets/hypercard/hypercard-9.webp" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-10.webp" />
<Video caption="" src="/assets/hypercard/hypercard-11" />
<HalfGraphic
  caption=""
  eStyle="aspect-ratio:1/1.1276849642"
  src="/assets/hypercard/hypercard-12.webp"
/>
<HalfVideo
  caption=""
  src="/assets/hypercard/hypercard-13"
  style="aspect-ratio:1/1.1276849642"
/>
<MainGraphic caption="" src="/assets/hypercard/hypercard-14.webp" />
<MainGraphic caption="" src="/assets/hypercard/hypercard-15.webp" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-16.webp" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-17.webp" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-18.webp" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-19.webp" />
<MainGraphic caption="" src="/assets/hypercard/hypercard-20" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-21.webp" />
<HalfVideo caption="" src="/assets/hypercard/hypercard-22" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-23.webp" />
<Video caption="" src="/assets/hypercard/hypercard-24" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-25.webp" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-26.webp" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-27.webp" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-28.webp" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-29.webp" />
<HalfGraphic caption="" src="/assets/hypercard/hypercard-30.webp" />

</ProjectLayout>




<FullBleed src="/assets/extras/cover.webp" caption="Burning ship from story" num="1"/>

<ProjectLayout>
# Death of the Immortal


### Contribution

After writing the initial script, I was responsible for the design and development 
      <ContextCont>
             
      <ContextInfoList header="Context"> 13 week senior undergrad design project in contract with Arc'teryx in Vancouver, Canada.</ContextInfoList>

      <ContextInfoList header="My Responsibilities"> Research, Service Design, Industrial Design, Product Strategy, Graphic Design, 3D Visualisation</ContextInfoList > 

      {/* <ContextInfoList header="Deliverables">
            Bandana, Magnet, Posters, Website UI
      </ContextInfoList > */}
      <ContextInfoList header="Tools"> Figma, Blender, Illustrator, Miro </ContextInfoList>

      <ContextInfoList header="Team"> Ali Rasheed, Tracy Chen, Brendan Mckay, Yan Tymoshenko </ContextInfoList>
      </ContextCont>



# Death of the Immortal

  </ProjectLayout>


export const path = "/assets/arcteryx/";

<FullBleed
  src="/assets/arcteryx/cover.webp"
  caption="3D vis of product care artefacts"
  num="1"
/>

<ProjectLayout>

## We collaborated with Arc'teryx HQ on a service design project, resolving customer pain points while supporting Arc'teryx's sustainability goals.

      <ContextCont>

      <ContextInfoList header="Context"> 13 week senior undergrad design project in contract with Arc'teryx in Vancouver, Canada.</ContextInfoList>

      <ContextInfoList header="My Responsibilities"> Research, Service Design, Industrial Design, Product Strategy, Graphic Design, 3D Visualisation</ContextInfoList >

      {/* <ContextInfoList header="Deliverables">
            Bandana, Magnet, Posters, Website UI
      </ContextInfoList > */}
      <ContextInfoList header="Tools"> Figma, Blender, Illustrator, Miro </ContextInfoList>

      <ContextInfoList header="Team"> Ali Rasheed, Tracy Chen, Brendan Mckay, Yan Tymoshenko </ContextInfoList>
      </ContextCont>

### Contribution

I conducted in-person ethnography, research and interviews. I led our process of designing product care accessories. I executed their final visualisations. Co-designed graphic posters & slide decks.

### Resolve

Conduct user research & ethnography to identify customer+client problems. Develop a proposal that uses UX & service design process to address and solve the problem. We were fortunate to work with two Arc'teryx branches, and the post-sales team from Arc'teryx HQ.

</ProjectLayout>

<ProjectLayout>
{/* ### An international design-driven high-end outdoor clothing & gear brand  */}
{/* Arc'teryx is committed to its goals of sustainability through its manufacturing as well as its durability-focused design and extensive repair policy. */}

# Arc'teryx

<Anchor link="client" />{" "}

### Design-driven High-end Active Wear & Gear

Based in Vancouver with brand stores in Asia and Europe, Arc'teryx's considers itself a design company first. The brand is committed to its goals of sustainability through its manufacturing as well as its durability-focused design and extensive repair policy.

{/* <AsideGraphic caption="Meeting at Arc'teryx Kitsilano branch, the outdoors customer-focused flagship."  src="/assets/arcteryx/kits.jpg" /> */}

<QuoteCaption number="" who="Arc'teryx Marketing Lead">
  {" "}
  We want to minimize our impact environmentally as much as possible and make sure
  that we build products to last a really, really long time.{" "}
</QuoteCaption>

<MainGraphic src="/assets/arcteryx/brand1.jpg" caption="Brand photography courtesy of Arc'teryx" num="2"/>
</ProjectLayout>

<ProjectLayout>
      <Anchor link="insights" />

### Insights with Opportunity

Based on our ethnographic research and user interviews, we identified common patterns around product care. You can read more about the process later on.

~ Customers believe it is damaging to machine wash or dry their garments

~ Customers believe that Arc'teryx’s reputation for quality and the high price point mean that products do not need care.

~ Customers, (particularly those exclusively online) are unaware of proper product care procedures and available educational content, even after being provided initial opportunities to learn.

</ProjectLayout>

<ProjectLayout>
<Anchor link="proposal" /> 
      # Fulcrum
A series of product care accessories that act as physical reminders for Arc'teryx product care
<MainGraphic src="/assets/arcteryx/intro.webp" caption="Digital and analog prompts" num="3" />

### Proposal Goals

~ Convey product care importance while dispelling misconceptions, particularly for customers with limited touchpoints with Arc'teryx.
{/* To effectively convey importance of product care to customers. */}
{/* To dispel misconceptions that garments washing + drying process. */}
{/* To design for customers with limited touchpoints with the client. */}

</ProjectLayout>

<ProjectLayout>
      ### Begin with a collectable gift

In-person, customers are provided an option to receive a collectable gift with their purchase. This gift is a physical reminder of Arc'teryx product care.
For online customers, they can choose a product care gift at checkout.

<HalfGraphic caption="" src="/assets/arcteryx/instoreexperience.jpg" 
num="4" caption="Instore Experience " />
<HalfGraphic caption="" src="/assets/arcteryx/000.jpg"  
num="5"  caption="Online Purchasing Experience " />
</ProjectLayout>

<ProjectLayout>
### Reinforce with a post-purchase digital reminder
An email with product care links will be sent to users who are expecting to receive their gift soon. We want users to have product care on their minds even before the product arrives.
<InlineGraphic caption="" src="/assets/arcteryx/100.jpg"
caption="A product care-focused email to reinforce importance" num="6"/>

</ProjectLayout>

<ProjectLayout>
### Prompt habits with a post-purchase physical trigger

Our research shows that physical items act as effective habit building triggers

<MainGraphic caption="" src="/assets/arcteryx/persona-01.jpg" />
<HalfGraphic caption="" src="/assets/arcteryx/persona-02.jpg" />
<HalfGraphic caption="" src="/assets/arcteryx/persona-03.jpg" />
<HalfGraphic caption="" src="/assets/arcteryx/persona-04.jpg" />
<HalfGraphic caption="" src="/assets/arcteryx/persona-05.jpg" />

</ProjectLayout>

<ProjectLayout>

### Laundry Day Magnet

<AsideGraphic
  caption="We used physical prototypes to determine the look and feel"
  src="/assets/arcteryx/magnet-process-2.jpg"
/>

The Laundry Day Magnet accessory is a reflexive product care guide with care instructions on the fabric. The grommet/loop is magnetic, allowing users to stick it on their laundry machines. The loop also allows users to hang the magnet on their coat hangers or wall hooks in case they don't do in-house laundry.
{/* <MainGraphic caption="" src="/assets/arcteryx/mg.jpg"/> */}

<MainGraphic caption="" src="/assets/arcteryx/hanger.webp" />
{/* <MainGraphic caption="" src="/assets/arcteryx/arcy2.png"/> */}

</ProjectLayout>

<ProjectLayout>

### Trail Bandana

<AsideGraphic
  caption="Products released in the 1990s by Arc'teryx & its competitors are used as product precedent."
  src="/assets/arcteryx/bandana_precedents.jpg"
/>

As a regularly used and washed garment for hikers, the Trail Bandana accessory act as physical reminders of product care. The front side uses hiking trail patterns related to international brand store locations to provide aspirational value alongside the functional value of the product. The backside is printed with product care instructions to guide users as they build out

<MainGraphic caption="" src="/assets/arcteryx/bandana-pres.png" />
<MainGraphic caption="" src="/assets/arcteryx/bandana-pres-1.png" />
<MainGraphic caption="" src="/assets/arcteryx/bandana-pres-2.png" />

</ProjectLayout>

<ProjectLayout>

### Brand Trust + Less Returns

~ Longevity of garments leading to more brand trust and loyalty. Reduced environmental impact through fewer garment replacements.

<InlineGraphic caption="" src="/assets/arcteryx/value.jpg" />

</ProjectLayout>

<ProjectLayout>

# Open Research

<Anchor link="research" />{" "}

### Ethnography

<AsideGraphic
  caption="Understanding how a power user cares for their jacket"
  src="/assets/arcteryx/ethnophoto.png"
/>
I began my research by visiting and observing each store across Metro Vancouver to
understand their unique positioning while in contact with the store manager and marketing
leads. We took field notes, photos, and conducted interviews with sales reps regarding
customer-employee interactions.

We then visited power users of Arc'teryx in their homes to understand how they took care of their gear, and their lived experience with their garments.

<HalfGraphic caption="" src="/assets/arcteryx/2.jpg" />
<HalfGraphic caption="" src="/assets/arcteryx/4.jpg" />

### User interviews

To attain a nuanced understanding of Arc’teryx customers we conducted 8 qualitative interviews seeking to understand motivations, behaviors, and rituals. These included outdoor enthusiasts, urban commuters, techwear fans, and casual shoppers.

<HalfGraphic caption="" src="/assets/arcteryx/11.jpg" />
<HalfGraphic caption="" src="/assets/arcteryx/12.jpg" />

### Discrepancies - Arc'teryx vs Customers

<InlineGraphic caption="" src="/assets/arcteryx/missed.jpg" />

### The Purchasing Journey

<MainGraphic
  caption="A journey map built from ethnography, qualitative interviews and quantitative interviews"
  src="/assets/arcteryx/journeymap.jpg"
/>

</ProjectLayout>

<Anchor link="decisions" /> 
<ProjectLayout>
# Design Decisions

<AsideGraphic
  caption="
The Design Journal: Design for Product Care: Enhancing Consumers’ Repair and Maintenance Activities"
  num="33"
  src="/assets/arcteryx/graph.jpg"
/>
### Customer Behaviour • Physical Intervention? The decision to design physical products
rather than a digital intervention was made for two reasons:

Primary research showed that customers valued and kept artifacts such as packaging and tokens from brands like Arc'teryx. Therefore a free accessory would have a more permanent place in the user's life.

Our secondary research showed that product care behaviour resulted from the confluence of three factors:

~ motivation (if people want to do it)  
ability (if people can do it)  
triggers (a stimulus that provokes them to do it)

~ The physical accessories are triggers, while also being a delightful item to have around, versus annoying digital notifications.

### Environmentally Concious

<AsideGraphic
  src="/assets/arcteryx/scraps1.jpg"
  caption="Gore-tex scraps from Arc'teryx production"
  num="34"
/>

I designed the accessories with fabric to both remind customers of their garments, as well as make use of scrap Gore-tex fabric from Arc'teryx production, furthering Arc'teryx's sustainability goals.

<MainGraphic
  caption="I really appreciate you reading to the end. Thank you!"
  src="/assets/arcteryx/arcy-team.jpg"
/>

      </ProjectLayout>



<FullBleed
  src="/assets/unesco/cover2.webp"
  num="1"
  caption="Custom 3D render of proposal"
/>

<ProjectLayout>

## Grounding learning for students, while bringing awareness to lesser known World Heritage Sites. UNESCO Lodestar is an online platform for lower-secondary educators to access lessons plans with World Heritage Site case-studies.

      <ContextCont>

      <ContextInfoList header="Context"> 6 week project completed as part of Senior Experience Design Course in Vancouver, Canada.</ContextInfoList>

      <ContextInfoList header="My Responsibilities"> Project Management, Product Strategy, Content Strategy, Copywriting, UI Design, Curricular Design</ContextInfoList >

      {/* <ContextInfoList header="Deliverables">
            Bandana, Magnet, Posters, Website UI
      </ContextInfoList > */}
      <ContextInfoList header="Tools"> Figma, Blender, Google Sprint Book, Experience Design, Branded Interactions </ContextInfoList>

      <ContextInfoList header="Team"> Aliasger Rasheed, Katie Park, Benny Huang, Grace Lai, Lia Yujin </ContextInfoList>
      </ContextCont>

### Contribution

As project lead, I led our team in determining the area of intervention and framing. As content strategist I determined the content design of the site (the lesson plan in particular) and wrote its corresponding copy.
I conducted user stakeholder research and through expert interviews to drive the project. After the project was over, I revamped the interaction and visual design decisions as it felt weaker in its initial execution.

</ProjectLayout>

<ProjectLayout>
<Anchor link="client" /> 
# UNESCO World Heritage
### Protecting Cultural and Environmental Heritage
UNESCO is a UN agency who’s main mission is to build a culture of peace and sustainability through education, communication and dialogue between different people
I focused on their World Heritage Centre which preserves and protects landmarks that bring immense value to the culture and the environment of humanity.

<QuoteCaption num="1" who="UNESCO World Heritage Centre">
  “What makes the concept of World Heritage exceptional is its universal
  application. World Heritage sites belong to all the peoples of the world,
  irrespective of the territory on which they are located.”
</QuoteCaption>
<InlineGraphic src="/assets/unesco/poster.png" />{" "}

</ProjectLayout>

<ProjectLayout>
<Anchor link="Research" />

# Research

Our initial primary research of 13 student and 11 educator survey respondents, helped me frame our interviews with 13 experts, including university and secondary school educators, second-language educators, and professionals working with UNESCO.

<HalfGraphic
  src="/assets/unesco/people.jpg"
  caption="Educators find physical spaces ground abstract ideas and events"
  num="4"
/>
<HalfGraphic
  src="/assets/unesco/interview.jpg"
  caption=" We interviewed experts with World Heritage, students and secondary/post-secondary educators"
  num="5"
/>{" "}

</ProjectLayout>

<ProjectLayout>
      <Anchor link="insights" />

### World Heritage To Ground Learning

Synthesizing the research gave me 4 key insights to drive our intervention

~ Second language teachers use cultural heritage to bring personal bearing to language education.

~ Educators, need age-specific, modular actionable lesson resources.

~ Open-ended middle school curriculum = freedom to bring in external topics such as World Heritage.

~ World Heritage is eurocentric and so finding resources on lesser-known non-european Heritage Sites is difficult

### Framing through the needs of educators

We used the following questions to constrain our scope and frame our intervention:

~ How might we make information architecture more systematic and guided to reduce cognitive overhead when accessing educational resources?

~ How might we leverage project-based learning to re-orient UNESCO’s existing educational resources towards its World Heritage Sites?

</ProjectLayout>
<ProjectLayout>
      <Anchor link="proposal" />

# Lodestar

A content distribution platform run by the UNESCO World Heritage Centre, comprising of curated lesson plans accessible to secondary school educators globally.

### Content grounded in Project-based Learning

Lesson Plans are based on project-based learning using World Heritage sites as foundational case-studies to build class projects on. We utilised the SMART(Specific, Measurable, Attainable, Relevant, and, Timely) learning objectives guidelines to guide our information architecture.

<InlineGraphic src="/assets/unesco/learning.jpg"/>
</ProjectLayout>
<ProjectLayout>
### Opportunities within an Educator's lesson-building journey
 
<MainGraphic  src="/assets/unesco/journeymap.jpg"/>

<Video link="/assets/unesco/walkthrough" />

<Anchor link="Decisions" />{" "}

### Entice • Discovery

<InlineGraphic src="/assets/unesco/google.jpg" />

### Enter • Filter for Your Needs

<MainGraphic src="/assets/unesco/filter.jpg" />

### Designing For Educators Globally

<MainGraphic src="/assets/unesco/arabic.jpg" />

### Engage • Browse for Applicable Plans

<MainGraphic src="/assets/unesco/browse.jpg" />

### Engage • Engage • Consider, Use &amp; Adapt

Along with providing materials such as videos, worksheets etc, I used project-based learning to help broaden the scope of lesson plans, making them applicable despite curriculum differences.

<HalfGraphic src="/assets/unesco/bench.jpg" />
<HalfGraphic src="/assets/unesco/download.jpg" />

### Exit • Resources Straight to your students

Lodestar expedites the lesson delivery process, allowing teachers to directly add plans to their online learning platform. For the scope of this project, I only considered the most-used education platform in secondary schools, Google Classroom.

<MainGraphic src="/assets/unesco/platforms.jpg" />
<InlineGraphic src="/assets/unesco/classroom.jpg" />

</ProjectLayout>
<ProjectLayout>
<Anchor link="value" />

# The value

<MainGraphic src="/assets/unesco/valuematrix.jpg" />

</ProjectLayout>
<ProjectLayout>

# Design Decisions

### Choosing Opportunities

While UNESCO channels such as their main website lacked intuitive information architecture, I found that a redesign would be simply fixing a painpoint, as compared to creating meaningful value for UNESCO, and for its stakeholders.

### Filling in the Gaps

I think that if more time were allocated to the project,I would extend the customer experience through creating convenient touchpoints in educational platforms such as Google classrooms.

Given that lesson plans with the UNESCO trademark would need quality assurance, a next step would be creating a way for teachers to submit their own plans for verification and upload.

</ProjectLayout>


Typographic Formstorming

Arabic + Latin Type Design, Graphic Design

Arc'teryx Fulcrum

Service Design, User Research, 3D Vis

Observing the Anthropocene

Photo Gallery

UNESCO Lodestar

Experience Design, Content Design, User Research, UI Design