Research & Current Task Flow Analysis

Our group began the research by understanding the current task and data structure. This step helped the team establish a basic understanding of the complex platform functionality and the main tasks completed on Zeno, which set up a solid foundation for future design.

Who is the Zeno user?

First of all, we created user persona that outlines the main characteristics of Zeno users. This finding has been guilding us throughout the design decisions.

What is the user goal & user pathway of "Tag feature" ?

The tag feature already exists on Zeno. However, based on user interviews, we discovered that users do not easily find this feature, but they do find it helpful once they understand its purpose, which is to group instances and share results efficiently. Initially, I conducted an analysis of user goals and pathways to understand the current user flow context. Importantly, users are highly likely to use tags in conjunction with the slices feature. Therefore, it is crucial to examine how these two features interact in various scenarios.

Site Audit & Market Research

The addition of slices to the filters has resulted in both slices and tags appearing together, leading to confusion regarding which instances are being filtered. Additionally, other issues arise, such as the creating new tag button being located far away from the instances when one is selected. Users who are unfamiliar with the interface may struggle to discover this feature easily, leading to low adoption.

I observe how Linkedin and Google Drive organize the posts,  folders and files,  the “ Save” and “add to starred” feature which allow users to save post to the personal collection.

Wireframing the tag creation solutions

Digital protoyping and user testing

• Selecting a slice.
• Upon tag creation, the new tag will appear at the top of the screen, and also being highlighted in the left-hand side control panel.
• Choosing instances under the slice and creating a new tag.

Designing the interface to establish clear hierachy

I looked into the design pattern on Webflow website and learned the UX pattern.

Design Comparison

Color guideline

I also outlined the color guideline for the Zeno hub to ensure the consistency in branding and design across various pages. It defines the specific colors to be used in different contexts.

Audit & Market Research

‍I briefly audited the current design to point out opportunities for improvement and looked into other platforms like Observable and Figma Community to understand design patterns in home screens.

Wireframing Zeno Hub layout

Initial sketches explored the layout of ‘My Hub’ and ‘Discover’, and the card UI for projects and reports. We decided with putting reports and projects under filter to minimize the information overload.

Card design

The new card design establishes consistency across the cards, making the titles, descriptions, and icons hierarchical to clearly indicate the Call to Action (CTA), such as the heart icon. Additionally, it effectively utilizes icons to highlight important information.

High-fi mockup

Gathering requirements from both the development team (Dev) and the project manager (PM) before jumping into design.

Several issues and missing pieces of information have been identified on the current site. This includes the absence of details about Zeno, its capabilities, how to initiate using Zeno, as well as addressing other privacy concerns such as data privacy, accessing technical support, and understanding the team behind Zeno.

Additionally, I clarified a few questions, including identifying the target audience—whether they have a technical or non-technical background—and determining the primary purpose of the site. I also defined the main takeaways users should receive. As a result, I pinpointed the primary focus of the redesign: enhancing the site's credibility, introducing key features to technical users, and driving traffic to the Zenohub platform.

Brainstrom design ideas for product features display

I looked into Webflow website to ‍ to understand design patterns in home screens and found three design patterns that are normally being used to display product features. I came up with three designs and presented to PM.

Wireframing the website design based on user feedback

Developing wireframes for the website redesign incorporating insights gathered from the needs discovery process. Here are the key considerations for the redesign:

• Prominent placement of Zenohub link or integration throughout the site to drive traffic.
• Add contact information to footer with clear hierachy for support inquiries.
  
• Detailed breakdown of Zeno's features, targeting technical users.
• Add case studies as social proof and link to the relevant project or report to increase projects exposure.

Implemented Site:
‍https://zenoml.com/

NEXT STEP
‍
Considering the diverse use cases of tags and how they interact with other critical features.

I used paper to experiment with various scenarios for slices and tags, aiding in the visualization of how instances might be categorized under slices, tags, or both. Moving further, I want to create user flow for diverse user paths and consider edge cases.

Collaborating with an engineering team necessitates that designers not only focus on designing but also effectively communicate the rationale behind their designs. Don't be upset when faced with questions or pushbacks!!

When designing a small feature, it's crucial to approach it systematically, considering various use cases and especially edge cases.

Discovering suitable techniques for iterating ideas may involve processes like whiteboarding or sketching on a piece of paper...