SlideShare a Scribd company logo
1 of 41
Download to read offline
wug 
Joseph Olivarez, Lizzie Seiple, 
Madeleine Guy, & Pearl Ko 
Information Architecture, Fall 2014
Table of Contents 
I. Vision Statement p. 3 
II. Competitive Analysis p. 5 
III. User Personas p. 8 
IV. Conceptual Framework p. 14 
V. Userflows p. 15 
VI. Wireframes p. 19 
VII. Usability Testing p. 32 
VIII. Appendix p. 39 
A. User Survey 
B. Competitive Analysis 
Information Architecture, Fall 2014
I. Vision Statement 
Wug is a new social and interactive 
website that lets you create, curate, and 
explore the world of poetry online. 
Wug takes traditional poetry to a more interactive 
level, engaging users of all ages and creating a 
more exciting atmosphere for learning poetry than 
is currently available on the internet. 
We tried to achieve this goal by incorporating user-created 
visual and audio media into the website. 
Not only can a user find and read a poem on Wug, 
but they can also record themselves reciting it and 
create a video or image to go along with it. This is 
published to the site and becomes searchable, just 
like a video posted on Youtube. A user can also 
publish and record original poems on the site as 
well.
II. Competitive Analysis 
For a table of our full findings, see Appendix B. 
We performed a competitive analysis to determine the best information architecture and design practices 
in children’s and poetry websites. We examined five websites: poetryfoundation.org, gigglepoetry.com, 
poetry4kids.com, kids.nationalgeographic.com, and pbskids.org. 
We sought to answer the following questions: 
1. What are effective browsing functions for children? 
2. How can browsing be made easier and/or more fun for children? 
3. How can searching be made more appealing for children? 
4. How should search results be displayed? 
5. Are there unconventional, alternative linking or exploratory features? 
6. How can children be encouraged to explore and interact with content? 
7. What is the most visually appealing design for children (colors, menus, shapes, etc.)? 
8. How should users be able to submit and curate content? 
9. Lastly, what should a parents and/or teachers guide include? 
Information Architecture, Fall 2014
II. Competitive Analysis: Summary of Findings 
Information Architecture, Fall 2014 
Browsing & Navigation 
▰ PBS kids and National Geographic Kids offered child-friendly 
browsing methods: a “roulette wheel” and 
continuous scrolling, respectively. 
▰ The navigation system of the Poetry4Kids site had a 
crowded layout and distracting background. 
Search 
▰ PBS Kids and Giggle Poetry did not offer a search 
function. 
▰ The search refinements from Poetry Foundation may 
not have been child-friendly, and the search engine 
of Poetry4Kids was imported directly from Google. 
Interaction 
▰ The Giggle Poetry site offered an interactive rating 
system and randomization feature 
▰ PBS Kids offered games and the option to save users’ 
progress and scores. 
Visual Design 
▰ Our research suggested children prefer colorful, 
large, uncrowded layouts, and the most successful 
websites such as PBS Kids and National Geographic 
adhered to these recommendations. 
User Content 
▰ The PBS Kids site highly facilitates the creation and 
sharing of user content through writing contests and 
games. 
▰ Similarly, National Geographic Kids sponsors user 
photo contests. 
Parent & Teacher Resources 
▰ PBS Kids offered a parent and teachers portal with 
resources. 
▰ Giggle Poetry offered teaching resources, but they 
were designed for children to teach poetry to 
themselves.
III. User Personas 
Personas helped us to imagine the range of motivations behind visiting our site and what sort 
of challenges might be presented by different age groups. 
Linnea Gonzales 
Fifth-Grade Girl 
Anna Askaryan 
Fifteen-Year-Old Student 
Felix Gordon 
Middle School English 
Teacher
III. User Personas 
Each persona contributed to our conception and design of the website in important ways. 
Linnea Gonzales, the fifth-grade girl, made us think seriously about the limitations of creating a 
traditional poetry website for children. We originally planned to make Wug usable for kids as young 
as six, but Linnea is ten and is still too young to be a competent speller, is not tech-savvy, and 
doesn’t read that much yet. Essentially, she showed us that, although some young kids might 
enjoy and be able to use the site, realistically the youngest user-base we could hope for would be 
closer to a teenager, like Anna Askaryan. 
Anna Askaryan became our model for a general teenage user of the site. She already has an 
interest in poetry, has a fair comfort level with technology and Web 2.0, and wants to find a social 
and creative outlet. In particular, Anna’s familiarity with sites like tumblr enabled us to make a site 
that relies on popular design idioms, such as a tiled grid layout, user profiles, liking, and list-making, 
etc. 
Felix Gordon’s persona informed our design of the teaching resources page. 
Information Architecture, Fall 2014
Linnea Gonzales 
Fifth-Grade Girl 
Goals: Become a better singer. 
Meet other kids who like to write 
lyrics. 
Challenges: Doesn’t know much 
about poetry yet. Spelling and 
vocabulary limited. 
Tech Ability: Minimal 
Linnea Gonzales is in the fifth grade. She isn’t a bookworm 
but she does well in school. Somewhat popular, she 
follows all the trends in music, fashion, and TV and 
movies. She is a good singer, and her interest in 
developing this talent is pushing her to learn more about 
the arts. She likes the songwriting of Alicia Keys and Adele. 
Linnea has two older brothers, and the oldest one, 
Sebastian, owns a laptop. The younger one, Joaquin, owns 
a tablet. At Linnea’s insistence Sebastian and Joaquin have 
shown her how to play videogames on their devices, and 
she has learned typing and other basic computer skills at 
school. The websites she is most familiar with are Google, 
YouTube, Facebook, and CoolMathGames. 
Information Architecture, Fall 2014
Linnea Gonzales: Scenarios 
▰ Assignment from teacher 
Linnea’s teacher gives her class a two-part assignment for using Wug. First, the 
students must find several different renditions of Langston Hughes’ Harlem and 
choose their favorite. Second, they must each find a poem they like, record themselves 
reading it, and choose an appropriate picture to go along with it. What IA will make 
this assignment the most straight-forward? 
▰ Link from Facebook 
A boy from Linnea’s school posts his video and recording of Ladies First by Shel 
Silverstein on Facebook. Linnea clicks through to land at the boy’s profile page on 
Wug. He only has the one poem recording up there so far. What IA will make this 
empty profile page pull Linnea in and prompt her to explore the site? 
▰ Actually just interested in poetry 
Linnea has written some lyrics for songs and wants to share them, receive feedback 
(praise), and find other kids writing similar stuff. What IA will help her find like-minded 
people? 
Information Architecture, Fall 2014
Anna Askaryan 
Fifteen-Year-Old Student 
Goals: Become more popular and 
confident, make more friends. 
Find an outlet for creative 
expression. 
Challenges: Shy, lack of 
confidence. Procrastinator. 
Tech Ability: Fair to good, but 
lacks advanced resources 
Anna Askaryan is a fifteen-year-old girl from Glendale, 
California. She is the middle child of Grigor and Irina Askaryan, 
Russian-Armenian mathematicians now running a busy 
delicatessen. Her siblings include older sister Taline (seventeen) 
and younger brother Levon (ten). 
Anna is shy, sweet-tempered, and attracted to sad-and-morbid 
things. She is very close to her family and, apart from besties 
Daniel and Yasmin, does not have many friends. Anna attends a 
math-science magnet school where she is an average student 
and dislikes almost every class except Music and English. She is 
sometimes lonely, and, while the sisters are fond of each other, 
Anna is jealous of the attention her parents give Taline--a 
popular and ambitious honors student on the fast-track to cure 
cancer. Anna is close to her grandfather, Petros, who has always 
encouraged her to read and express herself through writing. 
Between helping her parents run the delicatessen, watching 
over little brother Levon (rough and tumble, mischievous), violin 
practice, and finishing homework at the last minute, Anna does 
not have much free time. But when she has a moment, she 
enjoys reading, being with friends, and watching movies. She is 
active on tumblr, which she checks on her iPhone. She has a 
laptop PC for school and general use. 
Wants: Easy-to-use responsive/mobile interface with social and 
sharing features. Welcoming online environment that 
encourages expression and creativity. 
Information Architecture, Fall 2014
Felix Gordon 
Middle School English Teacher 
Goals: Provide students an 
environment to express 
themselves. Develop a poetry 
curriculum for skeptical children. 
Challenges: Students can be 
difficult, easily distracted, Limited 
budget, resources, time. 
Tech Ability: Not great but willing 
to learn 
Felix Gordon is an English teacher at a public middle school in 
the south side of Chicago, Illinois. He is married to Rebecca 
Pham, an illustrator, and together they have an eight-year-old 
son named Lewis. 
Felix is a hardworking teacher and fierce advocate of the 
humanities in public school curricula. He teaches English to 
grades six, seven, and eight, and many of his students are 
disadvantaged and at-risk youth. Currently, Felix is working 
with two other teachers to develop a poetry curriculum for an 
after-school writing workshop. He believes that creating a safe 
and positive environment for children to express themselves 
is key to successful individual growth. In regular lessons, Felix 
regularly incorporates various media forms, such as music 
and visual arts, to engage his students, and he hopes to 
extend this to the workshop. 
Felix is under tight budget and time constraints--there is one 
desktop PC in his classroom and the school’s library has only a 
handful of sorely outdated machines. But Felix is eager to 
seek out alternative teaching resources that would offer more 
than just reading materials; he wants to draw attention to 
poetry by women and people of color, and to introduce the 
interactive and performative aspects of poetry to his students. 
Wants: Teaching resources that emphasize the performative 
and multi-media possibilities of poetry. Lesson plans, videos 
tailored by grade level, print-outs, and suggested activities for 
students. 
Information Architecture, Fall 2014
IV. Conceptual Framework: “The Vortex” 
This diagram shows the available user actions for different types of content, and how these can 
be categorized into two levels of user behavior. 
▰ PRIMARY LEVEL: Searching, consuming 
▱ Casual unregistered users 
▱ Three access points for discovering 
poetry content: videos, poem 
text/pages, and the user community. 
▱ Access points encourage investment in 
the site, e.g. signing up as member to 
like videos and poems, make lists, 
follow other users, etc. 
▰ SECONDARY LEVEL: Participating, creating 
▱ Registered users 
▱ Unlocks creation & curatorial site 
functions, plus primary functions. 
User-created content then becomes 
discoverable by other users.
V. Userflow 
We created a userflow to map the conceptual framework to user navigation and interactions. 
The three main paths are: Browse, Create, and Curate
userflow: browse
userflow: create
userflow: curate
VI. Wireframes 
We used Balsamiq Mockups for rapid prototyping. More details in the pages to follow.
Homepage 
The landing page for registered and non-registered 
users alike. Recommended content 
changes to reflect user’s logged-in status. 
▰ Universal Navigation - Because our website 
relies on a recommender system to direct users 
to content, we chose to keep our universal 
navigation minimal and unobtrusive, including 
only the essential actions on the site (curate, 
create, browse/explore) and a search bar. 
▰ Teaching Resources - Link to resources for 
teachers and parents. In order to make this 
portal accessible but separate, we kept it out 
of the universal navigation, but only a click away 
on the homepage. 
▰ Featured Content - We wanted to include staff-curated 
content (e.g. “Jay-Z reads Emily 
Dickinson”), but this is atypical of recommender 
sites like Pinterest. Our solution: link it to an 
external blog so that it is available if users want 
it, but it doesn’t "invade" the website or require 
inclusion in the universal navigation.
Login Create an Account
Teaching Resources 
A separate page from the 
main content with resources 
for teachers and parents. 
Inspired by user persona Felix 
Gordon: someone who needs the 
site content but would not 
necessarily be generating any of 
his own. 
Lesson plans, videos which are 
tailored by grade level, print-outs, 
and suggested activities 
for students. 
Homepage features a link to this 
page which is noticeable, but 
not distracting.
Browse 
Browsing and searching are 
essential functions of the site. 
They are the only links to the 
main content. 
Clicking ‘Explore’ in the top nav bar 
leads to a browse page where 
poems, videos, and users are 
displayed across three horizontal 
scrolling carousels. 
Narrow results by clicking ‘refine 
your search!’ in the upper left 
corner, which expands into an 
accordion menu of refinement 
categories.
Search 
Search is accessible at all times 
via the universal navigation. It 
features the same interface as 
the browse page. 
The user can perform a 
keyword search and narrow 
results with the refine your 
search! option.
refine your search! 
To aid browsing and encourage 
exploration, we created a 
refinements bar that echoes 
the hierarchy on the Poetry 
Foundation's browse page. 
Refining enables more accurate 
searching and helps the user 
articulate what kind of poetry 
she seeks, which further 
encourages exploration. 
In addition to conventional 
categories like Subject and 
School/Period, we also offer 
alternative categories, such as 
Tone/Emotion and Color.
Poem Page 
A clear and uncluttered poem reading interface with links to 
other content to stimulate exploration, creation, and 
curation. 
Clicking a poem from the browse or search results page takes the user 
to a poem page. Read the poem, add it to a list, “like” it, or share it 
on a social media site with the buttons above the title. 
Related content sits at the bottom of the page to minimize distraction 
from reading, but it is still difficult to overlook. 
Video, Play Button, and Ellipsis icons reduce the visual clutter of 
labeling the content categories (i.e. "Videos for the same poem", 
"Similar videos of other poems"). Mousing over the icons will produce 
their labels. 
record this poem! will activate the creation interface with which users 
can make recordings. 
Tags display all categories related to this poem, enabling browsing, e.g. 
clicking “funny” tag will display results for all poems with the same tag.
Viewing Interface 
Clicking on a video from the poem page prompts 
a modal viewing interface to appear. This 
displays the video or slideshow, along with poem 
title and author name, and the name of the user 
who made the recording (denoted by microphone 
icon). We chose this interface because it allows 
the user to view the content while staying 
anchored in the original poem page. 
Poem text is also displayed in a scrolling area for 
reading along. 
From here, the user can also “like”, add the poem 
to a list, or share it using the buttons below the 
text area.
Creation Interface 
On every poem page there is a record this poem! button. If 
the user is logged in, clicking this button will prompt a 
creation interface to appear as a modal dialogue box. 
From here, the user has five action options: record, upload, edit, 
save, and publish. 
▰ Scrollable poem text area enables easy reading along. 
▰ Asset library where users can store and manage their 
uploads, and also use stock media if they choose to. 
▰ And the main editing section has drag-and-drop 
functionality for quick media rearrangement. 
Once the user hits publish she'll be met with a confirmation 
dialogue and the options to return to the poem page or view the 
video on her profile.
User Profile 
The user profile serves as a hub 
for curatorial actions: viewing 
and managing recordings, liked 
content, lists, and friends. 
Username, avatar, and social media links. 
Beneath these are four buttons that 
switch between content views. 
Content is displayed in a tiled grid layout 
by default. This can be changed to a listview 
using the view-switcher buttons in the 
upper right next to sorting drop-down 
menu.
Lists View 
By clicking on the lists icon, users can create new lists 
and edit existing ones. 
Clicking on the pencil icon next to a list name will 
prompt another modal dialogue box that allows the 
user to rename the list, delete it, edit the 
description, and rearrange list items.
List Editing Interface 
A simple and powerful set of editing tools 
to maximize curatorial control over a user’s 
lists. 
The following actions are available in the list editing 
interface: 
▰ Rename or delete list 
▰ Edit description 
▰ Change cover image 
▰ Reorder list items by dragging, move to a 
different list, or delete
Poet Page 
We created poet pages in order to make 
an easily-incorporated space to display all 
of a poet’s poems, which is not possible 
from the browse, search, or poem pages. 
Poet pages are accessible by clicking on an 
author’s name, e.g. on a poem page or a 
video, etc. Here, users can: 
▰ Become a fan of the poet 
▰ Explore related tags 
▰ Browse works by the author 
▰ Browse recordings of author’s works 
▰ Browse other fans of the author 
Content is also displayed in a similar grid 
layout to the user profile.
VII. Usability Test: Plan 
Objectives 
Validate general navigability of site for main user actions (e.g. search, create content, curate content, and 
socialize). Validate clarity of labeling across pages. 
Evaluator 
Philip Jesse Bertron-Lowe aka “JB”. Besides being a poet and avid reader of poetry, JB is a middle-school English teacher and 
also organizes the Round Top Poetry Festival every year. 
Methods 
Cognitive walkthrough and think-aloud evaluation with paper prototypes of wireframes. Survey questions for distribution to 
evaluator’s middle-school class, but they were not implemented. See Appendix for full list of survey questions. 
Scenarios 
1. Look for a new poem to use for your poetry class. 
2. Locate a specific poem, find a video for it, find a similar video. 
3. Get suggestions and lesson plans for teaching poetry. 
4. Add a poem to a list. 
5. Create a list, title it, add a cover picture for it, add poems to it. 
6. Delete an item from a list. 
7. Follow a friend. 
8. Make a recording of a poem. 
9. Find a list of all of a poet’s poems.
Usability Test: Results 
Our evaluator successfully completed all of the tasks, however there were several problem 
areas. Below is an overview of our observations. We discuss the problem areas and the 
questions they introduced in the following pages. 
What Worked 
✓ Browsing and searching for poems was 
straightforward. 
✓ Poem page was easy to understand. 
✓ Viewing interface was unproblematic. 
✓ Teacher resources contained desired 
lesson plans and videos. 
✓ BONUS: JB loved the markup (sticky 
notes) accidentally left in our Balsamiq 
mockups. He said they were helpful for a 
first-time user of the site. 
Problem Areas 
✗ Scenario 3, Search results. Relationship between users 
displayed and the search terms is unclear. 
✗ Scenario 3, User profile. What is the default view? 
✗ Scenario 5, Create. Labeling problem, thought "Create" in 
top nav bar was for creating a list. 
✗ Scenario 5, List editing interface. Unclear how to add a 
video to a list. 
✗ Scenario 8, Creation interface. Overwhelmed by options. 
Labeling problem with the tabs of the asset manager. 
Recording interface unclear.
Scenario 3, Search Results 
For Scenario 3, JB was asked to find more 
videos and teaching materials for his class. He 
began by searching for “epistolary poems” in 
the search bar. 
On the results page, he expressed confusion 
about the user avatars displayed in the bottom row 
of the search results. What is the relationship 
between the users displayed on the results 
page and the search term(s)? 
Although this was not a major stumbling block, it 
prompted a discussion: Can users explicitly enter 
or select their interests for searchability? Or are 
these interests determined by the lists they create 
or by their “liking” behavior?
Scenario 3, User Profile 
From the search results page in Scenario 3, JB 
clicked on a user avatar to see what they might 
have on their profile. In his words: “Well, let’s say 
I didn’t find what I wanted on the search results. 
Maybe this person will have something.” 
On the user profile, JB wanted to know about the 
displayed content there (the paper prototype displayed 
the user’s likes by default). Again, this was not an 
obstacle to the task, but another point of discussion: 
What is the default view of the user profile? A user’s 
poems, likes, lists, or friends? Is this area 
customizable? 
After surveying the user profile and not finding what he 
wanted, JB returned to the homepage. From there he 
successfully found the Teaching Resources page and the 
lesson plans he wanted.
Scenario 5, Create 
For this scenario, JB was asked to create a new 
list of poems, title it, add a cover picture for it, 
and add poems to it. From the Teaching 
Resources page, JB clicked the “Create” button 
in the top navigation bar. 
▰ Labeling problem: The “Create” button 
prompts the creation interface to appear-- 
for making new recordings, not for making 
new lists. 
JB closed the creation interface, returning to the 
Teaching Resources page. He then proceeded to 
his user profile by clicking the “You” button in the 
top navigation bar.
Scenario 5, List editing interface 
On the user profile, JB navigated to the lists view. 
He clicked “create new list” and successfully 
interpreted the functions of the editing icons. 
However, JB expressed confusion about how to 
add a new video to the list. 
This was a major problem area. The list editing 
interface lacked functionality for adding new items. 
We discussed solutions, considering Youtube and 
Pinterest as examples of best practice: 
▰ Youtube’s answer: A drop-down search area to 
add videos to the list; this might possibly 
overburden the interface. 
▰ Pinterest’s answer: Adding to lists exclusively 
from poem pages; but it seemed unintuitive to 
be unable to add items while on the list-editing 
interface. 
Ultimately, JB could not complete the task of adding a 
poem to the list via the editing interface, but he was 
able to add to the list from the poem page.
Scenario 8, Creation interface 
For this scenario, JB was asked to make a recording of a 
poem. He clicked the “Create” button in the top nav bar, 
prompting the creation interface to appear. 
At first, JB seemed to be overwhelmed by the options. 
He hovered over the functions for a time before 
consulting the asset manager on the right side of the 
interface. 
▰ Labeling problem: It was unclear what the tab 
labels of the asset manager were meant to 
indicate. Not an obstacle but confusing. 
▰ The recording functions at the bottom of the 
interface were somewhat unclear. They did not 
communicate how recording would actually 
work. 
▰ Importing poem text from a different page into 
the interface was also not obvious (the paper 
prototype has a poem loaded in by default). 
As a positive, JB was very enthusiastic about the leftover 
markup (sticky notes) in the Balsamiq screenshots. He 
found them to be very helpful, especially as a first-time 
user of the site.
Appendix A: User Survey 
Age: 
Gender: 
Grade: 
1. Do you own a smartphone? (Y/N) 
2. What are the websites you visit most often? Please name your top three, but feel free 
to list as many additional ones as you like. 
3. Do you like poetry? (circle one) Feel free to explain. (Yes / kind of / maybe / no / I don’t 
know) Explanation: 
4. Do you ever read or look up poetry on the internet, either for school or for fun? (Circle 
one) If yes, what websites do you use for this purpose? (Y/N) 
Websites: 
5 a. Do you write your own poetry? If yes, please answer questions 5 b through 5 e, as 
well. (Y/N) 
5 b. Do you write poetry for school, for fun, or for both? 
5 c. Do you ever share your poetry with your friends or family? (Y/N) 
5 d. Have you ever shared, posted, or published a poem online? (circle 
one) This can include any poems you have put on Facebook, tumblr, 
twitter, or other social media. If yes, please tell us a little about your 
experience (What website did you post it on? Did you receive positive 
feedback? Was it a good experience?) 
(Y/N; Explain) 
(Not likely / somewhat likely/ very likely) 
5 e. If a website existed for sharing your own poetry and reading others’ 
poetry, how likely would you be to use it? 
6. If you could listen to a poem being recited while you read it, do you 
think this would make the poem less interesting to you, more interesting 
to you, or about the same? 
(less interesting/ more interesting / about the same) 
7. If you could watch a video to go along with the poem while you read or 
listen to it, do you think this would make the poem less interesting to you, 
more interesting to you, or about the same? 
(less interesting/ more interesting / about the same) 
This concludes the survey! Thank you so much for your help!
Criteria poetryfoundation.org gigglepoetry.com poetry4kids.com 
kids.nationalgeo 
graphic.com pbskids.org 
Browsing 
Browsing within tertiary 
navigation. Small browsing 
feature with icons and 
small text on right hand 
side. 
Browsing by icons, 
rating function, and 
randomization 
feature. 
Browsing categories 
useful but poorly 
designed. Small icons 
accompany each 
poem. 
Browsing by colorful 
images with large text 
in continuous scroll. 
Also by Previous & 
Next buttons. 
Browsing by roulette 
wheel, icons and 
images. Categories of 
games are by topic, 
TV show, and 
difficulty level. 
Search 
Search bar in upper-left-hand 
corner with icon. 
Search refinements not 
child-friendly. Search 
results offer preview of 
poem’s first lines. 
No search function. Search engine 
imported from 
Google. Smallness 
and uniformity of text 
not child-friendly. 
Prominent search bar 
in upper-left-hand 
corner with icon. 
Search results are 
text only but are 
colorful and in large 
print. 
No search function. 
Navigation 
Top navigation uniform 
across site. Navigation also 
through small text site 
index at bottom. Not child-friendly. 
Top navigation leads 
to commercial sites. 
Left-hand sidebar 
navigation is colorful 
with large text. 
Navigation items are 
crowded and in small 
text. Accompanying 
icons are small. 
Navigation dropdown 
menu from “GO” 
button offers large 
text icons and list of 
popular items. FAQ, 
About Us, and Privacy 
Policy are small (but 
this could be 
considered child-friendly). 
Top navigation offers 
“Apps,” “Shop,” “Help,” 
etc. Browsing by 
images is primary 
form of navigation. 
Appendix B: Competitive Analysis Table
Criteria poetryfoundation.org gigglepoetry.com poetry4kids.com 
kids.nationalgeo 
graphic.com pbskids.org 
Interactivity & 
Visual Design 
Site is designed in 
professional, adult colors and 
text and is not child-friendly. 
Only interactive elements are 
standard highlighting when 
hovering over a link. 
Site is designed in child-friendly 
colors and large 
text, but layout remains 
chaotic. Interactive 
elements are standard 
link highlighting and the 
rating feature. 
Site is designed with 
small text and crowded 
visual elements. 
Interactive elements are 
standard link 
highlighting, a rating 
feature, and comments 
section. 
Site is designed in very 
child-friendly large text, 
colorful sections and 
prominent images. 
Interactive elements are 
standard link 
highlighting and 
highlighted icons and 
features. 
Site is designed in child-friendly 
large text and 
colorful sections, with 
prominent images. 
Interactive elements are 
standard link 
highlighting, 
animated Flash items 
which move when 
hovered over, and 
roulette browsing 
wheel. 
Parent & 
Teacher 
Resources 
Resources offered in top 
navigation bar and site index 
are not necessarily tailored for 
parents & teachers. 
Poetry Teachers option 
in top navigation leads 
to external site. Poetry 
Class section in sidebar 
is designed for children 
to teach themselves 
poetry. 
For Parents and 
Teachers are options in 
sidebar. For Parents 
leads to a blank page, 
For Teachers leads to an 
article with suggestions 
for a classroom visit by 
poetry authors. 
No Parents or Teachers 
option offered on home 
page. When any link is 
followed, an Education 
Guide is one of many 
links in the bottom site 
index. 
Upper-right-hand corner 
features prominent 
Parents link. This offers 
links to teaching 
resources, school 
readiness programs, 
and a PBS Parents 
website. 
User Connection 
& Content 
Users are offered My Favorite 
Poetry option, but nothing 
tailored for children and no 
user content is featured. 
Users may sign up for a 
newsletter but no other 
connection options 
offered. No user content 
is featured. 
Users may create an 
account and subscribe 
to weekly or monthly 
listservs. User 
comments are featured 
in right-hand sidebar 
and below poems. 
User photos are 
featured on homepage 
and MyShot section. 
Users are given “badges” 
for participating. Users 
may become members 
and sign in to 
personalize their 
content. Users are 
encouraged to vote in 
polls. 
Users may sign in to 
save their games and 
scores. User content is 
not featured.

