Week 10 Reflection

This past week, we worked on two things:

1. Detailed script on our content, features, and interactions
2. Initial wireframe sketches for the book and interface

Revised Outline

Based on the user flow map that we created last week, we began to compile a detailed outline to get a better sense of the illustrations, components, and interactions that we will need to prepare for the portion of the book that we are prototyping. Before moving on to the low fidelity sketches, this was an opportunity for us to make sure that all screens were taken into account for the prototype.

Feedback

1. Onboarding experience — One of the feedbacks we received from Kristin was that the onboarding experience of providing users with questionnaire sheets in the first place could be an overwhelming, frustrating experience. We decided to bring more compelling narrative in the hospital onboarding experience to grab parents’ attention.

2. Sticker Map — The second feedback we received was that the sticker map could be frustrating for children at this age because they would want to roam around to earn rewards and stickers. Their attention span is pretty short compared to young adults, and they like to go in a non-linear way, so it would be better to provide an explorative sticker map where children can freely roam.

3. Glossary/Dictionary — Having a glossary/vocabulary feature where parents can get tips on how to explain certain medical terms to their kids could be helpful.

4. Community — One suggestion was including a community aspect to the interface. Family members living with low vision may feel like they have no one to talk to. The community aspect is an opportunity for them to connect with others with similar stories and feel like they are not alone.

Initial Wireframes

Based on our script, we created initial wireframes to get a sense of the flow of interactions and of the storyline. To see our wireframes in detail, visit our Figma board page titled Outline here.

Onboarding and Library

Introduction, Book 1, Introducing Stickers

Book 2, Sticker Map

Book 3

After laying out the onboarding experience, bookshelf, introduction, sticker map and individual books, we compiled a list of changes to make for our next set of wireframes:

1. The onboarding screens include questions that may make it difficult for everyone encountering the interface to fit into very specific condition brackets. Based on the current flow, the user has to experience onset vision loss, have a child aged 6–8 and struggle with specific issues to see the screen ‘We have something we think would help’. Otherwise, participants would spend a lot of effort and time anticipating what comes next, only to find out that our intervention isn’t for them. To revise this flow, we will just give an overview of the book content and target audience, and interested participants can register.
2. Character customization was initially set to happen during the onboarding flow; however, we envision parents being the ones who will primarily be filling out the complex information. Our target audience for character customization is children; thus, we decided to move this screen to the story introduction phase.
3. Adjust the sticker map interface to be more explorable. Rather than having a map that gives off the impression that stickers have to be unlocked in succession, we want to create a map that would allow children to more freely explore, and provide differentiation between the stickers that can be earned through reading the story and additional tasks. We also want to introduce the sticker redemption system here, where if children collect 5 stickers virtually, they can redeem them for a real sticker when they visit the clinic.

Sticker map explorations

4. When children are doing the color contrast activity, we initially included a color slider. We want to change this to color swatches as a slider invites too many color combinations which would make it difficult for us to check each pairing.

5. As many of our interactive activities are text heavy, we wanted to include some activities that gave children more freedom of expression. We initially wanted children to ‘handwrite’ or draw their letters, but this might be difficult given the devices they are using. Instead, we will provide digital stickers and stamps for them to decorate their pages with.

Next Steps

• Create mid-fidelity prototype (black and white digital wireframes) on Figma
• Start drawing the illustrations
• Create UI Kit with visual components (typography, color, buttons, and etc)