William Wong Website - Case Study - Spark Reading K-6 Little Books

How did I go about in solving this problem?

Due to this whole project being limited to a fixed budget, it was quite a challenge in deciding whether to go for a fixed static design format or a responsive design format for these eBooks. Just a general decision on which of the two to choose was not going to be the best approach because as of this time that this project has started, responsive design was practically systematic in most web pages out in the world wide web. So therefore, the organization had to think of a strategy to decide which of the two to take.

In order to decide which method to take. The process of time risk management was used to factor in that final decision. The organization gave me a chance to see what I can do and multiple that by a 1000 times to find an estimate in cost and time. The reason we went with this method was because there were couple of issues on this specific eBook creation. The first issue was that there are 1000+ books and we had to ask ourselves, is it worth the time and effort to “redesign” all 1000+ books responsively with limited manpower? A lot of these books transitioning to eBooks will require wireframing from me from beginning to end. For each iteration of wireframing to get to the final design, many back and forth consultation is required between the art director and me on the right design to take for these eBooks. There will also be days when a stakeholder also wants to make a decision on how the design should look for certain eBooks because there are some components that are very important and should be the focal point of that page. In the end, these decisions over a long run will cause a big ripple in the duration of the project.

Second factor we had to considered was that some book layouts look the same because they are from the same series created from the same author. While a similar design can be accomplished for those set of books, a lot of them are also standalone and require specific attention for a new design every time. Lastly, the third issue is that the organization was planning to outsource a lot of the work to "speed" up the process. While on paper, outsourcing does sound like it speeds up the process, however their thinking and the organization’s thinking do not always align the same and this can potentially create conflicts.

Although the third issue was out of my control and my stake in it was minimal, my job was to research current trends and other competitors. Using what I acquired through researching, I would then use one of the books as an example and redesign this book in a complete responsive process while managing how long it takes. While researching, I also have to consider the web content accessibility guidelines (WCAG) for different types of impaired users and if it works for web development because while I can design anything, it actually has to be possible to create it with coding without breaking W3C validation and accessibility. After the first one was completed I went onwards to create 2 or 3 more designs which helps answers the second factor. It gives the organization answers for the average time it takes to come up with designs for mobile responsiveness for a set of books.

What steps I have used to overcome the problem?

Research, cumulative discussions, pen and paper sketches, using Lucid Chart for low fidelity wireframes and high fidelity prototypes were used in achieving the outcome solution of this problem. Research was needed in order to see current trend designs that can be implemented into the current design (eg: flat design, minimalism / white spacing).

The cumulative discussions, pen and paper sketches and low fidelity wireframes on Lucid chart all go together. I would first create the quick design mockup and present it to the art director and/or stakeholders for feedback. Once I have a general sense on what they prefer and how a design should look, it is then that I would move on to high fidelity mockups.

In order to create the high fidelity mockups to foretell the potential of how the final product will look, I would design these eBook views on Adobe XD. During this step, there will still be back and forth on design changes however it will not be as many as it was in the low fidelity wireframes.

What I learned and what I go out of this?

Due to time management and the requirement of 1000+ books that need to be produced, a fixed layout was chosen as the final decision. The organization's stakeholders chose this outcome because redesigning for responsiveness requires a lot more time and people to manage. The designs will always need to be constantly looked at and approved whereas in a fixed layout which has a similar look as the original book, the design is already approved when the books got printed. Since those original designs are already final and require minimal to no changes at all, these fixed layouts allowed the organization to outsource to third parties right away thus making the process a much smoother pace. Seeing that the organization chose to use third party vendors, the vendors just need to follow the design already presented in the physical books and this method eliminates the need for them to redesign anything and in a way saving costs and time in the end.

In conclusion, what I learned from the organization choosing to use third party vendors instead of internal resources is that the final product is not always what you produced. Stakeholders are required see the bigger picture which can eclipse a design process that is even well-thought-out. The number one important rule for stakeholders is prioritizing any projects within the budget because they are the ones paying to have this product created.

How did I go about in solving this problem?

