SciQuel: Science News Media App

Designed a user-friendly app to enhance accessibility and engagement with scientific content for users.

Role

UX Design Lead, UI/UX Designer

Company

Harvard Innovation Labs

Duration

In Continuous Development

Project Overview

Problem

As science and technology increasingly shape daily life, understanding basic scientific concepts and current developments is crucial. However, traditional media often struggles to present complex information in an engaging and accessible way, contributing to low science literacy among the public.

Solution

An app that bridges the gap by offering a user-friendly platform to simplify and contextualize scientific content is desired. With curated, clear, and visually engaging material, it aims to enhance science literacy, helping users make informed decisions, engage in meaningful discussions, and develop a deeper appreciation for science.

Product

To prevent allergic reactions or irritation caused by a lack of understanding of chemical ingredients in cosmetics, I designed an innovative app named 'Read Skin.' This app provides users with easy-to-understand information about the chemical ingredients in each cosmetic and allows them to share their valuable experiences with the products.

Project Goals

  1. Enhance Science Literacy: Provide users with clear, accurate, and accessible scientific information to improve their understanding of basic concepts and current developments in science and technology.

  2. Facilitate Informed Decision-Making: Empower users to make well-informed decisions by offering curated and relevant scientific content that is easy to comprehend and apply to real-life situations.

  3. Foster Engagement and Discussion: Create a platform that encourages meaningful discussions and interactions about scientific topics, promoting a deeper appreciation for science and facilitating community engagement.

My Roles

  • Conducted User Research: Gathered insights through user interviews, A/B testing, and usability tests to validate design solutions and obtain user perspectives.

  • Created Wireframes and Prototypes: Designed and refined interactive prototypes to visualize and test design concepts.

  • Designed Information Architecture and User Flow Diagrams: Developed intuitive structures and workflows to enhance user navigation and experience.

  • Conducted Competitive Analyses: Assessed market trends and competitor offerings to identify opportunities and inform design strategies.

  • Analyzed Data and Reporting: Interpreted research data and presented findings to guide design improvements and strategic planning.

  • Collaborated with Cross-Functional Teams: Worked closely with project managers, developers, designers, and other stakeholders to integrate input and ensure cohesive project development.

  • Led Team Meetings: Facilitated weekly meetings to ensure alignment, review progress, and address any issues.


Project Overview

Problem

As science and technology increasingly shape daily life, understanding basic scientific concepts and current developments is crucial. However, traditional media often struggles to present complex information in an engaging and accessible way, contributing to low science literacy among the public.

Solution

An app that bridges the gap by offering a user-friendly platform to simplify and contextualize scientific content is desired. With curated, clear, and visually engaging material, it aims to enhance science literacy, helping users make informed decisions, engage in meaningful discussions, and develop a deeper appreciation for science.

Product

To prevent allergic reactions or irritation caused by a lack of understanding of chemical ingredients in cosmetics, I designed an innovative app named 'Read Skin.' This app provides users with easy-to-understand information about the chemical ingredients in each cosmetic and allows them to share their valuable experiences with the products.

Project Goals

  1. Enhance Science Literacy: Provide users with clear, accurate, and accessible scientific information to improve their understanding of basic concepts and current developments in science and technology.

  2. Facilitate Informed Decision-Making: Empower users to make well-informed decisions by offering curated and relevant scientific content that is easy to comprehend and apply to real-life situations.

  3. Foster Engagement and Discussion: Create a platform that encourages meaningful discussions and interactions about scientific topics, promoting a deeper appreciation for science and facilitating community engagement.

My Roles

  • Conducted User Research: Gathered insights through user interviews, A/B testing, and usability tests to validate design solutions and obtain user perspectives.

  • Created Wireframes and Prototypes: Designed and refined interactive prototypes to visualize and test design concepts.

  • Designed Information Architecture and User Flow Diagrams: Developed intuitive structures and workflows to enhance user navigation and experience.

  • Conducted Competitive Analyses: Assessed market trends and competitor offerings to identify opportunities and inform design strategies.

  • Analyzed Data and Reporting: Interpreted research data and presented findings to guide design improvements and strategic planning.

  • Collaborated with Cross-Functional Teams: Worked closely with project managers, developers, designers, and other stakeholders to integrate input and ensure cohesive project development.

  • Led Team Meetings: Facilitated weekly meetings to ensure alignment, review progress, and address any issues.


Project Details

Process


Stage 1. Empathize

Competitive Analysis: To identify key competitors in the science news media industry, assess their strengths and weaknesses, and uncover trends and best practices, we conducted a comprehensive competitive analysis.


