.png)
.png)
We developed a mobile-first minimum viable product (MVP) for initial usability testing, gathering valuable user feedback early on. Simultaneously, we conducted virtual card sorting via UserZoom, where participants categorized and labeled items to inform our information architecture and content tagging. As the Lead Designer for the Welcome & Discover domain, I focused on the aspects of customer acquisition and content exploration, ensuring a cost-effective and rewarding solution. Further, I was accountable for the project staying on time and keeping relevant stakeholders in the loop. Following the Design Thinking framework, user input guided every phase of the project, which spanned the entirety of Q1 2023. We iterated on designs three times to address any issues that arose.
.png)
At P&C*, we have a substantial collection of high-quality content. However, its potential remains untapped if we don't leverage it effectively to drive website traffic. Currently, our content production is costly and has limited visibility on landing pages and navigation fly-ins for one to two months at the most. To address this, we aim to build a digital inspiration hub seamlessly integrated into the user journey. This hub will provide valuable informational knowledge and visual inspiration, catering to users' unique interests and needs. Additionally, we plan to promote our P&C* newsletter and Insider loyalty program on the hub, expanding our customer base and enhancing brand awareness. Ultimately, our objective is to deliver an engaging and interactive digital experience that captivates users and keeps them coming back for more.
.png)
I initiated the process by conducting a comprehensive competitive audit, analyzing content hub examples from both direct and indirect competitors. Brands like Nike and Meta maximize their content marketing ROI through content hubs. During this phase, I gained insights into various types of content hubs, including their respective advantages and disadvantages. The Content Library Approach emerged as the most suitable for our usecase, as it allows us to cover a variety of topics and organize content in a user-friendly manner. This approach also offers SEO benefits by enabling dedicated landing pages for each topic and subtopic, facilitating smooth click paths and easy cross-linking.
.png)
Based on my research, I crafted three epic user stories to guide my brainstorming process, focusing on what is most relevant to the users. One key aspect was creating visually inspiring content to guide users into the shopping funnel, driving conversions and maximizing revenue. At the same time, we aimed to offer informative resources, establishing P&C* as a trusted fashion authority. Additionally, addressing users personally during their exploration phase was expected to enhance their comfort and sense of value. It's worth noting that this assumption was later validated through further testing.
.png)
Next, I created a first rough draft on my whiteboard, considering the structure of a content library hub. The draft included a parent page with a brief introduction, a button group showcasing main themes, and a highlight section tailored to the user's shopping history and interests. I organized content by theme, incorporating quick-links for easy navigation to individual theme overview pages. To enhance personalization, I opted for a dynamic content order aligned with the user's shopping history, interests, and behavior.
.png)
In this new project, we aimed for a more explorative approach while maintaining the established look, feel, and consistency of P&C*. Prioritizing mobile devices, I focused on essential elements for a seamless user experience, considering the limited space available. I developed two design options: "Option 1" drew inspiration from Salesforce's hub setup, featuring a simple vertical layout with curated content for each theme section. Conversely, "Option 2" allowed users to actively switch between inspiring and informative content, filtering previews by sub-themes or content formats, inspired by Meta's hub. After careful evaluation and discussions with stakeholders, we decided to combine the best aspects of both options, denoted by yellow stars.
After merging the designs, we conducted our first round of basic usability testing on UserZoom to gather user impressions and feedback. Our research goals focused on assessing the hub's structure, content relevance, and user likelihood of visiting frequently. Thirty German-speaking participants (15 men and 15 women, aged 25-44) matching our P&C* personas were recruited for the testing. Two prototypes (for men and women) were created, each consisting of three tasks. Participants were encouraged to think aloud while navigating through the scenarios, followed by a short survey to gather additional quantitative insights.
Upon reviewing the results, we observed that the majority of users generally overlooked the small content hub teaser on the start page. The term "P&C Magazin" failed to capture the interest of around two-thirds of participants. Some users expected a magazine-like flipping experience, and the content type behind it was not clear to all. However, upon exploring the hub start page, users were pleasantly surprised and found it exceeded their expectations. Personalized addressing of users proved to be crucial for creating a relaxed environment with curated content. "Trends & Looks" emerged as the most relevant theme based on quantitative data. Users preferred a combination of inspirational and informative content, with the ability to switch between them actively.
.png)
After implementing relevant improvements, we conducted a second usability study with 30 participants (15 men and 15 women, aged 25-44). Two interactive prototypes were prepared. In the initial phase, participants viewed a larger teaser promoting the entry point to the content hub for 10 seconds, allowing us to assess their attention and perception. The subsequent tasks were similar to the previous testing, with the addition of a floating and sticky element for users to interact with and change the content layout. We observed users' immediate engagement with the element and actively sought their thoughts and expectations in the final task. Notably, we tested three available content type states: mixed content by default, inspiring with larger visuals and less text, and informative with more text-heavy content.
In testing the redesigned versions, we found that changing "P&C* Magazin" to "Inspiration Hub" with a new tagline was more appealing and understandable to users. The sticky content type switch element on the theme overview page was noticed by most participants, but initial interaction was limited. Users had mixed opinions on its usefulness. Some felt it was not prominent enough, disrupted the flow, and had functionality issues, negatively affecting their perception of the page structure. However, users expressed a preference for less text, larger images, and the model view in the product lanes. Overall, the hub left a positive impression on users.
.png)
Based on testing insights, we reverted to the original designs as the foundation for our upcoming MVP. The sticky element was causing complexity and confusion, so we settled on the mixed state for the theme overview page, balancing visual elements and text for SEO purposes. I made necessary adjustments for mobile and created additional components in our library. Finally, I documented module specifications for a smooth handover to the developers.
Over the past three months, our focus was on the content hub proof of concept to boost traffic and enhance conversions. Collaborating closely with stakeholders, including users, I led the design process. We developed hub pages and established entry points throughout our website for easy accessibility. User input was paramount, and I prioritized design principles of consistency, continuity, clarity, and aesthetics. Testing helped us find a feasible and viable solution creating a more tailored shopping experience. Moreover, I learnt that it's good to sometimes take a brave step, explore new options with potentially unfamiliar UI patterns and see how users react to it. Essentially, we returned to the original designs with minor adjustments. The project is approved and currently in development. I'm proud of my learning progress and eager for future enhancements.
.png)
