longform - cykang.comcykang.com/portfolio/wp-content/uploads/2019/08/... · the page without...

LongformUX/UI & User Testing Recommendations

By Cha Kang, Katie Merris, Tom Miller & Abbey Salvo

Introduction

Longform is a modular and immersive single page application containing story-based instructional content juxtaposed with supplementary, interactive, visual assets (widgets).

Project Goal

Purpose

● To create a product that contains both text and widgets that have the ability to be interactively linked in meaningful, instructionally-supportive ways.

● To create a product that is aimed to increase student engagement and information retention despite learning style.

● Create at least 3 personas - representation of the intended users and described as real people.● Create sitemap - show how this product will be linked and presented within the lesson.● Create wireframe - black & white drawing of the screens including all the interactive components and

showing the layout on the page. (Any design flaws are hashed out at this stage. Any movement can be written)

● Create user journey - using personas, create a journey that these personas will take when using this product.

● Create screenshots/comps - detailed drawing of the layout including UI design.● Create prototype - working product that users will use to test to see if the purpose of this product

was achieved. ● Conduct user testing● Review testing results

○ Adjust product according to testing results○ Repeat testing○ Review testing

● Launch (if adjustment is not needed)

Process

User Personas● Representation of a

intended users● Described as real

people● Focus design activities

by using personas

Personas

Name: AnnaAge: 17Grade Level: High School JuniorLearning Style: AuralAbout Anna: She has very poor vision due to Stargardt disease. She enjoys listening to music and audio books in her free time.

Name: JustinAge: 17Grade Level: High School JuniorLearning Style: VisualAbout Justin: He is an athlete training for olympic. He can not attend school due to his training schedule. He was diagnosed as having dyslexia.

Name: MariaAge: 17Grade Level: High School JuniorLearning Style: Read/WriteAbout Maria:She is smart and bright. She was attending a predominantly caucasian student school. She was bullied because of her race.

Persona 1 | AnnaBackground:Anna has very poor vision due to early onset Stargardt disease. Her eye disease causes a large portion of her world to be blocked by a large blurry area. She is also extremely nearsighted. Because she was born with vision problems which have gotten progressively worse, she has adapted by developing a highly aural learning style. She benefits from online schooling because in traditional school she was unable to see what the teacher was doing on the chalkboard, even when sitting at the front of the class. Anna enjoys listening to music and audio books in her free time.

Needs & Goals:Anna needs as much course content available in an audio format as possible. The audio option needs to be very visible so she can make use of it, or she needs to use screen reader software to know that the audio option is available. Her goal is to attend an online university.

Scenario:Her grades improved after she started online classes because she finds the audio podcasts more interesting than listening to a teacher in the classroom. She wants more engaging audio to keep her interested in her learning experience.

Name: AnnaAge: 17Grade Level: High School JuniorLearning Style: Aural

Persona 2 | JustinBackground:Justin is an athlete training for the Olympics. He cannot attend traditional school due to his training schedule. He was diagnosed as having dyslexia, so it takes him a long time to understand topics when he reads, and he struggles to write his thoughts and ideas. Justin doesn’t enjoy school very much, and would like to concentrate on sprinting. However, his coach encourages him to finish high school.

Needs & Goals:It takes a long time for Justin to read so he needs lessons with a lot of visual reference. Since he reverses sounds and can become confused by words that sound alike, he also sometimes has difficulty understanding what he is hearing. He enjoys looking at full screen images and slideshows, as well as movies and animation. Justin’s goal is to graduate from high school so that he can focus on his athletic career.

Scenario:He doesn’t have a lot of time for school work due to his heavy training schedule. He wants to learn with minimum effort, within a short period of time. He likes animation lessons because he can watch and learn without heavy reading.

Name: JustinAge: 17Grade Level: High School JuniorLearning Style: Visual

Persona 3 | MariaBackground:Maria is a bright student. She was attending a school with a largely caucasian student population, and was bullied because of her Hispanic heritage. She is a loner and voracious reader, with a creative and active imagination. She enjoys writing in a diary every day. She wants to finish high school and go to college in the city where she will be exposed to many different cultures. In college, she wants to major in English. Her dream is to become a writer.

Needs & Goals:Maria’s favorite way to learn is by reading, but she is a fast learner and can adapt to many different learning styles. Because of this, she enjoys when she is presented with a variety of different types of content. The variety keeps her engaged, and also reinforces what she has read. Scenario:Because she is a fast reader, sometimes she skims the lessons. However, she tends to slow down when there are multimedia features so she can explore the interactions.

Name: MariaAge: 17Grade Level: High School JuniorLearning Style: Read/Write

Wireframes● Skeletal framework for

new design● Allows for discussion of

layout and page organization

● Contains final visual design decisions

Hamburger Menu with list of chapters to give users quick access to different areas of the page without scrolling

Highlighted number and text; a visual cue to let users know that there is an interaction that needs to be explored

Highlighted number; a visual cue to let users know that this interaction matches the highlighted text

Enlarge image to full screen

Large audio icon with progress bar

Changing images that matches what is being played on the audio

Viewing image 1 out of 8

Large images that support text in meaningful ways and breaks the long paragraph into chunks to relieve information overload.

User Journey● Represents a scenario

in how the personas might interact with this product

● Demonstrates the way the intended users will interact

1. Anna opens the Longform and zooms in on her browser to see better.

