UX/UI

Case Study: Editorial / Bord Webzine

This project was an extensive collaborative UX/UI undertaking that allowed my team of two other students and me to flex our skills in research, design, and user testing. Our collaboration enabled us to pool our diverse perspectives and expertise, enriching the design process and the final product. Our main goal was to provide an intuitive and engaging user experience catering to the needs of an assigned target group. We followed a meticulous design process, starting with a deep dive into user research, followed by iterative designs and user testing. I’m incredibly proud of the results and hope they demonstrate our dedication to creating meaningful and impactful user experiences.

THE BRIEF

To create a magazine app for an assigned User Persona

THE CHALLENGE

Deliver a user-friendly mobile application, catered to magazines, newspapers, or blogs, that is crafted to meet the unique needs and goals of a given User Persona.

MY ROLE: UX Design, UI Design, Branding

TOOLS USED: Figma, Photoshop,Illustrator, Notion

DEVICE: Mobil App

Overview

The digital press landscape has experienced a significant surge due to the evolving demands of a tech-savvy audience. As the Millennial generation matures, their desire for diverse, digitized content is fueling a shift towards digital platforms.

This transition, initiated by leading publications in the early 2000s, has recently begun to carve out its own distinct identity. In this evolving environment, the challenge for publishers is to deliver not only quality content but also exceptional digital experiences. These experiences should mirror the unique joy of reading a physical magazine, while seamlessly incorporating customization and prioritizing essential privacy features.

Overview

The digital press landscape has experienced a significant surge due to the evolving demands of a tech-savvy audience. As the Millennial generation matures, their desire for diverse, digitized content is fueling a shift towards digital platforms.

This transition, initiated by leading publications in the early 2000s, has recently begun to carve out its own distinct identity. In this evolving environment, the challenge for publishers is to deliver not only quality content but also exceptional digital experiences. These experiences should mirror the unique joy of reading a physical magazine, while seamlessly incorporating customization and prioritizing essential privacy features.

RESEARCH

Understanding of the User’s pain points

USER PERSONA

To provide a clear understanding of our starting point and process, let’s introduce our chosen persona, which played a pivotal role in guiding our research. Among the five unique personas presented, we selected ‘Candice’, a millennial described as a ‘Laid-back creative’. Her background and challenges were instrumental in directing our research towards understanding the specific needs and preferences of her demographic.

COMPETITOR ANALYSIS

As part of our research, we conducted a thorough analysis of multiple high-profile fashion, art, and news magazines. This involved a detailed evaluation of their online subscription models, examining their price points and the features they offered.

Key Takeaways:

  • Identified a lack of personalization features in competitor platforms.
  • Positioned our product to fill this gap with customizable options.

  • Emphasized personalization to cater to user preferences.

VISUAL ANALYSIS

In parallel with our competitor analysis, we carried out an extensive visual study of the same set of magazines. This facilitated our understanding of their aesthetic choices, including color palettes, styles, and fonts, all of which contributed towards the development of our design grids.

Outcome:

We aimed to instill a ‘fresh’, youthful vibe into our publication to match our demographic. This visual exploration played a crucial role in defining the visual identity of our magazine, ensuring it was both attractive and suitable for our intended audience.

From these exercises, we leaned the following insights:

  • The content is captivating and effectively piques the reader’s interest
  • The visual representation of topics is striking and leaves a notable impact
  • The information is structured in a logical and accessible manner
  • The content is intellectually stimulating promoting thought-provoking discussions
  • The approach to engaging readers is unique and compelling
  • The visual presentation of topics is impactful and memorable
  • The information architecture is well-organized and clear
  • The overall impression is one of trustworthiness, enhancing credibility

UNDERSTANDING OUR TARGET AUDIENCE

To better understand and connect with our target group and make our persona more complete, we conducted a survey that consisted of both quantitative and qualitative questions from 26 participants which provided us with critical insights that guided our design process. The results highlighted some interesting aspects:

62%

are 20-34 years of age

56%

were female

53%

Only read articles that interest them personally

40%

want to be able to customize their experience

38%

share articles on Social Media

72%

use smart-phones to read from their favorite apps

DEFINE

Clearly articulate the results from the quantitave research

As a result of all the research and surveys we created a Problem Statement & Hypothesis Statement:

PROBLEM STATEMENT

Users crave a webzine that offers a unique mix of articles tailored to their interests, enhanced with personalization and easy integration with their social media interactions. Such a platform would create a more immersive and tailored user experience, fostering a deeper connection between the user and the content they engage with.

HYPOTHESIS STATEMENT

We believe by streamlining access to topics of interest, enhancing interface personalization, and offering more self-expression options, we can significantly enrich the webzine experience for our target audience.

USER FLOW

The user flow for this project was carefully designed to provide a seamless and intuitive experience for our users. From the initial sign-in, users are guided through a personalized and customizable content experience. As they navigate the platform, they can save articles, view curated content, and utilize rich sharing features. Optional add-ons like audio articles and video clips provide an enhanced experience for those seeking more.

Moodboard

For the moodboard, I aimed to address the gaps found in the competitors’ options, particularly for this age group. My intent was to create an eye-catching, exciting moodboard through the use of vibrant colors and tones, a dash of stunning stylized imagery, along with intriguing textures as an accent. The next step is to translate these elements from the moodboard into a style tile, which will subsequently inform the overall design aesthetic.

Style Guide

Our style tile serves as a comprehensive, visually harmonious guide that epitomizes the fundamental graphical elements of our design. It integrates a color palette, carefully selected based on our survey results, modern typography, and distinctive interface elements that will resonate within the final design. This style tile is pivotal in maintaining design consistency and effectively communicates the overarching aesthetic we aim to embody in our product.

THE LOGO

Following a series of brainstorming sessions and dot mapping exercises, we finally named our webzine ‘BORD’! To further enhance the uniqueness of our design, we leveraged the exceptional illustrative skills of Ola, a member of our team. Her hand-drawn elements infused a distinct, organic touch into our digital artwork, striking a harmonious balance between the digital and the handmade. This blend of elements contributed to a distinctive aesthetic that we were extremely proud of.

IDEATE

Brainstorm all possible solutions

Transitioning from our research phase, we began the exciting journey of bringing our ideas to life with a low-fidelity prototype. This preliminary version of our design served as a tangible representation of our conceptualizations, allowing us to visualize our ideas and identify areas for improvement early in the design process. After refining these early models, we proceeded to develop medium-fidelity prototypes.

LO-FI PROTOTYPE

MID-FI PROTOTYPE

HI-FI PROTOTYPE

Following the refinement of our Low and Mid-fidelity prototype, we embarked on the next step! The creation of our high-fidelity prototype. This detailed representation of our design brought us a step closer to the final product, showcasing our design’s aesthetics, functionality, and interactivity. The high-fidelity prototype provided us with a realistic preview of the user experience, enabling us to conduct further usability testing and fine-tune our design before the final implementation.

FINAL HI-FI PROTOTYPE

Presenting the culmination of our design process, offering a detailed and polished representation of our vision for the webzine, complete with refined aesthetics, functionality, and interactivity.

NEXT STEPS...

Brainstorm all possible solutions

WHATS NEXT

  • Continue refining our design based on user feedback and additional usability testing.
  • Work on the final implementation of our design, focusing on the technical aspects.
  • Ensure a smooth transition from prototype to final product.
  • Looking forward to the upcoming challenges and the opportunity to continue improving our design to best serve our users.

CONCLUSIONS

  • This project has been an exciting journey of research, exploration, and design.
  • We’ve delved into the nuances of user experience and interface design and are proud of the result.
  • We believe our design effectively addresses our target users’ needs, providing them with an engaging and personalized content experience.
  • We are excited about the potential impact it may have on our users’ interaction with digital media.