More Related Content

Similar to Wug (Information Architecture 2014) by J. Olivares, L. Seiple, M. Guy, P. Ko

Why And How Our Schools Need To Be
Why And How Our Schools Need To BeWhy And How Our Schools Need To Be
Why And How Our Schools Need To Beemchoy1
 
Integrating Home Schooling Websites Into Class Activities For
Integrating Home Schooling Websites Into Class Activities ForIntegrating Home Schooling Websites Into Class Activities For
Integrating Home Schooling Websites Into Class Activities Foryamataro670
 
When completing assignments for the next three weeks, please be sure.docx
When completing assignments for the next three weeks, please be sure.docxWhen completing assignments for the next three weeks, please be sure.docx
When completing assignments for the next three weeks, please be sure.docxfranknwest27899
 
Advertising Pitch For Pre School
Advertising Pitch For Pre SchoolAdvertising Pitch For Pre School
Advertising Pitch For Pre SchoolSwati Pednekar
 
Chapter Four Case Study ScenariosEach of the following scenarios p.docx
Chapter Four Case Study ScenariosEach of the following scenarios p.docxChapter Four Case Study ScenariosEach of the following scenarios p.docx
Chapter Four Case Study ScenariosEach of the following scenarios p.docxrusselldayna
 
Chapter Four Case Study ScenariosEach of the following scenarios p.docx
Chapter Four Case Study ScenariosEach of the following scenarios p.docxChapter Four Case Study ScenariosEach of the following scenarios p.docx
Chapter Four Case Study ScenariosEach of the following scenarios p.docxtiffanyd4
 
