Turning Flatland into an online reading experience

Selecting the target group. Based on recent studies showing a drop in reading among teenagers and their growing interest in geeky stuff, a younger audience was selected for this project.

Research. Research on the state of the web, best practices for usability on desktop/mobile and interactivity/animation was conducted to construct an easy go-to reference for later in development.

Analyzing similar projects. The last step was dedicated to analyzing projects based on visual style, structure and Nielsen's heuristics. This served as examples of what worked well or not and what was already on the market.

User flow. Based on the research on the target group a user flow was developed, keeping in mind possible entry methods such as social media and focusing on the aim of having the user share the site at the end.

Tools, features and content. By analyzing similar projects I was able to find out what features make a reading experience seamless. This helped narrow down what was really necessary, like a navigation system and reading progress.

Wireframes. After nailing that all down, it was finally pencil on paper. Some crazy sketching later, the best elements were selected and joined into a wireframe for testing.

User interview. Participants were given tasks to complete in both the desktop and mobile version, like changing chapters, to evaluate the site's usability.

Research findings. Results were as expected, with most participants being able to complete all tasks. Difficulties with seeing reading progress and identifying the share button were noted and focused on for next iterations.

Digital wireframes. The next step was fixing the issues discovered in the user interview stage and translating everything into the digital to get a feel of positioning and spacing.

Mapping animations and interactions. Interactions and animations were then mapped out using diagrams and descriptions for future reference and possible development.

Moodboards. Moodboard explorations revealed directions for possible visual styles as well as inspiration from past book covers.

Graphic design. I investigated type, colors and textures based on these explorations and decided on a modern and geometric solution. This direction tied in perfectly with the book's content.

High fidelity prototypes. After coming to a decision on the visual language, I applied it onto a few of the earlier low-fidelity wireframes using Figma, tweaking when necessary.

User testing. As a final close to the project, I conducted a desirability test with another group of participants to evaluate if the site aligned with initial expectations. This surfaced some usability issues with color which were fixed for the final prototype.

Adapting my usually short design process to include in-depth research and academic writing was a great exercise in prioritizing what is most important depending on the project. It was rewarding to be able to use all the data collected and have positive feedback on the deliverables after a long year.