User Research: We conducted user research to understand the key features and functionalities that users desired in science news media platforms.


Key Observations

  1. Design Elements: Users prefer a clean, modern design, with features such as dark mode and consistent design elements to enhance usability and visual appeal.

  2. Usability and Navigation: Simplified, intuitive navigation is essential, supported by advanced search, personalized dashboards, and well-organized layouts, with clear categorization and easy access to recent reads.

  3. Content Preferences: Visual and multimedia elements are valued for their ability to engage users and simplify complex topics.

  4. Engagement and Community: Interactive features like quizzes boost engagement and understanding, while options for commenting, discussion boards, and social media sharing foster a strong user community.


Stage 2. Define

User Personas: Our team created two user personas to focus design decisions on real user needs, align team understanding, and ensure the product is user-centered and relevant.


Journey Maps: We built user journey maps in the development of the science news media app to visually understand user interactions, identify pain points, and align team efforts. This ensured that the design was user-centered, optimized for engagement, and continuously improved based on real user needs.


Stage 3. Ideate

Design Ideas

  1. Clean & Modern Interface

    SciQuel utilizes a minimalist design with a clean, modern aesthetic to ensure content is the focal point.


  2. Dark Mode & Accessibility Options

    SciQuel offers a dark mode and adjustable font sizes to ensure the app is user-friendly for a diverse audience. Additionally, the app provides subtitle options for video and audio content to improve accessibility. Users can also watch videos on the full screen if needed.


  3. Customizable Content Feed

    SciQuel allows users to personalize their content feed based on their scientific interests and preferred topics.


  4. Engagement Features

    SciQuel encourages user interaction and engagement through features like quizzes and comment sections for discussion. Additionally, users can easily highlight the parts they like and share content on their social media.


  5. Multimedia Content Integration

    SciQuel offers users various ways to engage with content, including articles, videos, audio, and photos, to provide a richer learning experience.


Information Architecture: We created information architecture to organize content logically, enhance usability, and support user navigation, ensuring a seamless and efficient user experience.

User Flow Diagram: To visually represent how the user moves through the app and show what happens at each step along the way, we crafted a user flow diagram.


Stage 4. Prototype

Wireframes: To visualize the product's structure and functionality, I created sketches and digital wireframes. This approach enabled early identification of usability issues, efficient iteration, and clear communication among stakeholders.


Typography & Color Palette


Logo Design


Prototypes


Stage 5. Test

Usability Tests & Results: We conducted two rounds of usability tests to identify issues and validate design decisions, ensuring the product effectively meets user needs. Each round involved five participants. After the first round, we analyzed the usability issues, developed new design solutions, and refined the prototypes. With the updated prototypes, we proceeded with the second round of testing.


First Round

⚠️ Issue 1: If users want to find their previous comments on the article page, they must scroll continuously until they locate them due to the absence of a straightforward method for accessing past comments.

🛠️ Solution: Implement a filter that enables users to easily find their previous comments.


⚠️ Issue 2: Users seek the ability to search for content by the author's name.

🛠️ Solution: Add a filter that allows users to search for content by authors' names.


⚠️ Issue 3: Users were required to enter their first and last names to create their accounts. However, participants disliked this because of privacy concerns and a preference for creating a unique identity.

🛠️ Solution: Modify the design to allow users to enter usernames.


⚠️ Issue 4: The app sent notifications when someone reacted to or replied to users' comments or when new content related to their interests was found. These were delivered via email or push notifications, with users able to toggle them on or off in the settings. However, there was no option to manage all notifications at once, requiring users to configure them individually, which was inconvenient.

🛠️ Solution: Install switches to turn email and push notifications on or off simultaneously.


Second Round

⚠️ Issue 1: After applying filters to search results, users had to click the filter icon again to view the active filters, which was inconvenient.

🛠️ Solution: Revise the design to display the applied filters prominently, allowing users to easily see which filters are active.


⚠️ Issue 2: On the content pages, the author's bio appeared at the end of the content. Users desired a way to access other works by the author directly if they found them interesting. They could only view this information by scrolling down, which was not immediately accessible.

🛠️ Solution: Revise the design to display the applied filters prominently, allowing users to easily see which filters are active.


Updated Prototypes



Future Scope

Design Iteration

To ensure SciQuel effectively meets user needs and enhances the overall user experience, our team is dedicated to continuously testing and refining the design based on user feedback, actively incorporating insights to create a truly user-centered product.



Future Scope

Design Iteration

To ensure SciQuel effectively meets user needs and enhances the overall user experience, our team is dedicated to continuously testing and refining the design based on user feedback, actively incorporating insights to create a truly user-centered product.