2. She reads the text and sees that there’s a hot spot on the word “dwellings” and recognizes the same number on the image.

3. She scrolls to the image and clicks the number. She sees the close up of the dwellings. She clicks all the numbers to look at the images because she doesn’t want to scroll back and forth.

4. She continues to read and see that there is an audio. She clicks audio and listens the audio.

5. She continues to read and see that there is a large image.

6. She zooms out of the browser to see the full image.

7. She zooms back in from the browser to continue to read.

Needs: She needs as much course content available in an audio format as possible. The audio option needs to be very visible so she can make use of it.

Anna’s Journey

Justin’s Journey1. Justin opens the Longform and looks at the

picture. He clicks the numbers and looks at the zoomed images

2. He see the text with same numbers in front of it and reads the text.

3. He see the audio and image. He clicks the audio. He listens while looking at changing images.

4. He scrolls down and looks at the image then continues to read. He stops in the middle to take a break.

5. He comes back to the lesson and clicks the chapter where he left off. He continues to read.

6. He reads a small bit of text and sees the large image. He looks at the image that gives him a break from reading. He continues to read the rest.

Needs: It takes a long time for Justin to read so he needs lessons with a lot of visual reference.

Maria’s Journey1. Maria opens the Longform and starts to

read. She clicks the numbers on the image associated with the words and looks at the zoomed images.

2. She starts to skim through text and stops at the audio. She clicks audio and listens while looking at the changing images.

3. She continues to skim and slows down to look at the image and starts to read the text that’s related to the image.

4. She reads a small bit of text and sees the large image. She looks at the image which makes her slow down and continues to read the rest.

Needs: She tends to skim the lessons. She needs multimedia features so she can slow down and read the lessons.

Comp ● Page layout of proposed design

Subtle parallax effect as the student scrolls down and the content moves above the hero image

As the title over image is covered, title and back to top nav fade in over sticky nav bar

Full screen view of zoom area

Long text broken into readable sections, with large images to draw reader in

Audio feature has default, mobile, and full-screen views for a great user experience at all screen sizes.

Even at smaller sizes the play area remains large, inviting interaction.

Specs ● Detailed description of design

● Colors & fonts

Dividers & Sub-Header

Backgrounds

User Testing ● HCI - Human-computer Interaction

● Evaluate user experience

Preparing for the user testing1. An interview script

Hi, my name is _________, and I am a UX designer for Pearson Online Blended Learning. I am currently working on a project to conduct usability testing for _________. With your permission, I would like to ask you some questions about yourself. Afterwards, I would like you to perform a few tasks on this website while I observe, ask questions, and take notes. You are free to stop at any time, and to only answer questions you feel comfortable answering. Any information you provide, and any video or photos that I take, will be used for research purposes only. Is this ok? (wait for answer) Next, I would like to record video and audio of this session on this device for future study. Is that ok with you? (If yes, begin recording) Thank you. Before we start, do you have any questions for me? (answer any questions)

2. Personal information to collect:

Name:

Age:

Gender:

Education Level:

Learning Style:

3. Questions and any follow up questions

● Have you ever used online learning tools?○ Can you tell me more about the learning tools that you’ve used?

● How do you feel about online classes?○ Can you tell me why?

● What are some things that you like about online classes?● What are some things that you don’t like about online classes?

4. Tasks for participant

● Let’s say that you are home looking at this lesson, can you go through the lesson like you would normally do? (and remember that there are no right or wrong way of doing this)

5. Questions and any follow up questions after the task is completed

● Did this lesson format keep you interested in this subject? ○ Can you tell me why?

● Did this lesson format help you remember the content?○ Can you tell me why?

● What did you think about the image where you could zoom in on the numbered areas and see the related text highlighted?

○ Did you find this helpful in understanding the lesson content?● What did you think about the audio playing while the images changed?

○ Did you find this helpful in understanding the lesson content?● What was your favorite part of this lesson?● What would you improve, if anything, about this lesson format?

User Testing

Test Goal

● Observe any difficulties users face when using the product

● Observe any difficulties users face when using the interaction

● Find out if the interactivity supported the text

● Find out if the interaction aided in their learning despite their learning style

Testing Methods

● Test location:Preferably the participants home (can be remote or in person)

● Participants:At least 6 participants that match intended users’ age and conditions. i.e. different learning styles

● Equipment:Preferably the participants own equipment

ParticipantsParticipant 1[photo]

Name“Quote” [Tester writes participants quote by his/her overall experience]

DeviceDevice that participant uses (ex: Windows 98Desktop)

Tech savvy1-5 [Tester gives the score after the interview

Participant 2[photo]




















Findings

CategoryArea(s) where participants had issues

ObservationWhat we observed

RecommendationWhat we recommend

Level of Severity1 - inconvenient, 2 - frustrating, 3 - critical

VideoClip of participants having problem with the interaction

Issue 1

Category[Tester writes the issue]

Observation[Tester writes what he/she observed]

Recommendation[Tester writes his/her recommendation]

Level of Severity1 - inconvenient, 2 - frustrating, 3 - critical[Tester choose the level based on his/he observation]

Video[inset clip of participants having problem with this issue]

Final Recommendation

[Tester writes his/her overall recommendation to improve the product]

Questions?Contact: [email protected] Design & User Testing [email protected] [email protected] [email protected]

mailto:[email protected]




longform - cykang.comcykang.com/portfolio/wp-content/uploads/2019/08/... · the page without...

Documents