What if goodreads were as colorful as the literature?
Redesigning the goodreads app with a “themes” option
Introduction
In the realm of literature, the conventional association of reading with me-time, nature, and tranquility has often inspired designs featuring hues of green and beige and their calming tones. However, literature itself is a vibrant spectrum, from the texts within books to their colorful covers. For my inaugural individual UX/UI design project at the Iron Hack BootCamp, I’ve opted to redesign the well-known native mobile app goodreads. This case study unfolds the journey of the vibrant “pop mode” I envisioned for goodreads.
Contextualizing the Design Landscape
In this individual project, we were assigned to deliver a series of UX/UI designs within 3 days of working in class. Nevertheless, the deadline limited the capacity of data collection. First, I conducted market research and competitive analysis to understand user behaviors, including desires and constraints comprehensively. goodreads distinguishes itself within the online book community through a combination of unique features and an established user base. A key strength lies in its massive and active user community, fostering a dynamic exchange of book recommendations, reviews, and discussions.
Identifying User Pain Points
Since the assigned task didn’t include either surveys or interviews, I approached the case, first, by defining my target audience: Who do I want to attract with my redesign project? I reviewed the application for answers to this question, and something caught my attention.
Despite its user-friendly interface and diverse feature set, the current design of the goodreads application tends to appear outdated. It lacks the vibrancy that resonates with younger generations, particularly Millennials and Gen Z. This deficiency might hinder engagement among the youth, impacting their reading journey. A potential solution lies in introducing a more colorful and contemporary design that aligns with the preferences commonly found in current marketing color palettes. Hence, the redesign strategy was set: The objective is to enhance the appeal for younger users, encouraging increased interaction with the goodreads application.
Understanding the Audience
Understanding the nuances of Alex’s persona provides valuable insights for tailoring the themes option on the goodreads app. This personalization aims to create a more enjoyable and reflective digital reading experience that aligns seamlessly with Alex’s multifaceted identities.
Streamlining User Interaction
Adhering to the task assignment guidelines, which dictated maintaining the current information architecture, I meticulously crafted the user flow, commencing with a notification prompt within the app heralding the introduction of the “themes option.” Users are presented with a clear choice: to explore the new feature or dismiss the notification.
Visual Inspiration and Redesign Vision
Opting to retain the current color scheme as the foundation for the “classic mode” within the themes option provided a solid framework for envisioning the vibrant “pop mode.” Delving into the nuances of color psychology, I carefully reassessed the hues in the initial slider on the home page, ultimately selecting turquoise as the defining color for the pop mode, complementing the existing green in the color scheme.
In creating the moodboard for the goodreads redesign, each color has been chosen for a reason: Turquoise, known for its calming and soothing properties, introduces a refreshing dimension to the visual palette, fostering a sense of equilibrium and tranquility. Yellow, with its luminous warmth, symbolizes optimism, vitality, and creative inspiration. Meanwhile, the majestic purple hue exudes a sense of refinement and sophistication, evoking feelings of serenity and inner peace, adding a touch of softness and harmony to the overall palette.
Translating Vision into Structure
In refining the design of the goodreads app, my focus zeroed in on the hi-fi wireframes, with a particular emphasis on empowering users to customize their settings. Introducing a color selection feature encompassing “Classic Mode,” mirroring the current design, “Dark Mode” (with classic colors, slated for subsequent development phases), and “Pop Mode,” aligned with my redesign strategy to infuse the UI with vibrant turquoise, green, yellow, and lilac tones. Initial efforts were dedicated to optimizing reusable components, spanning slider containers, buttons, pop-up info boxes, banners, book cards, navbars, and icons. Once the screens were assembled, meticulous attention was paid to applying color schemes, culminating in the creation of a cohesive visual experience and the finalization of the prototype.
tConducting a straightforward usability test provided valuable insights, revealing unexpected user behavior where some users bypassed the notification altogether. This prompted a refinement of the prototype, incorporating additional screens to provide alternative access to the themes option, ultimately enhancing usability. Subsequent adjustments, informed by feedback gathered during the Design Critique session at Iron Hack, focused on enhancing font size, simplifying buttons, and refining wording choices, culminating in a more polished and user-friendly iteration of the goodreads app.
Reflecting on the Journey
Embarking on my inaugural solo UX/UI design venture provided valuable insights and learnings across various facets of the process. Operating independently expedited the formulation of the design strategy, eliminating the need for prolonged group discussions on elements such as problem statements, user personas, and user flows.
However, the individual endeavor presented its set of challenges, particularly in crafting moodboards, design style guides, and screens in Figma, where the time investment proved more demanding compared to collaborative efforts.
Consequently, rather than delving into the granular details of application design, I opted for a broader audience focus, targeting Millennials and Gen Z. This shift allowed for a simpler design approach. The principle is that a broader audience results in a more streamlined identification of common pain points and gains.
Notably, this solo venture catalyzed enhancing my proficiency in Figma. Engaging with tutorials became a pivotal aspect of this journey, leading to notable achievements such as creating three slider containers within a single slider container — an accomplishment that brought a sense of cheerfulness to the process. The project provided a productive learning experience, combining the advantages and challenges of solo UX/UI design exploration, ultimately contributing to my growth and skill refinement.
Insights of the Key Lessons
Key lessons emerged, shedding light on the advantages and disadvantages of individual exploration in this realm:
- While solo work streamlined the design strategy formulation, collaborative efforts proved essential in tackling time-intensive tasks such as creating moodboards and developing style guides.
- The absence of UX research prompted a pivot towards a broader audience, showcasing the adaptability and strategic thinking required in the design process.
- The user persona, Alex Ali Müller, served as a guiding light, shaping the customization options and features to align seamlessly with their interests, values, and preferences.
- From the meticulous creation of hi-fi wireframes, where color schemes came to life, to the iterative process of prototype refinement based on user feedback, every step was a testament to the iterative nature of UX/UI design.
Conclusion
Ultimately, this case study presented an opportunity to enhance technical skills, particularly in Figma, and underscored the significance of user-centric design. Combining color psychology, user personas, and iterative prototyping contributed to a holistic and thoughtful redesign of the goodreads app. As the digital landscape evolves, this project stands as a testament to the ever-evolving nature of UX/UI design and the continuous pursuit of enhancing user experiences in the digital realm.