York Prep Winter 2015 Newsletter
York Prep Winter 2015 NewsletterYork Prep Winter 2015 Newsletter
York Prep Winter 2015 NewsletterYork Prep
 
Presentation studies ma students march 2019 0810
Presentation studies ma students march 2019 0810Presentation studies ma students march 2019 0810
Presentation studies ma students march 2019 0810Candice Livingston
 
Education Philosophy
Education PhilosophyEducation Philosophy
Education Philosophyvanpran
 
Find a "Gold Mine" of Free Internet Based Education Resources
Find a "Gold Mine" of Free Internet Based Education Resources Find a "Gold Mine" of Free Internet Based Education Resources
Find a "Gold Mine" of Free Internet Based Education Resources George Sabato
 
Rah awakening advanced adolescents (2013) blue1
Rah   awakening advanced adolescents (2013) blue1Rah   awakening advanced adolescents (2013) blue1
Rah awakening advanced adolescents (2013) blue1rob howard
 
How to teach languages to toddlers and preschoolers
How to teach languages to toddlers and preschoolers How to teach languages to toddlers and preschoolers
How to teach languages to toddlers and preschoolers Ana Lomba
 
Using Online Social Networks (Ning) to Improve English Language Learning
Using Online Social Networks (Ning) to Improve English Language LearningUsing Online Social Networks (Ning) to Improve English Language Learning
Using Online Social Networks (Ning) to Improve English Language LearningAndrew Cohen
 
