Daily Emerald
(Web Developer)
Overview
At the Daily Emerald, I was tasked with improving the user experience on the website by creating a more intuitive and engaging navigation system. The primary goal was to emphasize the site’s five key sections—Sports, Arts & Culture, Opinions, News, and Multimedia—by incorporating interactive hovering icons. This project was integrated into the existing CMS, Town News BLOX, ensuring that the solution was seamlessly embedded within the platform.
Role
UI/UX Designer, Front-End Developer
Collaborator
Rikiya Klasen (Illustrator/Digital Editor)
Tools
Adobe Illustrator, Town News BLOX CMS, VSCode, Google Chrome Inspect Functionality, Slack
Languages
JavaScript, HTML, CSS
Timeline
June 2022
Challenge
The Daily Emerald’s website was well-established, but it lacked a visually distinct way to guide users to its five key sections: Sports, Arts & Culture, Opinions, News, and Multimedia. These sections, while filled with rich content, weren’t getting the engagement they deserved due to a lack of emphasis in the site’s design. The challenge was to enhance the user experience by making these sections more prominent without overhauling the existing site structure. Additionally, the solution needed to be implemented within the constraints of the Town News BLOX CMS, which had its own limitations in terms of customization.
Solution
To address this challenge, my team and I proposed introducing hovering icons that would draw attention to the key sections of the website. These icons would serve as visual anchors, making it easier for users to identify and navigate to their areas of interest. The solution involved a collaborative effort to create custom illustrations for each section, followed by the development of a smooth, responsive hover effect that could be seamlessly integrated into the existing CMS. This approach allowed us to enhance the user experience by adding a layer of interactivity and visual appeal, all while working within the constraints of the current site infrastructure.
Preliminary Findings
Target Audience
The target audience for the Daily Emerald primarily consists of University of Oregon students aged 18-24. These students, who are mainly undergraduates, rely on the website for timely campus news, sports updates, cultural events, and opinions. They are digitally savvy, consuming content through mobile devices and social media, and they value engaging, reliable information that connects them to the university community. The website serves as a crucial platform for staying informed and involved in campus life, making user-friendly navigation and visually appealing design essential to meet their needs.
User Personas
Inquisitive Issac (20, Male)
Background: Issac is a journalism major at the University of Oregon with aspirations to become an investigative journalist. He regularly consumes news and is particularly interested in campus events, sports, and political opinions. He’s an active member of several student organizations and often contributes to discussions on social media.
Goals: Issac aims to stay informed about campus news and events while accessing well-researched articles and in-depth investigative reports. He is keen on engaging with content that offers diverse perspectives on current issues and is always on the lookout for opportunities for internships and networking within the journalism field.
Frustrations: Issac finds it challenging to quickly locate the most relevant articles on the site, and he dislikes cluttered websites with poor navigation. Additionally, he feels frustrated when content lacks depth or credibility, which diminishes his trust in the source.
Motivations: His passion for journalism drives him to seek out high-quality, independent reporting. Alex is motivated by a desire to stay informed and engaged in campus life, and he values platforms that provide balanced views on important issues.
Cultural Christina (21, Female)
Background: Christina is a senior at the University of Oregon majoring in Business Administration. She’s active in several student organizations, including the Women in Business Club. Mia enjoys staying updated on campus events, especially those related to arts and culture. She often attends events like theater productions, art exhibitions, and guest lectures.
Goals: Christina's primary goal is to keep up with arts and culture events on campus while also finding articles and reviews relevant to her interests in business and entrepreneurship. She is committed to staying informed about campus news and activities that affect student life and is always eager to discover new opportunities to attend or participate in campus events.
Frustrations: Christina gets frustrated when arts and culture events are not prominently featured or are difficult to find on the website. She dislikes when websites are not intuitive or user-friendly, and she finds sensational or poorly written articles particularly annoying.
Motivations: Christina is deeply passionate about arts and culture and enjoys being involved in the campus community. She values well-organized, easy-to-navigate content and is motivated by a desire to stay connected with campus life and engage in discussions about business and entrepreneurship.
Design Process
Ideation & Brainstorming
Given the established nature of the Daily Emerald’s website, the initial brainstorming session focused on identifying ways to enhance user engagement without altering the core structure. We considered various approaches to draw attention to the site’s most crucial sections. The solution needed to be both visually appealing and functional, allowing users to quickly navigate to their areas of interest.
After considering various design enhancements such as scroll-triggered animation, custom cursors, floating action buttons, and interactive navigation, we ultimately decided to implement the hovering effect icons. This decision was driven by our primary focus on visually differentiating the five key sections—Sports, Arts & Culture, Opinions, News, and Multimedia—while ensuring ease of navigation. The hovering effect not only drew attention to these crucial areas but also aligned with the need to maintain the existing site structure. Additionally, we sought to create a solution that could be seamlessly integrated into the Town News BLOX CMS, ensuring compatibility and ease of implementation. This strategic approach allowed us to enhance the user experience without compromising the site's established design and functionality.
Sitemap
Understanding the layout and navigation of the website was crucial for this project. The sitemap below outlines the Daily Emerald's website structure, highlighting the key sections that I aimed to enhance through the introduction of hovering icons. This visual representation provided clarity and ensured that the implemented changes were both strategic and impactful.
User Flow Diagram
This diagram effectively captures the intuitive and streamlined user experience specifically tailored for the Daily Emerald website. It illustrates how users can effortlessly navigate through the site, beginning from the landing page and seamlessly accessing the highlighted content sections, such as Sports, Arts & Culture, Opinions, News, and Multimedia. The design ensures that users can easily discover and engage with articles that interest them through clear and purposeful interactions, enhancing overall user engagement and aligning with the Daily Emerald's mission of providing relevant, student-produced journalism to its audience.
Style Guide/UI Kit
In the process of designing the hovering icons for the Daily Emerald website, we developed a style guide that served as a vital reference. This guide was crafted to ensure that the icons were consistent with the website's overall visual identity. It outlined key design elements such as color schemes, typography, iconography, and spacing, which were all essential in creating icons that were both visually cohesive and functional. By adhering to this style guide, we were able to create hovering icons that not only enhanced user engagement but also maintained the distinctive look and feel of the Daily Emerald, ensuring a seamless user experience across the site.
Design & Illustration
Once the concept of using hovering icons was finalized, I collaborated with a coworker to develop illustrations that represented each of the five sections: Sports, Arts & Culture, Opinions, News, and Multimedia. The icons needed to be distinct yet cohesive, aligning with the Daily Emerald’s brand identity. We explored various image styles, settling on a design that was both modern and reflective of the content in each section.
Implementation & Development
With the icons ready, I transitioned to the development phase. My focus was on creating a smooth, responsive hover effect that would draw users' attention using the images we created to implement the hovering effect. Without overwhelming the users, the hovering icons was designed to subtly animate the icons, making them appear interactive and inviting.
Testing & Iteration
Before the final deployment of the hovering icons, we thoroughly tested the code using Google Chrome's inspect functionality to ensure compatibility with the Town News BLOX CMS. This allowed us to preview how the code would perform within the CMS environment and identify any potential issues. During this process, we encountered a challenge where BLOX wouldn’t accept our finalized icons due to incompatibility with their system's criteria. To resolve this, we submitted a support ticket to the BLOX team and had to alter the icons' design and code to meet their specific requirements. These adjustments ensured that the icons not only functioned smoothly but also adhered to BLOX's guidelines, allowing for seamless integration. After these modifications, we continued to test across various devices and screen sizes, making additional tweaks to improve the speed and responsiveness of the hover effect, ensuring a consistent user experience across all platforms.
Emphasis on the challenge encountered during the transition from prototyping to testing stage
Results
In the weeks following the implementation of the new hovering icons, user engagement on the Daily Emerald website saw a significant increase. By tracking click events through Google Analytics, we discovered that user engagement went up by 45%. The hover effects successfully guided users to the highlighted sections, where they interacted with the designated articles more frequently. This increase in engagement validated the design choices and confirmed the positive impact of the new user experience enhancements.
Takeaways
This project demonstrated the significant impact that even subtle design changes can have on user experience. By focusing on visual differentiation and interaction through the introduction of hovering icons, I was able to enhance navigation and increase user engagement by 35%. This experience was particularly fulfilling as it marked my first major impact on a live website, validating the effectiveness of our design choices.
The success of the project underscored the importance of collaboration and iteration. Working closely with my coworker to create the illustrations and integrating feedback throughout the process were crucial to achieving a design that met the needs of the Daily Emerald’s audience.
Looking ahead, I am eager to delve deeper into UX research and more user-centered projects. This experience has reinforced my belief in the value of understanding user needs and preferences, and I am excited to explore how research can further drive impactful design solutions in future endeavors.