Hero image for Rocky

Rocky

the Prismatext mobile app for iOS & Android

Keywords
Requirements gatheringSpecification writingWireframingPrototypingProduct design
Tools used
FigmaFlutter

Background

The earliest Prismatext books were literally emailed to customers as EPUBs and MOBIs, which they then had to side-mount onto their chosen e-reader. This was a cumbersome process, and it was clear that a more streamlined solution was needed.
Fortunately, the decision to build a mobile app meant that we could build more than just an e-reader: we could build a platform around the Prismatext experience, which presented some great opportunities for product exploration and development.

A design teardown of existing e-reader applications

A design teardown of existing e-reader applications, highlighting their strengths and weaknesses

Process

My first responsibility was to write a requirements document to describe in great detail what Rocky would do and how it would interact with Bullwinkle, the backend stack responsible for creating blended-language books. I then performed teardowns on existing e-reader apps, highlighting their strengths and weaknesses against the criteria outlined in the specification document. With these two complete, I was able to quickly create wireframes to illustrate various workflows and states of the mobile application. With the user journeys mapped out, I then focused on finalizing the look & feel of the app, creating robust components and taking care to document certain design considerations for incoming designers.

A quick assortment of high-level concepts for an early iteration of the Prismatext mobile app

A quick assortment of high-level concepts for an early iteration of the Prismatext mobile app

An early onboarding experience for the Prismatext mobile app

An early onboarding experience for the Prismatext mobile app. Our goal here was to capture user abilities and interest to help personalize their experience right from the start (continued below).

A later onboarding experience for the Prismatext mobile app

A challenge we faced with the previous onboarding experience was how best to deliver the 'Aha!' moment to new users. We arrived at a solution where they would first be introduced to a new word in their target language, then immediately see it in context within a small passage where it was used.

Prismatext mobile app e-reader experience with foreign words and phrases

A late prototype demonstrating pop-up functionality in the reader. Users can view translations, hear audio pronunciation, change the density of the foreign words, and adjust the reader settings without having to leave their place in the book.

Prismatext mobile app presentation experience

A high-fidelity overview of each of the major sections of the mobile app.

Takeaway

Because of my specialization in Product Design, the temptation was strong for me to jump into every screen and interaction and work to perfection—but as a cofounder of the company, the hats I wore are myriad, so I had to learn to take a step back from pushing pixels and focus on the bigger picture. I learned to trust my team to execute on the vision I had laid out, and I learned to communicate that vision in a way that was clear and actionable.

© 2025 Zak Erving
built with ❤️ from scratch👨‍🍳