This was a project from my UI/UX Design Career Track Course. The project was conducted over the course of 5 days and is based on the Google Ventures Design Sprint. It has been modified to allow it to work with a single person completing all of the tasks in a 5 day span. Each day had its own key task to complete:
Day 1: Learning about the problem.
Day 2: Sketching solutions.
Day 3: Creating a storyboard of the product's primary user flow.
Day 4: Creating a prototype.
Day 5: Testing the prototype.
TinyTales is a startup where authors and illustrators can publish children’s stories for parents to read to their children.
Business Goal:
TinyTales wants to make it easier for parents to pick out a great story to read to their children.
Problems:
Challenges:
Solutions:
Day 1 was dedicated to better understanding the problem space and to map out what a viable solution could look like.
Preliminary research for the project was already done by Bitesize UX. They provided me with research highlights in the form of quotes from 11 different parents. Bitesize UX also provided a persona and a recording of a user interview. I listened to the interview and took note of the pain-points, frustrations, successes, and any other insights that I felt were relevant. I took the insights from the interview and the research highlights and transcribed them on to sticky notes to create an affinity map. Using the affinity map I was able to group and sort patterns to get a better understanding of what the problem space looks like and what needed more attention.
The affinity map allowed me to see that the parents had a few things that were holding them up when picking a story:
Parents seemed to enjoy:
The solution would need to give parents the ability to find new stories that match their specific criteria so they can spend more time reading to their children and less time searching and skimming stories to see if they are appropriate.
I then came up with 3 different end-to-end experiences a user might have with the product in the form of a map.
Day 2 was dedicated to brainstorming solutions without diverging too far from the mark.
The first exercise I implemented was a round of lightning demos. During this timeboxed session, I researched different products that solved a similar problem to the one I’m trying to solve for Tiny Tales. I chose to look at different types of apps that house a lot of content to see how they handled it. I also chose to look at one of the leading competitors to see how they are handling the same issue.
Pros
Cons
Pros
Cons
Pros
Cons
After finishing up the lightning demos I moved on to another exercise called Crazy 8’s. It is meant to challenge people to sketch 8 variations on a critical screen in 8 minutes. I chose to use this method of brainstorming so not to come up with new ideas but to focus on the concepts already presented and to come up with them quickly. I chose to focus my sketches on the filter/preference screen.
1. This is a straight forward well-done search/filter feature. You’ll have the option to filter by how long the story will take, age range, themes, if they are educational/lesson focused/or just fun and other options.
2. The same Search/Filter feature with a save search option so the user can use the same search parameters whenever they need it. This will give the parents more time reading and less time searching and skimming.
3. This sketch shows how the saved searches will appear when you tap the search field.
4. This is an alternative set up to the pop-up modal filter pattern. This would have the same save functionality and filters.
5. This filter window has the user’s children’s profiles set up at the top so they can select one or both to quickly set their search filters for quicker story selection. This will also have the same filters as previous sketches.
6. This shows a long-press function that will allow the user to “see more like this”. Parents will be able to do this to one of their children’s favorites and get some quick suggestions of similar stories.
7. This feature will randomly choose 3 stories for you based on preferences that were set for children’s profiles, previously read, and liked stories.
8. This will be a section of the application that gives recommendations for each individual child as well as both of them. This is also based on preferences that were set for the children’s profiles, previously read, and liked stories.
I chose to combine sketches 5 and 8. This idea utilizes the children’s profiles that have been set up by their parents. These profiles would have the child’s age, relative attention span, types of stories, and themes/interests. By utilizing the profiles it will allow the parents to see a curated list of stories for their children in a few taps.
Screen 1: App opens up to the home screen.
Screen 2: If you want to look for a new story you hit the search button to go to the search/filter screen. When you touch filter a drawer will drop down that has your children’s profiles up top with preloaded preferences such as age and likes. When you press them they will automatically apply their preferences to the filters. From there you can further adjust the filter and either search or just hit apply.
Screen 3: Here you will see your results. A row specific for both children and a row of recommendations for each.
At the beginning of the next day I decided to continue with the three panel board that I sketched the day before. Using that same sketch I expanded upon it by sketching three additional screens creating a storyboard for my solution. As I sketched the storyboard I iterated and refined each screen since I would be using these as rough wireframes.
Since the app offers stories to read, and not books, I decided to format all of the stories as cards. This will give a uniform look to them all and allow for an image and pertinent info as well. I also decided to go with a classic bottom navigation bar with icons and the screen name.
1. Home Screen
This will be the first screen parents will land on when opening the application. This page will welcome the user and show them new/featured stories that are on the app.
2. Search Screen
The user would use this to search for something they have in mind.
3. Search for Something
The screen shows stories that match the word or words searched.
4. Drop Down Filter Modal
5. Search/Filter Results
Results will be shown as a row of “both” and then a row for each child.
6. Selected Story
Once you select a story it will show you all of the details one needs. The only thing to do after this page is to either save it for later or hit the read button to start reading the story.
This day was mostly dedicated to designing the look and feel of the screens that the user would interact with to utilize the new feature that we will be testing. I used the storyboard from the previous day as wireframes. I chose to eliminate one of the screens to keep the prototype streamlined and focused on the main feature. The screen that was removed was the “search for something” screen. I felt the user didn’t need to search for something in order to use the new feature. Here’s a breakdown of each screen:
1. The first page the user will land on is the home page. On the screen you can find a hero slider up top with a grid of cards. The cards represent individual stories. Each one consists of a large image from the story, title, by line, and estimated time it will take to read the story. I made the images nice and large to represent the “cover” of the book. The large images will be helpful for children to pick out a story they may want to read.
2. From there the user would navigate to the search screen. You can find the same grid set up for the story cards on this screen. At the top, you can find a search bar, filter button, and sort button.
3. Once on the search screen, the user would tap the filter button to prompt the filter drop down modal. It looks like your typical filter pattern except it has 2 profiles to choose from up top.
4-6. When the user taps on the profiles it updates the filters to match the profiles preferences. The user can select multiple profiles to set the filters to overlap both preferences.
7. Once the user is done they would tap the apply button. This button will show the results of the filter settings. Once the apply button is tapped the layout of the screen will change slightly. It will be split up into different categories with additional side-scrolling functionality. The top category called “They both will love” has a list of stories that both profiles will enjoy. The other categories are “profile 01 will love”, “profile 02 will love”, and “They might also like” which gives suggestions on what the profiles may like but might be out of the filter settings.
8. The final screen is an example of the detailed description pop-up modal of one of the story cards.
The prototype will show me if my new feature will be a viable solution to the problem, designed in an intuitive way so as not to add to the cognitive load and ease of use. It will also show me what else needs to be changed and tweaked to make it a better feature.
To validate my designs, I chose to interview 5 different parents. Each parent has at least 2 children. They are a mix of mothers and fathers. All 5 interviews were conducted on the same day and were done remotely and moderated.
Through the testing, I will validate my solution and also be able to see what can be done to make it better and more clear.
For the interviews, I followed the 5 act interview technique. Which consists of friendly welcome, context questions, introduction to the prototype, task(s), and quick debrief.
In order to test the new feature I had to create a scenario where the user has already set up profiles for their individual children. When introducing the proptype to the parents I set the stage for them so they would know the context of where they are stepping into the app. After that, I gave them a task. They had to “find a story that both of their children will like.”
Observing and interacting with the interviewees gave me some insights into how well the new feature was working. The majority of the interviewees went directly to the search screen and then tapped the filter. A few of the interviewees attempted to scroll and click around a bit before making their way to the filter drop down and clicking the profile buttons. Once they did they figured out what they were and implemented them to complete the filter.
All of the participants felt the main profile filter feature was good and would be helpful in helping them find and choose stories quicker. Some participants said that the text at the top with the profiles was a little confusing. Most of the participants said that the headers for the results categories needed to be more prominent but liked what they were and how they were displayed.
All 5 interviewees felt the new feature would be a helpful way to allow parents to find books to read to their children faster. A couple felt that it was something that they haven’t really seen before.
With this feedback I feel the feature is a success. Even though it was successful there were a few things that would have changed in the prototype to make things go a little smoother. I would remove the “Save Search” to cut down on some of the questions and confusion it caused. I would have given the profiles names and possibly some kind of avatar to make it look more like someone had actually been using the app. This would have allowed me to better develop the scenario for the task that the interviewees needed to accomplish.
This modified design sprint was an interesting contrast to the more traditional user-centered design methodologies I used before. I like how it pushed me to make decisions faster and to implement them quickly. I can definitely see the value in running sessions like this.
