---
# System prepended metadata

title: ACIT 2811 - Session 3
tags: [ACIT-2811]

---

---
tags: ACIT-2811
---
<style>
    .markdown-body h1:first-of-type {
        margin-top: 24px;
    }
    .markdown-body h1 {
        margin-top: 64px;
    }
    .markdown-body h1 + h2 {
        margin-top: 32px;
    }
    .markdown-body h2 {
        margin-top: 48px;
    }
    .markdown-body h3 {
        color: goldenrod;
    }
    .exercise {
        font-size: 150%;
        font-weight: bold;
        color: rgb(227,112,183);
    }
    .note {
        color: red;
    }
</style>

# ACIT 2811 - Session 3

### Personas & User Stories

[Personas](https://www.interaction-design.org/literature/topics/personas) are fictional characters designed to _represent your target users_. Personas can help us empathize with our users by identifying their characteristics, goals, and behaviours.

![](https://dpbnri2zg3lc2.cloudfront.net/en/wp-content/uploads/old-blog-uploads/alex-persona1.jpg)
<br>

In contrast, [User Stories](https://www.interaction-design.org/literature/topics/user-stories) are designed to help you identify _features_ of your product. User stories can help you define what features are needed when starting a project, and can be used at the end of the project lifecycle to verify that those defined features were implemented.

The format of a User Story is simple - a single sentence that follows this template:

"As a [user], I want [goal or action] so that [outcome or reason]"

For example,

"As a [student], I want [to be able to check my calendar easily] so that [I do not miss my final exam]"

Note that User Stories should always be written **from the point of view of a user of a system**, not you the designer!
<br>


### Information Architecture

Information Architecture (IA) is the science of organizing and labelling content in a clear, logical way, so that users can easily find information. _IA connects people to the content they are looking for._

Good IA takes into account its users, the content that they need, and the context within which they are searching for this content. Bad IA can cause users to become frustrated and abandon the product.

<img src="https://i.imgur.com/5sFyRXn.png" style="width:100%; margin:0">
<br>
<br>
<br>

The practice of Information Architecture typically comprises the following activities:

1. User Research - understanding why and how users are using the product (students/faculty? desktop/mobile? quick reference or deeper research?)
2. Content Inventory - creating a categorized list of all content available on the product
3. Sitemap - creating a hierarchical diagram that shows the structure of the content
4. Navigation - identifying types of navigation to be used (global, local, related), and menu hierarchy ([flat vs deep](https://www.nngroup.com/articles/flat-vs-deep-hierarchy/))  
5. Wireframes - creating a two-dimensional outline of a product's layout and functionality
<br>

<span class="exercise">Group Exercise: Categorize Content into Menu Items</span>

Imagine a fictional theatre company that puts on live shows and offers camps for kids during the summer. Their website contains the following pages (in alphabetical order):

Accessibility
Audition Info
Contact Us
Current Shows
Dining Options
Donate
Getting Here
Join Our Team
Musical Theatre Camp
Our Story
Past Shows
Ticket Information
Venue Information
Visitor Questions (FAQ)
Volunteering

In your project group, create a menu that supports this content: group the pages under 3-4 menu headings that signify to the user what type of content they can expect to find. Note: the menu headings should be labels that your group creates – do not use the page titles above.

Example:

**Heading 1**
    - Accessibility
    - Audition Info
    - Contact Us
    
**Heading 2**
    - Current Shows
    - Dining Options
    - Donate
<br>

<span class="exercise" id="ia1">Individual Assignment: Categorize Content into Menu Items</span>

Following the example exercise above, create a menu for a fictional online store selling housewares. Organize the following products into menu headings (minimum four, maximum 6) that are consistent (see example below), and clear. Your menu headings, at a glance, should convey the type of store and types of products that are available.

__Products:__
Baskets & Storage
Bath Towels & Robes
Bath Accessories
Books
Brooms & Brushes
Candles
Clothing
Gardening Tools
Incense
Kitchenware
Multipurpose Cloths
Outdoor Tools
Tableware
Shears & Scissors
Stationery

For this assignment, focus on making the menu headings *consistent*, e.g. make each menu heading a location in the home, or use only [gerunds](https://www.grammarly.com/blog/gerund/), or use only product categories, etc.

As an example, assume you are building a menu for a sporting goods store instead. Below are some examples of how you could use different, but _consistent_ approaches to labeling your menu items:

__Gerunds:__
Swimming
Running
Cycling

__Locations:__
Indoor Sports
Outdoor Sports

__Categories:__
Racquet Sports
Water Sports

<span class="note">Submit a .pdf file to the Learning Hub containing a list of menu headings and products, as well as a short paragraph detailing the thought process behind your menu organization and labels.</span>
<br>

<span class="exercise" id="ga1">Group Assignment: Personas, User Stories, and Sitemap</span>

For your chosen project, create:

1. Two Personas that define different users of your site/app. Your personas do not need to be as detailed as the example, but must include at a minimum:
    - Name
    - Age
    - Occupation/Role
    - Needs & Goals
    - Pain Points
2. Three to four User Stories that define features related to the goals of your users. Remember that each User Story is a single of the form: "As a [user], I want [goal or action] so that [outcome or reason]"  
3. A Content Inventory (list of all possible screens/pages of your site or app)
4. A Sitemap that organizes all the content listed in part 3 into logical groupings and menu headings. Consider amongst your group whether you want to use a [flat or deep menu hierarchy](https://www.nngroup.com/articles/flat-vs-deep-hierarchy/).

<span class="note">Submit a .pdf file to the Learning Hub containing containing your two Personas and three to four User Stories, as well as a graphical sitemap created in Figma.</span>
<br>

### Further Reading

* [User Flows](https://www.nngroup.com/articles/user-journeys-vs-user-flows/)
* [Wireframes](https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/)


## Tasks To Complete Before Next Class

- [ ] Complete [Individual Assignment](#ia1)
- [ ] Complete [Group Assignment](#ga1)
- [ ] Complete the readings listed above under [Further Reading](#Further-Reading)

Quiz (Thursday) on the Learning Hub will be based on today's content: Personas, User Stories, and Information Architecture

