Case Study: UX/UI Design & Development for Storiaverse

Project

This project was conceived back in 2021. Our client was passionate about creating a reading app that would make reading attractive for the younger generation. Sadly, people no longer read as much as they used to. Reading has been displaced by social media and videos. However, we share our client’s view that the love of reading still holds great potential for human development, communication, and information engagement.

Our app had to be radically different from our competitors, utilizing innovative solutions in functionality. The main task was engaging users, immersing them in content, turning reading into an enjoyable and useful hobby, and promoting personal growth of young people.

Concept

Our client has decided to offer readers exclusive short stories in a variety of genres (action, sci-fi, drama, comedy, adventure, thriller, etc.). These texts are 10–20 minutes long, enough to captivate the user without taking up too much of their time. This format can be called Reader/Viewer, where the user is immersed in a mix of reading and watching a short movie, experiencing the story more vividly and emotionally. This required us to create a special atmosphere.

Project goal

Developing a modern app design that is usable and aesthetically pleasing, solving the user’s main tasks and engaging them in reading the content. Creating an app format to rival social networks and large marketplaces.

Working on the project

The main design goal was to create high user engagement with the product. We decided to follow the Design Thinking process. This method focuses on meeting the needs of the user, avoiding subjective perceptions, and immersing yourself in target audience research.

Design stages:

• Research
• Creating a User Person
• Designing User Flow
• Wireframe
• Prototyping
• UI Design
• Motion Design

In our research, we compared apps from direct and indirect competitors in terms of functional solutions, usability, and aesthetics. Direct competitors included reader apps on the AppStore. Indirect competitors were chosen from among major streaming marketplaces, using Netflix, Disney+, HBO, and others as examples. The research gave us the idea of uniting these two types of services in one product by combining reading with watching animated shorts. We could thus offer an innovative approach to the reading experience.

We developed a user journey map and used it to identify the key and secondary sections of the app, as well as the user’s main path to the end goal: reading the story, returning to the story, and the actual engagement plan.

The main focus of the UI design was to create an intuitive and functional design that facilitates better user interaction with the app. Every detail had to be carefully considered, from onboarding screens to customization sections.

Project features and benefits

We made the content personalization feature available to each user. After registering, the user can customize their preferences in choosing genres. Based on the selected parameters, the system further recommends content to the reader based on their interests. More than 8 genres are available in the app, including Sci-Fi, Fantasy, Drama, Comedy, Thriller, Horror, and others.

A key benefit of the app is the shareable personalized reading experience that Storiaverse offers. Each story is built around unique content created by Storia’s best writers and animators. When the user selects and opens a story, they are treated to an engaging narrative between 10 and 20 minutes long, each with its own atmosphere. The format doesn’t require being committed to multiple days of reading and isn’t exhausting.

The structure of each story comprises plot-advancing animations, dialogs, text paragraphs, and sound effects played while reading. This creates a cozy, intimate participation effect and deeply immerses the reader in the story. While reading, the user can change the font size, add the story to favorites, or share content with friends.

Main screens

The app has three main sections:

Home Screen shows all the stories with an animated preview, a small description that includes the title, subheading, genre, and a reading time indicator. By swiping, the user can switch to other stories and select a story to read.

Discover allows the user to search for stories by genre and see popular, recently added, and trending stories. Simple title search is also possible.

Bookmarks allow the user to save their favorite stories. The Bookmarks are easily readable, with each story represented by an animated poster listing its title, description, and genre.

The remaining sections of the app deal with profile settings and the notification screen. The profile shows which stories the user has read and favorited, with detailed interaction statistics available for each. The statistics show reading time in hours and the number of stories read in a given period. This helps the user manage their activity on the app.

Notification Settings show system messages and personalized recommendations for new stories or top-rated stories. Each of the sections in Notifications has its own screen, which helps organize the information.

The app’s System Settings allow the user to set up their profile, change their personal details, edit preferences to change personalization, and manage paid subscriptions.

Designing the wireframes was a lengthy process. It’s a brand-new product, so we were constantly coming up with ideas on how to improve the functionality and interface usability. We often had to go back to previous stages and revise solutions. Ultimately, the improvements involved not only adding new functions (such as font settings, categorized search, and screen layouts for different genres) but also completely redoing the components that affected the overall functional logic. This allowed us to refine the general concept of the app.

When the wireframes were done, it was time for the first hypothesis testing and prototyping. For prototyping, we used Figma, which allowed us to quickly combine all screens into a common app architecture and test the designed flow. To identify and eliminate usability obstacles, we did the initial testing with the client.

UI design