My approach in solving and coming up with a solution for interactive activities is like any other project that I have done which is to research on current products that are currently working. After some extensive exploring, I have narrowed it down to these popular products that are currently hot in the market. These interactive activities come from Prodigy Math, Didax Math and Raz Kids. What I wanted to take away from these sites is the understanding of what younger kids like to do on these activities and the commonality between these 3 websites. In addition to my research, I have also leisurely observed my niece on her tablet on the activities she is playing with and why it it enjoyable for her. Furthermore, unrelated in functionality to this eBook activity, I had ed her playing on the Nintendo Switch on the games she spends a lot of time on. For me as a takeaway of her playing on the Switch, it was to get a general idea how the user interface looks and the user experience that comes from those games.

The colour scheme and typeface choice were also very important in designing for this age group. In all 3 of those websites, something that I found in common throughout the research was younger kids prefer brighter colours. These special type of colours have warmer and friendlier attributes as opposed to monochromatic which are preferred by adults. Typeface for kids are more rounded that gives a "soft feeling" compare to basic typefaces like Times New Roman serif fonts that are more prone for adult readers. Since these attributes will be integrated as part of the eBook activities, all the colours, font choices, font sizes and functionality have to follow proper W3C accessibility standards.

What steps I have used to overcome the problem?

Research, low fidelity wireframes and high fidelity prototypes were key in achieving the outcome of this problem. Research from existing and competing products were used to find colour combinations that can presumably go well together. This method also helped me find proper uses of fonts that is appropriate for the younger age group. Low fidelity wireframes has always been the bread and butter for any startup to get a quick design and collect feedback. The high fidelity prototypes were produced to display the designs on different viewing devices and presenting them to stakeholders.

What I learned and what I go out of this?

In the end, the designs that I have introduced and presented as high fidelity prototypes were used as the eBook activity application. Full screen interactive activities were implemented throughout each individual eBooks from the 1000+ books. As of right now the ones that are completed are currently being used by younger kids. From the latest feedback collected, there were not many user experience issues because some of the features are commonly used in other kids websites and mobile apps which they are all familiar with already. Second is that I followed the accessibility guidelines as good as possible to produce a well-designed user interface, preventing bad experiences when the user navigates throughout the activity.

The font size and typeface I have chosen were very important overall because just the typography itself can make or break the intended purpose of the product. At first, I wanted to use typefaces that were much more rectangular (sans-serif) because it is clean and easy to see. Although that look clean, it did not work for younger kids since it looked more like it was intended for commerce. In the end, it was a good decision to make that change to use a much more rounded font because it was effective to give it a softer look that matches what kids like to see on current successful products.

How did I go about in solving this problem?

The issues with recording programs or applications is that there are so many out there already and are working as intended. In order to come up with the design and functionality for the recording feature that works well with this Spark Reading project, I had to look for products that are out there that are targeted only to children. These products range from general voice recordings web applications to physical recording toys. During my research for mobile/web recording apps and toys, I notice a similar pattern that spreads across all these products. The pattern I noticed was that both toys and recording applications targeted at children have big recording buttons and little need of customization on recording. When compared with general recording applications, the user can customize the decibels and remove background noises just to name a few. I believed these features are unnecessary for this age group and might be too complicated for the intended users. So for the recording feauture, I chose to cut off all those extras and just have a basic record and stop functionality only.

In addition to the recording itself, there are also other preliminary screens before that. For those before screens, I want to keep the same simplicity which is to eliminate all the extras and have straight clear cut instructions for them to do what they need to do and then move on.

What steps I have used to overcome the problem?

Research was used first, a mockup with low fidelity wireframing was next and to finish it off with a high fidelity prototype on Figma. Research was used to discover the reason to eliminate unnecessary features and reduce the number of clicks required to record and save a recording. Balsamiq was used to create low fidelity wireframes, so it was a cleaner approach to present a quick overall design and word description functionality for stakeholders. Lastly, while not very critical to create a high fidelity prototype was only partially needed because it follows the same previously design style as the activities.