Ancient World History.pdf
Ancient World History.pdfAncient World History.pdf
Ancient World History.pdfAlicia Buske
 
ECL210 Prompts
ECL210 PromptsECL210 Prompts
ECL210 Promptsjoelius
 
SES Annual Library Report 2010-2011
SES Annual Library Report 2010-2011SES Annual Library Report 2010-2011
SES Annual Library Report 2010-2011Heather Turner
 
IRA SIG Deaf HH newsletter 2011
IRA SIG Deaf HH newsletter 2011IRA SIG Deaf HH newsletter 2011
IRA SIG Deaf HH newsletter 2011Sharon Pajka
 
Only need 4 out of 8 scenarios.Each of the following scenarios p.docx
Only need 4 out of 8 scenarios.Each of the following scenarios p.docxOnly need 4 out of 8 scenarios.Each of the following scenarios p.docx
Only need 4 out of 8 scenarios.Each of the following scenarios p.docxjohnbbruce72945
 

Similar to Wug (Information Architecture 2014) by J. Olivares, L. Seiple, M. Guy, P. Ko (20)

Why And How Our Schools Need To Be
Why And How Our Schools Need To BeWhy And How Our Schools Need To Be
Why And How Our Schools Need To Be
 
Integrating Home Schooling Websites Into Class Activities For
Integrating Home Schooling Websites Into Class Activities ForIntegrating Home Schooling Websites Into Class Activities For
Integrating Home Schooling Websites Into Class Activities For
 
