Denverite is a website/app which aims to provide news dedicated to Denver area. Launched with the mission of keeping residents informed about local news, events, and issues that matter most to them in a fun and interactive way. It allows user to subscribe and donate and is supported by Colorado Public Radio
Methods & Tools
Quantitative and qualitative research, User Personas, User journey, Wire-framing, Documenting style guide, Sketches, Designing UI, High-Fidelity Mockups, User Testing, WCAG accessibility standards.
As a full-time UX designer, I was responsible for the project from end to end, including user research, UX/UI design for mobile application and web. This project serves as a prime example of 0-1 product development, wherein we began by defining the problem, delivering the product, and then iterating on the designs. Collaborate by getting multiple stakeholders together, understand their need, business goals and user needs through out the design process.
My Role
1 Project Manager, 4 Engineers, 2 Researcher, 1 Data analyst, Several Cross-functional stakeholders, 1 graphic designer, 1 Marketing, 1 UX Writer
Team
Timeline
June 2023 - March 2024
CHALLENGE
The website lacked visual appeal. The poorly structured UI led to a lower subscriber count. There were several issues related to content flow, color contrasts, broken links, mobile responsiveness, accessibility, wrong placement of important CTA.
Additionally, crucial call-to-action buttons lacked accessible colors and the information hierarchy in the mobile view was unclear. The layout appeared cluttered and inconsistent throughout the page. Users lacked motivation to engage with the site due to its limited interactivity and dull presentation. Its interface was not sleek hence there was a need of revamp with commitment to enhancing user-friendliness
Before…
Lack of Visual Appeal and unorganized Navigation Bar
No distinct Hierarchy of navigation items, search button needed more importance on the menu. Lack of content organization for relatable news cards…..
Clicking on Search icon would lead to a pop-up
39% of the users intended to search on the icon, but 86% of the users did not proceed further…
Lack of motivation to engage with the site due to its limited interactivity and dull presentation.
After…
Improved Content Hierarchy & Organized Navigation Bar
Adding designated search page with filtering options and introducing cards for top articles
Structured the article page with a clear hierarchy of information, starting with the headline followed by the article body, author information, publication date, and related content.
Used appropriate font sizes, weights, and spacing to differentiate between headings, subheadings, and body text, side content.
DESIGN PROCESS
Discovery and Research
Initial Explorations and Workshops
Conducted multiple collaborative workshops to collectively formulated new brand attributes, identify target demographics, and established business objectives. Our aim was to engage in extensive discussions to craft perfect solutions for the users. We wanted to start the work with a direction where we meet user and business goals. We discussed the objectives for the redesign, brainstorm a mission statement for the project, and develop a list of priorities, ranked highest to lowest, to guide our decisions.
Defining Brand Attributes & Mission Statement
Through a rapid brainstorming session and subsequent prioritization of brand attributes across various dimensions, we swiftly laid the groundwork for crafting a mission statement, accomplishing this task within 190 minutes.
Design Spectrum: Created a shared understanding of visual preference. Everyone has their own design language, one person’s idea of “modern” may be another team member’s “boring”
Cultural Perception: How does our target audience would perceive us?
Target Demographics: How do we define our intended audience?
Brand Voice: What tone do we wish to convey?
Emotional Response: How do individuals feel after interacting with us?
Impact: What measurable effects do we have on others?
Unique Selling Proposition: What sets us apart from competitors?
Key Findings
WHO WE ARE DESIGNING FOR ?
Conducted audit to give equal importance to business goals and user needs, to propose data-driven solution for improvement of the website.
We conducted year-to-date performance of Denverite.com with the goal of gaining a better understanding of the key areas of the site and setting goals for this redesign project. We wanted to focus on the site most performing area first to continue the growth and then target the low performing areas to gain more engagement for that we listed down popular 20 pages.
Newsletter subscriptions and donations were defined as conversion goals, hence tracked down clicks to the donation page to set goal for the conversion post the launch of our website.
Another aspect of our discovery was to know the scroll depth which was tracked on the posts at 0%, 50%, and 100% increments. This information was important for us to understand the pattern of users engagement, we wanted this information to make some design decisions like placement of CTA’s(Subscribe form box) before the users bounce off the page.
Navigation clicks were tracked, but indicated low engagement. Hence that was another challenge for us to solve. Of the total sessions recorded YTD, only 20% navigation clicks were recorded, including the home logo and opens of the mobile navigation, hence out goal was to simplify navigation for the users.
Audience Discovery Audit
After analyzing the top 1,000 queries driving traffic to the site, as well as the pages where that traffic landed, the following themes were identified: Politics and elections, News, Things to do, and Restaurants. This indicated that the primary navigation is well aligned with user interest.
1
2
3
Google image search drove only a few clicks, hence this was one the areas of our concern.
Newsletter subscriptions and donations are defined as conversion goals. Only 0.59% clicked on the donation button since 2021. There was a high need to revamp the donation button and CTAs across the pages. Of the users that made it to the donation page, only 5.3% interacted with buttons, and only 21.8% scrolled at least 90% of the way down the page.
4
Post Engagement: 70% of page views result in users making it halfway down the post and only 20% of page views result in users making it through the entire post. This helped us analyze where we need to place our CTA to get more conversions.
5
Navigation clicks indicated a low engagement of 3.41% including the home logo with maximum clicks to News and Things to do, this indicated a need of more clear and hierarchical navigation
6
Compared the average engagement time per session by users that donated vs users that didn’t. We saw higher engagement numbers for users who donated.
Defining Project Goals
Design to increase engagement by 35% on the site
1
Increase average session time on the website.
2
Increase the interaction on the site, specially on the menu categories and CTA’s
3
Improve accessibility on the site.
4
Then, Identified User Groups
1
Millennial looking for reliable source for news
New to Colorado and looking for the easiest way to stay updated. Mobile news is their go-to!
2
3
Veteran of the city who expects more than just news, looking for service.
4
Denver citizen who is not particularly interested in news, but interested in things that Denver has to offer.
Building Personas & User Journey
We then articulated 4 personas after the research, and identified our key user groups and created 1 persona demonstrating their common needs and pain points. This step was important as we wanted to take guided decision while designing the website. We then created user journey for each persona, we wanted to understand how users are interacting with our website/app and get clear definitions of our pain points. It allowed our team to have discussions and avoided any possibility of assumption misalignments.
Followed Design Principles
Mobile first
1
Make designs that can be usable on mobile
Communication
2
Clear typo with good readability, Bite-sized content, with the option to go deeper
Seamless Navigation
3
Make information easy to access & understand
Present news relevant to the users
4
Design for users
Shared perspective
5
Make social & link sharing easy for readers.
Inclusive Design
6
Accessible design as per WCAG AAA standards
Design Exploration
The next stage of the project involved incorporating colors and branding elements into the website, with careful consideration given to the perspectives of the Denverite news team. Leveraging Miro, we facilitated collaborative input from multiple stakeholders through online boards to gather diverse insights. We wanted to bring all the input together that were discussed and prioritized on research stage, , three distinct versions featuring various UI elements were presented, allowing team to give feedback on their likes and dislikes. Subsequently, in the third round, we consolidated this feedback to finalize the website's theme.
Finalzing UI Elements post iterations
Through a collaborative effort, we successfully arrived at a style that met the expectations of all stakeholders. Our aim was to create a design that were welcoming and engaging, aligning with our primary objective of enhancing user engagement with our stories. To achieve this, we incorporated engaging UI elements such as diagonal graphic elements and unique button hover states, enticing users to explore further and actively engage with the content.
Creative & Engaging
With the use of diagonal graphic elements as well as the fun hover states for the card and buttons, these all evoke a creative vibe that pulls the user into the experience and makes them want to click on something and explore.
Typography + Color + imagery
Zodiak is a serif font whose design is reminiscent of contemporary newspaper fonts. Plus Jakarta Sans, used for body text, takes on a geometric style that consists of modern, clean cut forms and a taller x-height making it legible at a range of sizes. Primary color is the Denverite dark purple. Introducing a warmer/more saturated orange and yellow for accent colors. The Dark purple with the map of Denver pattern can be used as a background to give the site more depth and a more clear division of sections for important calls to action. The lighter purple can be used as a more subtle way to break up sections as well. Imagery is not as relied on to bring in that boldness and color in this tile. There's a bit more personality in the desian elements without going overboard with graphical usedue to the seriousness of some ofDenverite's subject matter.
How we created accessible UI ?
Contrast Ratios: Meeting WCAG standards (minimum contrast ratio of 4.5:1 for normal text, 3:1 for large text).
Color Independence: Did not use color alone to convey meaning. Combined it with text labels, patterns, or icons.
Images and Icons: Using meaningful alt attributes for images and provide text labels or tooltips for icons.
Active Indicators: Highlighting the active page or tab in a navigation menu.
Button States: Ensuring interactive elements like buttons and links have distinct hover, active, and focus states. Used color changes along with outlines, or animations to indicate interaction.
Breadcrumbs: Added breadcrumb navigation for better orientation.
Text and background checks
Text labels with icons on mobile menu
Design System and Documentation
Colors
Buttons
We also documented additional style guide elements, including the horizontal and vertical grid systems tailored for both mobile and desktop interfaces. Additionally, we created the design for search and filter buttons on the site, along with defining the heading levels and body text sizes for both mobile and desktop platforms.
Elements and Styles guide tagged in the full design
Wireframes
The homepage features a trending article along with 2-3 additional trending stories prominently displayed at the top. The rest of the homepage is organized into sections for "Recent," "Things to Do," and "Politics" stories, as these were identified as the most frequently visited pages during the research phase. Modular info cards in varying sizes are used to create a flexible and dynamic design. On the story page, key information is highlighted upfront, allowing users to quickly grasp the main points before choosing to read further.
We began by presenting our concepts using wireframes, prioritizing the creation of wireframes for key pages such as the menu, home, article, category, newsletter, and search pages. Our main objective was to provide various stakeholders with a clear vision of how different sections within these pages would appear. This encompassed elements such as the menu, alert banners, hero story, side stories, popular posts, ad blocks, social icons, newsletter signup section, and search blocks, ensuring they were depicted accurately for both mobile and desktop views. We went under 3 iterations for wireframes for each page and sections.
Accessibility is not an afterthought
Accessibility has been an integral part of our website's development journey right from the start. As a UX designer, I prioritized accessibility not only in the visual design elements but also ensured that developers adhered to WCAG standards during coding. Here are some key aspects we focused on:
Implementing accessible hover states for buttons and text links, incorporating changes in shape, sliding effects, or other visual cues for improved visibility, rather than solely relying on color changes.
Thoroughly testing colors used on the website using contrast checker tools to meet level AAA accessibility standards and verifying compatibility with color blindness through dedicated tools.
Selecting fonts that facilitate easy reading.
Ensuring the accessibility of forms by providing clear instructions and error messages, utilizing labels effectively, and highlighting input elements upon focus.
Used HTML5 semantic elements appropriately (like
<header>,<nav>,<main>,<footer>, etc.) to provide meaning and structure to your content, making it easier for assistive technologies to interpret.Guaranteeing that all functionalities are accessible and operable using a keyboard alone, thereby catering to users who rely solely on keyboard navigation.
HOME PAGE
CATEGORY PAGE
NEWSLETTER PAGE
MENU & SEARCH
Final Designs: Mobile-First Approach
Since a 75% of news readers access content via mobile, the design should prioritize readability, speed, and ease of use on smaller screens. Responsive layouts ensuring optimal display across various screen sizes.
Navigation & User Flow:
Utilized sticky navigation for easy-to-access sections like "Latest News," "Local Stories," and "Trending."
Prioritized frequently used sections for quick access and search optimization
Ads & Monetization:
Non-Intrusive Ads: Ensuring a balance between monetization and user experience.
Sponsored Content Integration: Blending ads with content in a non-disruptive way.
Subscription form: Placed within 50% of the scroll depth to get more clicks
Social & Community Features:
Comments & Discussion Forums: Encouraging user engagement on local topics.
Easy Sharing: Simplified sharing of articles across social media.
Final Designs - Desktop
Menu: Establish a distinct hierarchy for menu items based on their significance and interrelation. Introduce a conspicuous search button and a donate button, enhancing navigational efficiency.
HOME PAGE
Ad Block: Strategically added space for advertisements at multiple sections as per marketing legal requirement .
Modular Grid: Utilized modular grid layout to organize content into visually cohesive blocks with clear visual hierarchy within each block by using different font sizes, colors, and styles to distinguish headlines, subheadings, and body text.
Visual Hierarchy: Established a clear visual hierarchy within each block by using different font sizes, colors, and styles to distinguish headlines, subheadings, and author details, and time stamps. This helps users quickly scan and understand the content even if a particular sections has more that 4 cards.
Footer: Footer served as a resource for users, providing additional navigation options, contact information, and legal disclosures while maintaining a cohesive design aesthetic with the rest of the website. Included icons linking to the news website's official social media profiles, such as Facebook, Twitter, Instagram, Email, etc
Breadcrumb navigation: Implemented breadcrumb navigation at the top of category pages to provide users with a clear path back to higher-level categories or the homepage. This enhanced navigation and helps users maintain context within the website.Ensure backward compatibility and accessibility by including options for keyboard navigation and screen reader compatibility.
Featured content: Highlighted featured articles or top stories within each category to showcase the most important or trending topics
Clear search bar placement: Placed the search bar prominently at the top of the page, ensuring that it is easily accessible and visible to users.
Search result layout: Designed a clear and organized layout for search results, displaying relevant articles with concise titles, publication dates, author name and brief summaries. Use thumbnail images to accompany articles, enhancing visual appeal and aiding content recognition.
Hierarchy of Information: Structured the article page with a clear hierarchy of information, starting with the headline followed by the article body, author information, publication date, and related content. Used appropriate font sizes, weights, and spacing to differentiate between headings, subheadings, and body text.
Clear and readable typography: Used clear and legible fonts for the article text to ensure readability, with sufficient line spacing and contrast against the background. Utilized sans-serif fonts for optimal readability.
Feature Content Block: Highlighted featured or breaking news stories prominently within blocks to draw users' attention and encourage further exploration. Use visually striking images or bold typography to make these stories stand out. Kept the hero section clean and free of unnecessary distractions. Featured a succinct headline capturing the essence of the most vital or trending news story alongside a prominent image, complemented by two additional top stories. Using color coding to help recognize news categories like Culture, Politics etc.
Call-to-action: Used dark purple color for subscribe section to make it stand out, it gave perfect contrast to the Sign up button.
Dynamic Content: Incorporate dynamic content elements for Most Popular Stories to keep blocks fresh and engaging. This encourages users to return to the website frequently for the latest updates. We utilized gradient to add distinction.
Category Identification: Used yellow color for fun category. This was utilized the differentiate the section and also used as a button to visit the category through dynamic blocks.
Second call-to-action: Included clear and compelling call-to-action buttons strategically throughout the page to prompt desired user actions. We wanted to include donation button after 50% of scrolling to give user another chance to engage with it after providing them a service.
Clear and accessible categorization design: Organized category pages into distinct tabs to differentiate between the topics. Used clear labels and visual cues to guide users to understand the current state of the website. Added underline instead of change in color to make the website more accessible.
Related content suggestions: Included sections that suggest related articles or topics within each category page. This encourages users to explore additional content that matches their interests and keeps them engaged on the website
Advance search options: Provided advanced search options for users who want to refine their search queries further. Included filters such as date range, and sorting as per new to old to empower users to find specific content tailored to their date preferences.
Pagination: Used appropriate pagination scroll. Pagination was a good strategy as the user is searching for something specific within the list of results, not just browsing the content.
CATEGORY PAGE
ARTICLE PAGE
SEARCH PAGE
SUCCESS MEASUREMENT
Our redesign efforts were driven by 3 primary quantitative goals. Firstly, we aimed to boost clicks on our Call-to-Action (CTA) buttons like Signup, Donate etc, leading us to prioritize the creation of CTAs designed to attract more clicks and engagement. Secondly, we endeavored to enhance the user experience to encourage prolonged engagement and increased time spent on our website.
40%
Increase in user engagement
28%
Increase in average session duration
22%
Increase in conversions
LEARNINGS
Accessibility should be considered from the outset, beginning with research. Waiting until the design phase to address accessibility is too late.
Thorough data analysis is essential before starting a project, as it forms the foundation for many design decisions that follow.
Cross-functional coordination is crucial, not just during the final stages of design but early on as well. Collaborating with different departments helps align on their vision and mission. By maintaining open communication and using an iterative design approach, I was able to address technical constraints and reconcile conflicting stakeholder requirements.
While I aimed to minimize assumptions during the design process, some are inevitable. When necessary, assumptions should be clearly defined and communicated to ensure alignment.
NEXT STEPS
Following the successful product launch, we recognized the importance of ongoing website enhancements and improvements, particularly in terms of search functionality. Moreover, we identified a pressing need to further improve website accessibility. As a result, our immediate focus entails enhancing alt text for images to optimize screen reader performance and image/video loading. Additionally, we are in the process of designing new pages such as the author page and newsletter page to expand and enrich the user experience.