What I learned and what I go out of this?

What I attained from this project is that a lot of functionalities can be combined together to perform 2 different tasks instead of having them as individuals. Record and stop buttons reduced to 1 where the user can click just 1 button to either to start recording or stop it instead. The second instance of this is the download and close buttons combined together to download the voice recording automatically and close the recording feature all at once.

As a result of reducing the amount of buttons which cause lesser amount of clicks, the better the user experience became overall. For something that was created and targeted for younger children, the user experience should not take that many clicks just to get something done. This streamlining prevents the user from making unnecessary mistakes and it makes this feature easy to understand what they need to do.

How did I go about in solving this problem?

This part of the project I had to work in different steps than my previous ones. In a rare instance, I was at a live discussion where I had to take notes during a moderated user focus group session. How this was organized was that this was all set up in a regular room with a group of teacher participants with moderators asking questions about their experience with younger students during class time.

Using this information gathered, I was able to decipher that younger kids like to create anything from a blank canvas. This can be an entire environment world like adding trees, building house, roads, …etc. or be very dedicated in customizing the visual look of their online character personas in the games they played. For example, these traits are very commonly shown for boys that like to play with Lego and build something out from an empty board or girls with their Barbie doll whom to be fond of playing dress up with them and role-play. Using these type of data collected, I was able to create some personas to meet those criteria and adjust the organization’s product goal towards that direction.

The second step on this project was internal meetings for people associated with this project. In summary, what we want to get out of the meetings using the personas as our main users was that we want to have an open canvas and let the younger kids decide what they want to customize on it. All these assets can be customized through rewards acquired by paying with the activity currencies that is earned through non-linear ways. Coincidentally, this is also something I am very familiar with or have experience because of the games I play during my free time for my hobbies. There is a lot of comparison between this reward system and the current games out there right now. Today’s games are full of shops or marketplaces for customization and skins. This is a huge plus to keep them interested and continuously engaged because it allows for more options in changing their environments or characters. A similar product feature is also found in Raz Kids however they are only limited to creating a rocket ship which is not every kid’s interest. In order to prevent this from turning into a game completely, we had to make sure this reward system is actually for educational purposes first and fun entertainment second. How we solve this making education first was that the kids have to read the books before they can earn any currency. The currency is also given at random times as well for kids that are not very strong readers to keep everyone fair.

What steps I have used to overcome the problem?

User focus group session, research on characteristics, personas, low fidelity wireframes and user webflow. The user focus group's main purpose was to collect data information of both pros and cons of children's behaviours and what are their likes and pet peeves of certain things in a classroom environment. This data would not only be used to create the final product but also create personas that align with the product's vision. The research itself was to create a more precise persona character which can be used for in house testing trials before getting real users to actually test the product if it effective or not. Low fidelity wireframes were created for the overall first round designs and finally a user webflow to map out how a user can navigate the reward system web application.

What I learned and what I go out of this?

Before I left the organization, this feature is still ongoing because the high fidelity prototype has not been build yet so it has not passed stakeholders requirements nor been tested with actual young students as of yet. However, the groundwork has already been completed such as personas to imitate the actual young students to create different use cases. A somewhat completed user webflow is there to give a general idea how the users will interact with the product and what they can expect this reward system to do.

Other things I got out of this is that, the organization is trying its best to not to gamify this reward system because as mentioned before the reading of the eBooks should be first priority before the fun entertainment part. This is why in the end they have decided to use the eBook reading as the main method to gain in-game currency to purchase assets and environments. For the weaker readers, the random currency gain and the spinner was introduced as a way for them to catch up to younger children that were more expertise in reading. In the aftermath of introducing the spinner, it gives everyone a fair advantage regardless of reading skill level.

I also learned that the use of personas allow me to narrow down what the user will like to do such as customization of certain things. The result of creating personas allows me to sell the product much more convincing and believable for stakeholders. In anticipation of limitless customization as the main feature, I am looking forward to seeing this as the primary driving force on retaining the current users to continue reading at their own pace while still having fun as well.