Content Landing + Design System
UX House
Background
UX House is a largely Discord-based online UX community that fosters conversation, critique, and educational support for designers. Since 2019, the community has seen considerable growth and its next step is to reach a wider audience beyond Discord. UX House sought to expand their current website through the creation of a digital content section that would supplement the variety of resources the Discord community offers.
I was responsible for designing the content navigation feature, directing users to explore both articles and videos on a variety of design-related topics. By building out this feature I would be contributing to their growing design system, and further expanding their visual identity.
Concept
The initial concept for the content navigation feature was based around showcasing article and video content separately, then inviting users to dive deeper based on media type. This was done by featuring the latest content of each type and using a "show more" button for easy discovery via infinite scrolling. After a thorough competitive analysis, we validated common browsing patterns such as by topic, author, and granular search, which we leveraged within the updated design decisions.
Iteration
The early concept of the content navigation feature led to an issue of content display by truncating the view of subsequent content on the main page, and not scaling beyond 10 items. I resolved this by replacing the infinite scrolling feature with a link to a dedicated page per "see more" button, displaying 10 content cards with pagination. Implementing pagination with the search results will help users keep a mental location for a given item, as well as keep a sense of control in picking content to open. Since there would be a limited amount of content at launch, my approach had to work within context and scale elegantly as the site evolves.
In thinking about discovery and how a user might navigate through content, I implemented a simplified search feature in the final iteration that would also provide the option to filter content, and narrow down the search by topic. A "sort by" drop down was necessary to provide users the option to order content by date, popularity, and relevance. Topics were generated as a tag cloud, and when selected, would lead to a search page with results. These choices were to keep search types consistent, as well as consider scaling.
Additionally, authors have a profile page that is accessible via links. On an author page, a user can see what content the author has published, sort results, and filter by selected topic. Down the road, article pages are to have an author widget that would link both the articles and pages to each other.
Design System
The content navigation feature was an opportunity to expand UX House's early design system by working with their base set of elements to design more complex components that would help meet future goals. My work focused on building components that were both flexible and agnostic as to maximize their value long-term. There was a lot of exploration around each component throughout the iteration process for scaling purposes, as well as ensuring a contextual fit.
A prime example of designing with the system in mind was the article card component. I intentionally built it not just for different break points, but also for different purposes. The versatility of its changing form differentiates whether the user is on the default content page, specific content search results, or if uploaded content was minimal. While it is just a visual UI pattern, it is used functionally to differentiate between results and break up visual redundancy.
Current State
The components and screen layouts for the content navigation feature have been handed off to developers for production, with an expected launch before the end of 2021. As more content is produced, video media will be integrated within the current design. Article page design is being handled simultaneously, usability tests are slated between design completion and launch.