Matthew
Featherstone
Introduction
TinyTales is a tablet based eBook application which helps parents find age-appropriate stories to read to their children. This Case Study was developed for a "Design Sprint" I solely conducted over 5 days with a forced duration per day of around 2.5 - 3 hours, in total this Case Study took about 15 - 17hours and I strictly abided by the time.
My Role
During this UX Case Study, I tackled user concerns relating to the arduous process of finding
age-appropriate books amidst an overwhelming number of options. The users expressed difficulties navigating the platform to locate suitable content. I worked to address these issues.
Problem and Solution
The problem is users of the TinyTales application for reading children's books are having difficulty navigating the application, finding age-appropriate books, and selecting books that are the right length for their child's reading level.
The solution is to address the navigation issue, I could go ahead and redesign the application's user interface to be more intuitive and user-friendly for both children and adults. To solve the issue of finding age-appropriate books, I can incorporate a recommendation engine that suggests books based on the child's age and reading level. Finally, to help children and adults select books that are the right length, the application can include reading time estimates. This could help parents, children and caregivers find books that fit their child's reading level and comprehension.
Day One
Day one was scheduled to take 3.5 hours to complete.
The first step was to understand and read through TinyTales as a whole and the design brief.
The next step was to create a map or a user flow to draft a possible end to end experience a user might have when using TinyTales.
Design Brief
Upon reviewing the design brief, it became evident that the primary concerns regarding the TinyTales application pertained to its overall navigability, as well as the ease with which users could locate books that are suitable for specific age and reading levels.
Furthermore, the user research and interviews conducted by TinyTales revealed a few noteworthy findings. Notably, parents expressed a preference for sharing books that both they and their children could enjoy, and it was observed that it typically takes some time for them to find such books.
Additionally, it was found that parents often preview the first few pages of a book to assess its reading level and potential interest for their child.
Affinity Maps
Below you can see my quick and fast affinity maps, the information was gathered from taking notes during the user interviews and user research, then the information was synthesised and grouped in an affinity map. You can see as you flick through them that the information is grouped in related sections, the most popular sections are:
-
Parents checking the length or reading level of the book
-
Parents reading the first few pages of the book before committing
-
Both the child and the parent search for a book to read
-
Parents enjoy sharing recommended books
User Flows, Red Route
End-to-End Experience
Here is the primary End-to-End experience or the main red route of the application.
The application begins with the Login/Sign in page, then the application loads into a Home Page. From there the user can find a book on the Home Page (similar to Netflix or Disney Plus) or the user can search via a Search icon or a Recommended section.
From there the book loads and the user can read it, once complete the user can either Review or Recommend the book to Family/Friends who also use the TinyTales application.
Finally the application goes back to the Home Page.
Day Two
Day Two was scheduled to take 3 hours to complete.
The first step was to understand and research competitors and create a solo lighting demos
The final step was to sketch. Sketching in both a crazy eight style and a more polished and finished style.
Competition Analysis,
Lighting Demos
I chose Netflix as my first reference for its familiarity and similarity to TinyTales. It likely faced similar issues as TinyTales.
Netflix's user interface and navigation impressed me, areas where TinyTales struggles.
Although I had reservations about the dark background, I understood its effectiveness in highlighting books/movies without distractions. It enhances the user experience.
I researched Disney Plus next, which is comparable to Netflix but more child-oriented. The micro animations impressed me, and I would have explored this further if time allowed.
The blue background was a great fit for Disney's brand, although TinyTales' brand color is purple, it was challenging to incorporate purple effectively as a background shade.
Overall, Disney Plus had impressive navigation and UI design.
I examined Khan Academy next, a children's learning and education application, with a focus on its reading aspect.
The simple yet intricate background impressed me more than both Netflix and Disney Plus, as it embodied the essence of a children's application.
The animations, both micro and large, were fitting for a child's app, and the colours complemented each other seamlessly.
Crazy Eight's
Crazy eights and rapid ideation sketches in a simple and very quick wireframe style.
This image and the below, are fast iterations of the main pages, Home Page and Login Page.
The main design driving force was derived from competition analysis and the Lighting Demos.
Having a familiar and intuitive Home Page and Login Page, was essential to increase the usability and navigation of the site.
Plus by incorporating a similar way to search for books. Again this will increase the overall experience into a much more seamless and less complex application to learn and use from the offset.
Solution Sketch
These Solution Sketches represent the final iteration of the fast and iterative crazy eight sketches.
The Login Page has been designed to be recognisable and familiar, resembling the login pages of other streaming services and applications with multiple accounts. This approach minimises cognitive load and ensures ease of use, ultimately enhancing the usability of TinyTales.
The Home Page was designed with two styles, "old and modern/new," with the "modern/new" design language being chosen due to its simplicity, familiarity, and current design standards. This choice ensures that the UI is user-friendly, easy to navigate, and appealing to both adults and children. An outdated interface can negatively impact the perceived value of a new application, and therefore, using current design standards is crucial to TinyTales' success.
The Search Page also follows the design language of streaming services and applications with multiple users, reducing the learning curve and cognitive load for the user. A familiar search UI makes it easier to search for content on TinyTales, further enhancing the searchability of the application.
Day Three
Day Three was scheduled to take 2 hours to complete.
The Only Step was to refine the sketches into a more polished and professional 5 to 10 panel story board, a wireframe style to build the prototype from.
Day Four
Day Four was scheduled to take 5 hours to complete.
The only step was to build a functioning prototype in a UX UI software.
I choose XD to build the prototype as due to time restraints XD was the best choice.
Prototype
The Initial Prototype was developed and prototyped using XD within a five-hour timeframe. The wireframe design adopts a black and white color scheme, reflecting the basic nature of this prototype.
The overall design is easy to recognise and learn, placing minimal cognitive load on both new and returning users. The design language is familiar and intuitive, contributing to the overall usability improvements and addressing issues within TinyTales.
The font type is playful yet legible reinforcing the playful and fun nature of learning. while also catering to the legibility needs of young children, adults, and those with visual impairments. This, coupled with large UI icons, creates an application that is easy to read, addressing navigation and usability issues in TinyTales, while creating a fun and playful UI aesthetic.
The link below is an intractable Prototype.
https://xd.adobe.com/view/65b8970a-1218-45dc-9798-286fcbadc321-30eb/
Day Five
Day Five took about 7.5 hours to complete.
The first step was to interview people regarding the user experience of the above prototype. The UX research step took 5 hours.
The Last step was to redesign and tidying up the prototype with colours and images to create a 'final product'. this last step was an exercise in fast and iterative UI design processes' this last process took a strict 2 hours to complete.
Post Usability Testing
The four primary and indispensable pages of the application are the Login Page, Home Page, Recommendation Page, and the Final Page of the book-reading sequence.
Overall the application showed no real fundamental issues with the flow and usability of the application, the main issues were to due with the wording and the icons both shape and locations.
Login Page
All interviewees found the Login Page user-friendly and intuitive, and it functioned to their expectations properly. None of them encountered any issues or expressed dissatisfaction or difficulty with its operation.
Home Page
Similar to the Home Page, the Login Page showed no issue with the interviewees, there were no signs of frustration or issues when they operated this page or getting to and from this page.
Recommendation Page
The Recommendation Page caused the most confusion, this was due to the wording not being clear enough, users weren't sure if the books were recommended by TinyTales or by Friends/Family.
Final Page
The Final Page in the book reading sequence was OK but it had some issues. Overall the design was strong with no real signs of frustrations or concerns shown by the interviewees. But many of the interviewees thought the location of the recommend icon was off when compared to the rest of the icons.
Tidying Up and
Redesigning the UI
Two Hour Time Limit
Within the 2 hour time limit I generated all the imagery through Dall:E an AI imaged based creator.
In this time all the colours and UI icons were implemented. To do all of this was a challenge, this is why there are some aspects which I think are very strong and other aspects which looking back now I should have changed, but this whole exercise is a short 2 hour UX UI Design Sprint.
I used AI generated images of fairy tale animals to bring a sense of fun, fantasy and wonder into TinyTales and reinforce the idea of fun into a children's reading application.
I used a colourful colour scheme throughout to again reinforce the idea of fun and playfulness. All the UI icons are again bright and playful to reinforce this.
Here is a link to the full Prototype
https://xd.adobe.com/view/e281534d-1c49-4699-b15d-bc3506753fa6-b7d2/
Create a Profile
Sign In and Selecting a Book
Conclusion
Here is a link for the full inter-actable web based XD prototype
https://xd.adobe.com/view/e281534d-1c49-4699-b15d-bc3506753fa6-b7d2/
If I kept working or had more time
If I had the opportunity to continue working on the project, there are a few modifications I would have made.
Firstly, addressing the recommendation issues would have been time well spent. A potential solution could have been to have separate sections for recommendations from TinyTales and those from family and friends.
I would have also allocated time to streamline the UI elements and ensure that the icons and colours blend seamlessly. My aim would have been to create a lighter and more refined UI with elements of playfulness and fun.
I believe more micro and macro animations would have also pushed the design further than what it is now.
Also, moving from square book icons to a more rectangular would be best for the ratio of the cover art.
Additionally, I would have preferred to adjust the background colour, perhaps opting for a soft purple hue. I believe the background at this stage is a significant weakness of the application.
The UI and design stage of this project was a strict 5 hour time frame.
Reflections and Learnings
Overall this UX case study was completed in no more than 17 hours, within that time I felt like I accomplished a lot and it was a great, fast paced and effective learning experience not only for what goes on in a design sprint but for learning about children's application.
This 'Design Sprint' taught me a lot about how they work, but also about the differences between how adults perceive and use applications and how children do.
I also gained valuable insights into how various applications and brands integrate similar UX/UI design theories to address and resolve issues.
Working through this 'Design Spring' Case Study for TinyTales has reinforced passion for UX design and it has given more confidence to tackle more challenging and intricate UX issues.
Thank you for the opportunity to review this TinyTales case study.
Story Board Sketch
Below is the Story Board Sketch in a simple WireFrame style.
The begins with the initial sign-in page, resembling the sign-in page of a streaming service. This was to reduce cognitive load and simplify the sign-in process, leveraging users' familiarity.
Next, the reader can either Create an Account or Sign In and move to the Home Page.
The Create an Account page is very simple with a Name, a Profile Picture, age and a reading grade, with aims to filter the library into a more manageable size which fits into the readers comprehension level.
The Home Page again has a very simple and familiar design which again aims to simplify the process of finding a book and to reduce mental work when learning or using a new application.
From the Home Page the reader can either Search for a new book through the universally recognised magnifying glass, or search through recommendated books.
Once the reader has chosen a book to read they are brought through a simple process.
First a page popups showing the cover art, the book title and critically a rough timeframe to complete the book and a rough guide on the age comprehension level, this is to address some of the issues with TinyTales.
Then, the next pages are for the reader to read the book, with next and previous page options on the side of the screen, to address ergonomic issues while holding the tablet or iPad horizontally.
Finally once the book is finished, the reader can either go home through a call to action button, or save, download, favourite or add to their reading list. This is portrayed through Icons and titles. Also, the reader can recommend to their family/friends if they liked the book or they think their child would like it.
TinyTales
Children's Bedtime Reading eBook Application