When completing assignments for the next three weeks, please be sure.docx
When completing assignments for the next three weeks, please be sure.docxWhen completing assignments for the next three weeks, please be sure.docx
When completing assignments for the next three weeks, please be sure.docx
 
Advertising Pitch For Pre School
Advertising Pitch For Pre SchoolAdvertising Pitch For Pre School
Advertising Pitch For Pre School
 
Chapter Four Case Study ScenariosEach of the following scenarios p.docx
Chapter Four Case Study ScenariosEach of the following scenarios p.docxChapter Four Case Study ScenariosEach of the following scenarios p.docx
Chapter Four Case Study ScenariosEach of the following scenarios p.docx
 
Chapter Four Case Study ScenariosEach of the following scenarios p.docx
Chapter Four Case Study ScenariosEach of the following scenarios p.docxChapter Four Case Study ScenariosEach of the following scenarios p.docx
Chapter Four Case Study ScenariosEach of the following scenarios p.docx
 
York Prep Winter 2015 Newsletter
York Prep Winter 2015 NewsletterYork Prep Winter 2015 Newsletter
York Prep Winter 2015 Newsletter
 
Presentation studies ma students march 2019 0810
Presentation studies ma students march 2019 0810Presentation studies ma students march 2019 0810
Presentation studies ma students march 2019 0810
 
Education Philosophy
Education PhilosophyEducation Philosophy
Education Philosophy
 
Find a "Gold Mine" of Free Internet Based Education Resources
Find a "Gold Mine" of Free Internet Based Education Resources Find a "Gold Mine" of Free Internet Based Education Resources
Find a "Gold Mine" of Free Internet Based Education Resources
 
Rah awakening advanced adolescents (2013) blue1
Rah   awakening advanced adolescents (2013) blue1Rah   awakening advanced adolescents (2013) blue1
Rah awakening advanced adolescents (2013) blue1
 
How to teach languages to toddlers and preschoolers
How to teach languages to toddlers and preschoolers How to teach languages to toddlers and preschoolers
How to teach languages to toddlers and preschoolers
 
Never Too Young
Never Too YoungNever Too Young
Never Too Young
 
Using Online Social Networks (Ning) to Improve English Language Learning
Using Online Social Networks (Ning) to Improve English Language LearningUsing Online Social Networks (Ning) to Improve English Language Learning
Using Online Social Networks (Ning) to Improve English Language Learning
 
Ancient World History.pdf
Ancient World History.pdfAncient World History.pdf
Ancient World History.pdf
 
ECL210 Prompts
ECL210 PromptsECL210 Prompts
ECL210 Prompts
 
SES Annual Library Report 2010-2011
SES Annual Library Report 2010-2011SES Annual Library Report 2010-2011
SES Annual Library Report 2010-2011
 
NYSABE presentation
NYSABE presentationNYSABE presentation
NYSABE presentation
 
IRA SIG Deaf HH newsletter 2011
IRA SIG Deaf HH newsletter 2011IRA SIG Deaf HH newsletter 2011
IRA SIG Deaf HH newsletter 2011
 
Only need 4 out of 8 scenarios.Each of the following scenarios p.docx
Only need 4 out of 8 scenarios.Each of the following scenarios p.docxOnly need 4 out of 8 scenarios.Each of the following scenarios p.docx
Only need 4 out of 8 scenarios.Each of the following scenarios p.docx
 

Recently uploaded

LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKMarekMitek1
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样awasv46j
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfOffice Furniture Plus - Irving
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfamanda2495
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxbingyichin04
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxbalqisyamutia
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationZenSeloveres
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...gajnagarg
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahimamgadibrahim92
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Servicemeghakumariji156
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...gajnagarg
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Websitemark11275
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...nirzagarg
 
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...Amil baba
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证ehyxf
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherrymeghakumariji156
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Nitya salvi
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...gajnagarg
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecturesaipriyacoool
 

Recently uploaded (20)

LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
How to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdfHow to Create a Productive Workspace Trends and Tips.pdf
How to Create a Productive Workspace Trends and Tips.pdf
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 

