DIVING DEEP MADE EASY
iOS APP DESIGN
CHILDREN, REFERENCE (8 TO 12 YEARS)
CASE STUDY
​
​
CLIENT
CS Publishing Group, General Publications
​
ROLES
product designer | ux designer
​
DESCRIPTION
Stories of Healing: Jesus and his Followers
iOS interactive app
​
PROJECT SUMMARY
transforming an existing print children's reference book
into an interactive digital experience, ​
with a read-along audio component
ONCE UPON A TIME
​
In the early 80s several Bible scholars got together with a big task at hand. They wanted to find a way to engage kids, because quite frankly, sometimes kids find Bible stories boring. They wrote and designed a book series with 41 concise Bible stories about Jesus and including definitions, terms, maps, and other relevant material for each story. The series was a big success at the time. Fast-forward thirty years, the CSPS Trustees asked General Publications (GP) to expand the catalog of educational products for children. Perfect timing to take this dated content and give it a big update to engage today's kids.
​​​
The new approach combined all of the existing content into one in-depth reference book. Early on, our cross-functional team made a determination that this product warranted not only a print version, but a digital version; providing a more inclusive and engaging experience for readers. Because I was the only designer on staff, both products could not be developed simultaneously, but knowing that the digital version was to be developed—the groundwork could be set in place, (like reference and index tagging, design system, image accessibility alt text, color theory coding, etc.) The print version was published first with updated text, typefaces, graphics, and illustrations; with the full intent of an expanded digital version to be developed.
​DIGITAL TRANSFORMATION
​
​​After the print product was published, our focus was to transform this reference book to an interactive digital experience building on the reference content—making it easy for anyone to use. Displaying the content in a clear and logical manner was probably the most challenging. I was able to easily determine answers to some questions because I was the designer of the print book. It was exciting to have the ability to expand features and incorporate a more interactive experience in the digital product.
​​
personas
prioritization
TARGET AUDIENCE
​
Our discoveries helped us focus and narrow the concepts. Customers were asking for products designed for the 8–12 age group. This project would satisfy this primary need, however, it could be used by younger audiences. We quickly realized that we needed to focus on three target audiences, kids, educators, and parents. I developed personas for each, to define who we would be designing for. I needed to get our team on point to understand our audience. Focusing on our primary persona, “Charlie,” an inquisitive eight year old, we were set to evaluate our solution.
​
EMPATHY
​
While some of these kids do have interest in the subject matter, our primary goal was to engage kids as soon as they open the app.
​
Creating empathy for this group was best understood and accomplished by observing kids as they read through the print book. I was fortunate to have been involved in the design and creation for the original publication. Valuable insights and observations were noted during our thoughtful testing with the print prototypes. This information helped form our personas.
​
I could visualize how the printed book experience could be improved, and the experience would be even more engaging and interactive with our digital product. While the book itself is interactive, it is challenging to skip around to find specific definitions, terms, and references—and then, get back to the main story.
​
RESEARCH
​
Research for this project began with our cross-functional team meeting with carefully selected subject matter experts (SMEs). SMEs included educators, parents, and kids to determine what content was going to be included in the book. Early SME input enabled us to create a dynamic version modeled from the printed book.
​
Parents and educators express concern about limiting screen time for kids. It was important that this app was engaging, interactive, colorful, and included all of the content in an easy to use format.
​
Since the book is very content-heavy, the app would be designed for a tablet due to the screen real estate. Past experience has told us that our user base prefers iOS devices, so I designed the prototypes to work on an iPad because of the screen real estate.
​
SMART DESIGN
​
It was important that the story could be read through, without interruption as it appears in the print book. I thought that the referenced content could be included in a pop-up window, making it more interactive. The pop-up would be activated by touch only when the reader wanted more information. Closing the window keeps the reader in place. No more getting lost and flipping pages is not necessary. This design allowed for better use of the screen real estate.
design system
DESIGN
​
I developed a design system based off the print book. It was easy to carry over the design elements since, careful attention had been made to consider colors, icons, images, and typography for the print book. Each of these elements were carefully selected, knowing that there was a good possibility of future language translations to be developed. The digital book offered more flexibility with the design, interactivity, and features.​
​
must-have features
Various features were included in the prototypes to determine the value each feature added. The content drove the various features I needed to add to the prototypes. Each feature was color-coded and included an icon to visually indicate its function. ​
PROTOTYPE
​
I developed prototypes for user testing. We gathered several volunteers from employee children. Interviews were conducted one-on-one and recorded by members of our team. I was able to analyze videos of each interaction and task the kids were asked to perform. Since kids were with their parents in their home setting, they happily gave honest feedback, making it easier for us to consider viable changes to the prototype.
Feedback was evaluated by our team and empathetic solutions were incorporated into the subsequent iterations of my prototype. The final working prototype was refined and approved by the Board of Directors and various stakeholders with all modification details documented.
​
TESTING
​
Various prototypes were put to the test within our user testing groups. I knew it was important to focus on kids and strived to understand and consider possible improvements. The tests were conducted in-house with our cross-functional team. We developed carefully crafted questions and tasks for each user volunteer. Our goal was to gain unbiased feedback to justify our assumptions.
​
DEVELOPMENT
​
We determined early on who we would bring on board as the development team. We started with an in-house developer to make sure our designs were in scope of the project. Once we had the refined prototype and gained Trustee approval, we could give a green light to our developers. Nothing was designed to be too challenging for the developers to execute.
​
RESULTS
​
The end product proved to tick all of the boxes for the requirements set at the beginning of the project. The design process proved to be essential to create this type of educational tool. It was fun to work with kids and observe how they interact with the app. They are brutally honest when giving feedback, making end product more engaging and effective for learning.
​
Figma, Adobe XD, Illustrator, Photoshop