The style of the app had to convey mystery and depth. It had to look novel and beautiful. We chose a dark background theme as the basis for the UI. A light-colored theme would have been less attention-grabbing and plain-looking, eliminating the contrast between text and videos. A dark background has good readability, creates the effect of depth and contrast, and sets the right atmosphere.

The color palette with a dark theme offers a pleasant visual experience for users, especially when used at night or in low-light conditions. The palette was enriched with bright colors and Primary branded gradient. For accents like buttons or links, we used only the Primary gradient. Other individual components (e.g. category tiles) also utilize additional colors. The resulting design is solid but not monotonous, with clear highlights for all the necessary elements.

When choosing a font, we decided to base our typography on Avenir. Avenir is highly readable thanks to its clear and balanced letterforms. It’s well suited for texts, headlines, and other design elements where readability is paramount. The font allows for efficient use of space in the design, which is especially important for developing visuals of this kind.

We used many illustrations drawn by our team: various status screens, error screens, notification screens, etc. All the illustrations were animated, which makes the app livelier and suits the atmosphere. Even the simplest screen looks like fun.

Our next challenge was showing an example of app use with Motion design without going into development, and evoke more emotions in the reader from reading the content. One of the stories was used to create an animated prototype. Each story is composed of animations, sound effects, and text with character dialogs. As you scroll through the text, the content is enhanced by short video clips, up to 10 seconds long on average, which convey the atmosphere of the scene. Animation was used to create the video pop-up effects, deepening the immersive aspect.

During the animation phase of the main reading flow, more than 5 different versions were created. By discussing, testing, editing, and combining the animations, we achieved the right atmosphere, satisfying our audience and meeting the client’s wishes.

All testing was done using the Design Thinking method based on user empathy. The project was under NDA during its design phase, so only our team and the client were involved in the testing and feedback gathering. Any issues uncovered during tests were put into a shared document for review and analysis.

After settling the ultimate reading experience concept and approving the design concept, we moved to the development phase. We already had the UI ready, including more than 65 app screens, illustration animations, and a finished animated story reading concept.

Collaboration between the design and development teams is a key element of successful app development. Good communication and teamwork affected the quality of the final product. We released several revisions of the app. As a result, all the intended visual and technical aspects of the app were realized, bringing to life the designed reader experience, which is key to the app’s effectiveness and high conversion rates.

The work process was structured and divided into stages. It was dynamic and synchronized. We often had to retrace our steps by introducing new ideas and improving or refining things. It was a great team effort. The designers, the client, the developers — everyone was focused on the end result, and we achieved it.

Website design

Developing the app also meant presenting it to the users and showcasing its many features. The product needed a website that would present the concept and atmosphere of Storiaverse. We set out to create a promotional site that would convey the essence of the app and pique the interest of users to explore and download it. It had to stand out from the competition and not resemble a standard SaaS platform site.

The site also offers an opportunity for writers and illustrators to get involved in creating new stories.

In creating the website, we sought to convey the emotions of the app through design and motivate users to download the app. While considering the general concept, we experimented with 3D elements, motion design, and illustrations. Some ideas we liked, but they weren’t always what the client desired. Collaborative discussions and layout editing helped us come up with a common visual trend.

Functionally, the design did two key things: it was converting in terms of user engagement and aesthetically fun at the same time. The atmosphere was complemented by well-designed animations for each section of the site. The element pop-up effects during scrolling create a game-like atmosphere, and with each block scrolled, the user is further engaged in exploring the page.

The project concept aims to fulfill two functions. The first and most important is to present the app to the audience. The second is to showcase Storiaverse not just as a reading app, but as an entire universe of unique content.

All animations were created using illustrations animated by motion designers. Visual effects played a big role in creating the right atmosphere and complemented the overall feel of the app.

To generate even more interest, the standard preloader found on most websites was supplemented with a short promotional video. This made the first impression of the project more vivid and facilitated the user experience.

The website was made with Webflow. It suited all our requirements for implementing the desired effects and meeting the project deadline. In some cases, we had to do content optimizations to increase the site loading without sacrificing visual components.

The Storiaverse project illustrates the effectiveness of an integrated approach to problem-solving, both on our part and on the client’s part. The close cooperation, mutual understanding, and willingness to listen and focus on the result helped us create an effective project in a specific business niche, making it unique, socially useful, and well-positioned.

As the project does not stand still and is developing, we are currently working on an additional mode. It will allow users only to view the video, disabling the ability to read it. Each reader will be able to choose a viewing mode that is convenient for him or her. In addition, we are also working on a web platform where users will be able to view content from desktop devices.

Sincere thanks to Sergey Omelaenko for providing materials for this article.