Wug (Information Architecture 2014) by J. Olivares, L. Seiple, M. Guy, P. Ko

  • 1. wug Joseph Olivarez, Lizzie Seiple, Madeleine Guy, & Pearl Ko Information Architecture, Fall 2014
  • 2. Table of Contents I. Vision Statement p. 3 II. Competitive Analysis p. 5 III. User Personas p. 8 IV. Conceptual Framework p. 14 V. Userflows p. 15 VI. Wireframes p. 19 VII. Usability Testing p. 32 VIII. Appendix p. 39 A. User Survey B. Competitive Analysis Information Architecture, Fall 2014
  • 3. I. Vision Statement Wug is a new social and interactive website that lets you create, curate, and explore the world of poetry online. Wug takes traditional poetry to a more interactive level, engaging users of all ages and creating a more exciting atmosphere for learning poetry than is currently available on the internet. We tried to achieve this goal by incorporating user-created visual and audio media into the website. Not only can a user find and read a poem on Wug, but they can also record themselves reciting it and create a video or image to go along with it. This is published to the site and becomes searchable, just like a video posted on Youtube. A user can also publish and record original poems on the site as well.
  • 4.
  • 5. II. Competitive Analysis For a table of our full findings, see Appendix B. We performed a competitive analysis to determine the best information architecture and design practices in children’s and poetry websites. We examined five websites: poetryfoundation.org, gigglepoetry.com, poetry4kids.com, kids.nationalgeographic.com, and pbskids.org. We sought to answer the following questions: 1. What are effective browsing functions for children? 2. How can browsing be made easier and/or more fun for children? 3. How can searching be made more appealing for children? 4. How should search results be displayed? 5. Are there unconventional, alternative linking or exploratory features? 6. How can children be encouraged to explore and interact with content? 7. What is the most visually appealing design for children (colors, menus, shapes, etc.)? 8. How should users be able to submit and curate content? 9. Lastly, what should a parents and/or teachers guide include? Information Architecture, Fall 2014
  • 6. II. Competitive Analysis: Summary of Findings Information Architecture, Fall 2014 Browsing & Navigation ▰ PBS kids and National Geographic Kids offered child-friendly browsing methods: a “roulette wheel” and continuous scrolling, respectively. ▰ The navigation system of the Poetry4Kids site had a crowded layout and distracting background. Search ▰ PBS Kids and Giggle Poetry did not offer a search function. ▰ The search refinements from Poetry Foundation may not have been child-friendly, and the search engine of Poetry4Kids was imported directly from Google. Interaction ▰ The Giggle Poetry site offered an interactive rating system and randomization feature ▰ PBS Kids offered games and the option to save users’ progress and scores. Visual Design ▰ Our research suggested children prefer colorful, large, uncrowded layouts, and the most successful websites such as PBS Kids and National Geographic adhered to these recommendations. User Content ▰ The PBS Kids site highly facilitates the creation and sharing of user content through writing contests and games. ▰ Similarly, National Geographic Kids sponsors user photo contests. Parent & Teacher Resources ▰ PBS Kids offered a parent and teachers portal with resources. ▰ Giggle Poetry offered teaching resources, but they were designed for children to teach poetry to themselves.
  • 7. III. User Personas Personas helped us to imagine the range of motivations behind visiting our site and what sort of challenges might be presented by different age groups. Linnea Gonzales Fifth-Grade Girl Anna Askaryan Fifteen-Year-Old Student Felix Gordon Middle School English Teacher
  • 8. III. User Personas Each persona contributed to our conception and design of the website in important ways. Linnea Gonzales, the fifth-grade girl, made us think seriously about the limitations of creating a traditional poetry website for children. We originally planned to make Wug usable for kids as young as six, but Linnea is ten and is still too young to be a competent speller, is not tech-savvy, and doesn’t read that much yet. Essentially, she showed us that, although some young kids might enjoy and be able to use the site, realistically the youngest user-base we could hope for would be closer to a teenager, like Anna Askaryan. Anna Askaryan became our model for a general teenage user of the site. She already has an interest in poetry, has a fair comfort level with technology and Web 2.0, and wants to find a social and creative outlet. In particular, Anna’s familiarity with sites like tumblr enabled us to make a site that relies on popular design idioms, such as a tiled grid layout, user profiles, liking, and list-making, etc. Felix Gordon’s persona informed our design of the teaching resources page. Information Architecture, Fall 2014
  • 9. Linnea Gonzales Fifth-Grade Girl Goals: Become a better singer. Meet other kids who like to write lyrics. Challenges: Doesn’t know much about poetry yet. Spelling and vocabulary limited. Tech Ability: Minimal Linnea Gonzales is in the fifth grade. She isn’t a bookworm but she does well in school. Somewhat popular, she follows all the trends in music, fashion, and TV and movies. She is a good singer, and her interest in developing this talent is pushing her to learn more about the arts. She likes the songwriting of Alicia Keys and Adele. Linnea has two older brothers, and the oldest one, Sebastian, owns a laptop. The younger one, Joaquin, owns a tablet. At Linnea’s insistence Sebastian and Joaquin have shown her how to play videogames on their devices, and she has learned typing and other basic computer skills at school. The websites she is most familiar with are Google, YouTube, Facebook, and CoolMathGames. Information Architecture, Fall 2014
  • 10. Linnea Gonzales: Scenarios ▰ Assignment from teacher Linnea’s teacher gives her class a two-part assignment for using Wug. First, the students must find several different renditions of Langston Hughes’ Harlem and choose their favorite. Second, they must each find a poem they like, record themselves reading it, and choose an appropriate picture to go along with it. What IA will make this assignment the most straight-forward? ▰ Link from Facebook A boy from Linnea’s school posts his video and recording of Ladies First by Shel Silverstein on Facebook. Linnea clicks through to land at the boy’s profile page on Wug. He only has the one poem recording up there so far. What IA will make this empty profile page pull Linnea in and prompt her to explore the site? ▰ Actually just interested in poetry Linnea has written some lyrics for songs and wants to share them, receive feedback (praise), and find other kids writing similar stuff. What IA will help her find like-minded people? Information Architecture, Fall 2014
  • 11. Anna Askaryan Fifteen-Year-Old Student Goals: Become more popular and confident, make more friends. Find an outlet for creative expression. Challenges: Shy, lack of confidence. Procrastinator. Tech Ability: Fair to good, but lacks advanced resources Anna Askaryan is a fifteen-year-old girl from Glendale, California. She is the middle child of Grigor and Irina Askaryan, Russian-Armenian mathematicians now running a busy delicatessen. Her siblings include older sister Taline (seventeen) and younger brother Levon (ten). Anna is shy, sweet-tempered, and attracted to sad-and-morbid things. She is very close to her family and, apart from besties Daniel and Yasmin, does not have many friends. Anna attends a math-science magnet school where she is an average student and dislikes almost every class except Music and English. She is sometimes lonely, and, while the sisters are fond of each other, Anna is jealous of the attention her parents give Taline--a popular and ambitious honors student on the fast-track to cure cancer. Anna is close to her grandfather, Petros, who has always encouraged her to read and express herself through writing. Between helping her parents run the delicatessen, watching over little brother Levon (rough and tumble, mischievous), violin practice, and finishing homework at the last minute, Anna does not have much free time. But when she has a moment, she enjoys reading, being with friends, and watching movies. She is active on tumblr, which she checks on her iPhone. She has a laptop PC for school and general use. Wants: Easy-to-use responsive/mobile interface with social and sharing features. Welcoming online environment that encourages expression and creativity. Information Architecture, Fall 2014
  • 12. Felix Gordon Middle School English Teacher Goals: Provide students an environment to express themselves. Develop a poetry curriculum for skeptical children. Challenges: Students can be difficult, easily distracted, Limited budget, resources, time. Tech Ability: Not great but willing to learn Felix Gordon is an English teacher at a public middle school in the south side of Chicago, Illinois. He is married to Rebecca Pham, an illustrator, and together they have an eight-year-old son named Lewis. Felix is a hardworking teacher and fierce advocate of the humanities in public school curricula. He teaches English to grades six, seven, and eight, and many of his students are disadvantaged and at-risk youth. Currently, Felix is working with two other teachers to develop a poetry curriculum for an after-school writing workshop. He believes that creating a safe and positive environment for children to express themselves is key to successful individual growth. In regular lessons, Felix regularly incorporates various media forms, such as music and visual arts, to engage his students, and he hopes to extend this to the workshop. Felix is under tight budget and time constraints--there is one desktop PC in his classroom and the school’s library has only a handful of sorely outdated machines. But Felix is eager to seek out alternative teaching resources that would offer more than just reading materials; he wants to draw attention to poetry by women and people of color, and to introduce the interactive and performative aspects of poetry to his students. Wants: Teaching resources that emphasize the performative and multi-media possibilities of poetry. Lesson plans, videos tailored by grade level, print-outs, and suggested activities for students. Information Architecture, Fall 2014
  • 13. IV. Conceptual Framework: “The Vortex” This diagram shows the available user actions for different types of content, and how these can be categorized into two levels of user behavior. ▰ PRIMARY LEVEL: Searching, consuming ▱ Casual unregistered users ▱ Three access points for discovering poetry content: videos, poem text/pages, and the user community. ▱ Access points encourage investment in the site, e.g. signing up as member to like videos and poems, make lists, follow other users, etc. ▰ SECONDARY LEVEL: Participating, creating ▱ Registered users ▱ Unlocks creation & curatorial site functions, plus primary functions. User-created content then becomes discoverable by other users.
  • 14. V. Userflow We created a userflow to map the conceptual framework to user navigation and interactions. The three main paths are: Browse, Create, and Curate
  • 18. VI. Wireframes We used Balsamiq Mockups for rapid prototyping. More details in the pages to follow.
  • 19. Homepage The landing page for registered and non-registered users alike. Recommended content changes to reflect user’s logged-in status. ▰ Universal Navigation - Because our website relies on a recommender system to direct users to content, we chose to keep our universal navigation minimal and unobtrusive, including only the essential actions on the site (curate, create, browse/explore) and a search bar. ▰ Teaching Resources - Link to resources for teachers and parents. In order to make this portal accessible but separate, we kept it out of the universal navigation, but only a click away on the homepage. ▰ Featured Content - We wanted to include staff-curated content (e.g. “Jay-Z reads Emily Dickinson”), but this is atypical of recommender sites like Pinterest. Our solution: link it to an external blog so that it is available if users want it, but it doesn’t "invade" the website or require inclusion in the universal navigation.
  • 20. Login Create an Account
  • 21. Teaching Resources A separate page from the main content with resources for teachers and parents. Inspired by user persona Felix Gordon: someone who needs the site content but would not necessarily be generating any of his own. Lesson plans, videos which are tailored by grade level, print-outs, and suggested activities for students. Homepage features a link to this page which is noticeable, but not distracting.
  • 22. Browse Browsing and searching are essential functions of the site. They are the only links to the main content. Clicking ‘Explore’ in the top nav bar leads to a browse page where poems, videos, and users are displayed across three horizontal scrolling carousels. Narrow results by clicking ‘refine your search!’ in the upper left corner, which expands into an accordion menu of refinement categories.
  • 23. Search Search is accessible at all times via the universal navigation. It features the same interface as the browse page. The user can perform a keyword search and narrow results with the refine your search! option.
  • 24. refine your search! To aid browsing and encourage exploration, we created a refinements bar that echoes the hierarchy on the Poetry Foundation's browse page. Refining enables more accurate searching and helps the user articulate what kind of poetry she seeks, which further encourages exploration. In addition to conventional categories like Subject and School/Period, we also offer alternative categories, such as Tone/Emotion and Color.
  • 25. Poem Page A clear and uncluttered poem reading interface with links to other content to stimulate exploration, creation, and curation. Clicking a poem from the browse or search results page takes the user to a poem page. Read the poem, add it to a list, “like” it, or share it on a social media site with the buttons above the title. Related content sits at the bottom of the page to minimize distraction from reading, but it is still difficult to overlook. Video, Play Button, and Ellipsis icons reduce the visual clutter of labeling the content categories (i.e. "Videos for the same poem", "Similar videos of other poems"). Mousing over the icons will produce their labels. record this poem! will activate the creation interface with which users can make recordings. Tags display all categories related to this poem, enabling browsing, e.g. clicking “funny” tag will display results for all poems with the same tag.
  • 26. Viewing Interface Clicking on a video from the poem page prompts a modal viewing interface to appear. This displays the video or slideshow, along with poem title and author name, and the name of the user who made the recording (denoted by microphone icon). We chose this interface because it allows the user to view the content while staying anchored in the original poem page. Poem text is also displayed in a scrolling area for reading along. From here, the user can also “like”, add the poem to a list, or share it using the buttons below the text area.
  • 27. Creation Interface On every poem page there is a record this poem! button. If the user is logged in, clicking this button will prompt a creation interface to appear as a modal dialogue box. From here, the user has five action options: record, upload, edit, save, and publish. ▰ Scrollable poem text area enables easy reading along. ▰ Asset library where users can store and manage their uploads, and also use stock media if they choose to. ▰ And the main editing section has drag-and-drop functionality for quick media rearrangement. Once the user hits publish she'll be met with a confirmation dialogue and the options to return to the poem page or view the video on her profile.
  • 28. User Profile The user profile serves as a hub for curatorial actions: viewing and managing recordings, liked content, lists, and friends. Username, avatar, and social media links. Beneath these are four buttons that switch between content views. Content is displayed in a tiled grid layout by default. This can be changed to a listview using the view-switcher buttons in the upper right next to sorting drop-down menu.
  • 29. Lists View By clicking on the lists icon, users can create new lists and edit existing ones. Clicking on the pencil icon next to a list name will prompt another modal dialogue box that allows the user to rename the list, delete it, edit the description, and rearrange list items.
  • 30. List Editing Interface A simple and powerful set of editing tools to maximize curatorial control over a user’s lists. The following actions are available in the list editing interface: ▰ Rename or delete list ▰ Edit description ▰ Change cover image ▰ Reorder list items by dragging, move to a different list, or delete
  • 31. Poet Page We created poet pages in order to make an easily-incorporated space to display all of a poet’s poems, which is not possible from the browse, search, or poem pages. Poet pages are accessible by clicking on an author’s name, e.g. on a poem page or a video, etc. Here, users can: ▰ Become a fan of the poet ▰ Explore related tags ▰ Browse works by the author ▰ Browse recordings of author’s works ▰ Browse other fans of the author Content is also displayed in a similar grid layout to the user profile.
  • 32. VII. Usability Test: Plan Objectives Validate general navigability of site for main user actions (e.g. search, create content, curate content, and socialize). Validate clarity of labeling across pages. Evaluator Philip Jesse Bertron-Lowe aka “JB”. Besides being a poet and avid reader of poetry, JB is a middle-school English teacher and also organizes the Round Top Poetry Festival every year. Methods Cognitive walkthrough and think-aloud evaluation with paper prototypes of wireframes. Survey questions for distribution to evaluator’s middle-school class, but they were not implemented. See Appendix for full list of survey questions. Scenarios 1. Look for a new poem to use for your poetry class. 2. Locate a specific poem, find a video for it, find a similar video. 3. Get suggestions and lesson plans for teaching poetry. 4. Add a poem to a list. 5. Create a list, title it, add a cover picture for it, add poems to it. 6. Delete an item from a list. 7. Follow a friend. 8. Make a recording of a poem. 9. Find a list of all of a poet’s poems.
  • 33. Usability Test: Results Our evaluator successfully completed all of the tasks, however there were several problem areas. Below is an overview of our observations. We discuss the problem areas and the questions they introduced in the following pages. What Worked ✓ Browsing and searching for poems was straightforward. ✓ Poem page was easy to understand. ✓ Viewing interface was unproblematic. ✓ Teacher resources contained desired lesson plans and videos. ✓ BONUS: JB loved the markup (sticky notes) accidentally left in our Balsamiq mockups. He said they were helpful for a first-time user of the site. Problem Areas ✗ Scenario 3, Search results. Relationship between users displayed and the search terms is unclear. ✗ Scenario 3, User profile. What is the default view? ✗ Scenario 5, Create. Labeling problem, thought "Create" in top nav bar was for creating a list. ✗ Scenario 5, List editing interface. Unclear how to add a video to a list. ✗ Scenario 8, Creation interface. Overwhelmed by options. Labeling problem with the tabs of the asset manager. Recording interface unclear.
  • 34. Scenario 3, Search Results For Scenario 3, JB was asked to find more videos and teaching materials for his class. He began by searching for “epistolary poems” in the search bar. On the results page, he expressed confusion about the user avatars displayed in the bottom row of the search results. What is the relationship between the users displayed on the results page and the search term(s)? Although this was not a major stumbling block, it prompted a discussion: Can users explicitly enter or select their interests for searchability? Or are these interests determined by the lists they create or by their “liking” behavior?
  • 35. Scenario 3, User Profile From the search results page in Scenario 3, JB clicked on a user avatar to see what they might have on their profile. In his words: “Well, let’s say I didn’t find what I wanted on the search results. Maybe this person will have something.” On the user profile, JB wanted to know about the displayed content there (the paper prototype displayed the user’s likes by default). Again, this was not an obstacle to the task, but another point of discussion: What is the default view of the user profile? A user’s poems, likes, lists, or friends? Is this area customizable? After surveying the user profile and not finding what he wanted, JB returned to the homepage. From there he successfully found the Teaching Resources page and the lesson plans he wanted.
  • 36. Scenario 5, Create For this scenario, JB was asked to create a new list of poems, title it, add a cover picture for it, and add poems to it. From the Teaching Resources page, JB clicked the “Create” button in the top navigation bar. ▰ Labeling problem: The “Create” button prompts the creation interface to appear-- for making new recordings, not for making new lists. JB closed the creation interface, returning to the Teaching Resources page. He then proceeded to his user profile by clicking the “You” button in the top navigation bar.
  • 37. Scenario 5, List editing interface On the user profile, JB navigated to the lists view. He clicked “create new list” and successfully interpreted the functions of the editing icons. However, JB expressed confusion about how to add a new video to the list. This was a major problem area. The list editing interface lacked functionality for adding new items. We discussed solutions, considering Youtube and Pinterest as examples of best practice: ▰ Youtube’s answer: A drop-down search area to add videos to the list; this might possibly overburden the interface. ▰ Pinterest’s answer: Adding to lists exclusively from poem pages; but it seemed unintuitive to be unable to add items while on the list-editing interface. Ultimately, JB could not complete the task of adding a poem to the list via the editing interface, but he was able to add to the list from the poem page.
  • 38. Scenario 8, Creation interface For this scenario, JB was asked to make a recording of a poem. He clicked the “Create” button in the top nav bar, prompting the creation interface to appear. At first, JB seemed to be overwhelmed by the options. He hovered over the functions for a time before consulting the asset manager on the right side of the interface. ▰ Labeling problem: It was unclear what the tab labels of the asset manager were meant to indicate. Not an obstacle but confusing. ▰ The recording functions at the bottom of the interface were somewhat unclear. They did not communicate how recording would actually work. ▰ Importing poem text from a different page into the interface was also not obvious (the paper prototype has a poem loaded in by default). As a positive, JB was very enthusiastic about the leftover markup (sticky notes) in the Balsamiq screenshots. He found them to be very helpful, especially as a first-time user of the site.
  • 39. Appendix A: User Survey Age: Gender: Grade: 1. Do you own a smartphone? (Y/N) 2. What are the websites you visit most often? Please name your top three, but feel free to list as many additional ones as you like. 3. Do you like poetry? (circle one) Feel free to explain. (Yes / kind of / maybe / no / I don’t know) Explanation: 4. Do you ever read or look up poetry on the internet, either for school or for fun? (Circle one) If yes, what websites do you use for this purpose? (Y/N) Websites: 5 a. Do you write your own poetry? If yes, please answer questions 5 b through 5 e, as well. (Y/N) 5 b. Do you write poetry for school, for fun, or for both? 5 c. Do you ever share your poetry with your friends or family? (Y/N) 5 d. Have you ever shared, posted, or published a poem online? (circle one) This can include any poems you have put on Facebook, tumblr, twitter, or other social media. If yes, please tell us a little about your experience (What website did you post it on? Did you receive positive feedback? Was it a good experience?) (Y/N; Explain) (Not likely / somewhat likely/ very likely) 5 e. If a website existed for sharing your own poetry and reading others’ poetry, how likely would you be to use it? 6. If you could listen to a poem being recited while you read it, do you think this would make the poem less interesting to you, more interesting to you, or about the same? (less interesting/ more interesting / about the same) 7. If you could watch a video to go along with the poem while you read or listen to it, do you think this would make the poem less interesting to you, more interesting to you, or about the same? (less interesting/ more interesting / about the same) This concludes the survey! Thank you so much for your help!
  • 40. Criteria poetryfoundation.org gigglepoetry.com poetry4kids.com kids.nationalgeo graphic.com pbskids.org Browsing Browsing within tertiary navigation. Small browsing feature with icons and small text on right hand side. Browsing by icons, rating function, and randomization feature. Browsing categories useful but poorly designed. Small icons accompany each poem. Browsing by colorful images with large text in continuous scroll. Also by Previous & Next buttons. Browsing by roulette wheel, icons and images. Categories of games are by topic, TV show, and difficulty level. Search Search bar in upper-left-hand corner with icon. Search refinements not child-friendly. Search results offer preview of poem’s first lines. No search function. Search engine imported from Google. Smallness and uniformity of text not child-friendly. Prominent search bar in upper-left-hand corner with icon. Search results are text only but are colorful and in large print. No search function. Navigation Top navigation uniform across site. Navigation also through small text site index at bottom. Not child-friendly. Top navigation leads to commercial sites. Left-hand sidebar navigation is colorful with large text. Navigation items are crowded and in small text. Accompanying icons are small. Navigation dropdown menu from “GO” button offers large text icons and list of popular items. FAQ, About Us, and Privacy Policy are small (but this could be considered child-friendly). Top navigation offers “Apps,” “Shop,” “Help,” etc. Browsing by images is primary form of navigation. Appendix B: Competitive Analysis Table
  • 41. Criteria poetryfoundation.org gigglepoetry.com poetry4kids.com kids.nationalgeo graphic.com pbskids.org Interactivity & Visual Design Site is designed in professional, adult colors and text and is not child-friendly. Only interactive elements are standard highlighting when hovering over a link. Site is designed in child-friendly colors and large text, but layout remains chaotic. Interactive elements are standard link highlighting and the rating feature. Site is designed with small text and crowded visual elements. Interactive elements are standard link highlighting, a rating feature, and comments section. Site is designed in very child-friendly large text, colorful sections and prominent images. Interactive elements are standard link highlighting and highlighted icons and features. Site is designed in child-friendly large text and colorful sections, with prominent images. Interactive elements are standard link highlighting, animated Flash items which move when hovered over, and roulette browsing wheel. Parent & Teacher Resources Resources offered in top navigation bar and site index are not necessarily tailored for parents & teachers. Poetry Teachers option in top navigation leads to external site. Poetry Class section in sidebar is designed for children to teach themselves poetry. For Parents and Teachers are options in sidebar. For Parents leads to a blank page, For Teachers leads to an article with suggestions for a classroom visit by poetry authors. No Parents or Teachers option offered on home page. When any link is followed, an Education Guide is one of many links in the bottom site index. Upper-right-hand corner features prominent Parents link. This offers links to teaching resources, school readiness programs, and a PBS Parents website. User Connection & Content Users are offered My Favorite Poetry option, but nothing tailored for children and no user content is featured. Users may sign up for a newsletter but no other connection options offered. No user content is featured. Users may create an account and subscribe to weekly or monthly listservs. User comments are featured in right-hand sidebar and below poems. User photos are featured on homepage and MyShot section. Users are given “badges” for participating. Users may become members and sign in to personalize their content. Users are encouraged to vote in polls. Users may sign in to save their games and scores. User content is not featured.