Wug Interactive Poetry Website, Information Architecture 2014

wugJoseph 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 SurveyB. Competitive Analysis


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 AnalysisFor 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?


II. Competitive Analysis: Summary of Findings


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.

Linnea GonzalesFifth-Grade Girl

Anna AskaryanFifteen-Year-Old Student

Felix GordonMiddle School English Teacher

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.

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.



Linnea GonzalesFifth-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.


Linnea Gonzales: Scenarios

▰ Assignment from teacherLinnea’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 FacebookA 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 poetryLinnea 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?


Anna AskaryanFifteen-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.


Felix GordonMiddle 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.

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 toolsto 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: PlanObjectivesValidate general navigability of site for main user actions (e.g. search, create content, curate content, and socialize). Validate clarity of labeling across pages.

EvaluatorPhilip 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.

MethodsCognitive 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.

Scenarios1. 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.

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.

Usability Test: ResultsOur 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.

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 SurveyAge: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.comkids.nationalgeographic.com pbskids.org

BrowsingBrowsing 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.

SearchSearch 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.

NavigationTop 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.comkids.nationalgeographic.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.