Hello there, I'm Ting Yu,
a product designer who enjoys challenges
I am dedicated to simplifying complex problem and deliver a delightful user experience
DarkSirius
DarkSirius
My role
I participated in the product planning course offered by the China Productivity Center. During user interviews, I took turns with the PM to conduct interviews and record the findings. Afterward, we created a User Flow based on the interview results and analyzed the issues and pain points identified. We then proposed Design Solutions to address these pain points and executed AB Tests to confirm the effectiveness of the proposed solutions.
In terms of design style direction, we discussed it with decision-makers, considering different perspectives and non-design related backgrounds. We used mood boards to concretize the discussions, ensuring that colleagues from non-design backgrounds could clearly understand the design style.
In the early stages of design, I defined design guidelines, established components and systems, resulting in a more cohesive overall visual design.
Time
2020 11 - 2021 01
Team
PM x 2
Frontend
Design
Platform
Desktop web
Result
Participated in user interviews with the project team and utilized various tools such as Persona, User Flow, and Design Blueprint to familiarize colleagues with the complete UX process. During the design process, I proactively introduced tools like "AB testing" and "mood-board" to expedite communication and, at the same time, accumulate personal and team UI/UX experience. This approach helped us better understand user preferences and make data-driven design decisions. It also allowed us to iterate and improve our designs based on real user feedback, ultimately resulting in a more user-centric and effective product.
Project context
DarkSirius is a SIEM ( Security Information and Event Management. )
It analyzes network traffic and vast amounts of logs to detect malicious threats.
It is designed for monitoring the internet behavior between internal accounts, devices, and services within an enterprise, enabling the detection of abnormal activities both internally and externally.
The system supports most common log file formats and can output analysis results to various SIEM tools for data integration, presenting the information in a visualized format to enhance data readability.
Project Process
1 . Research - 2 months
-
Interviewees in total : 3
-
Prepare the interview outline.
-
Gather interview materials, and related equipment.
-
Interview recording and analysis.
2 . Design - 1 months
-
wireframe
-
mood-board
-
Mid-fi
-
Hi-fi
3 . Design delivery - 1 week
-
DarkSirius Hi-fi
Research
During the initial stages, designing the interface for the SIME was relatively challenging.
The early-stage research included:
-
Interviews to clarify stakeholders' requirements and needs.
-
User Journey Map to understand the user's experience and interactions with the software.
-
Setting up Personas to represent different user types and their characteristics.
-
Building a Service Blueprint to visualize the end-to-end service delivery process.
During the convergence phase, I was able to share my ideas and discuss them with the team. Regardless of whether the ideas were adopted or not, I received feedback and gained a deeper understanding of the product direction. This experience was quite different from my past experiences, as I realized that the most important thing was not whether the outcomes were right or wrong, but whether the overall direction was getting closer to the users through such discussions.
User Interview
In this interview, both the PM and I took turns as the interviewer and note-taker. We recorded all the conversations using a voice recorder and also took notes on important points with pen and paper. We also took photos of the interviewees and their working environments. The interviews were conducted at the interviewees' workplaces, and each interview lasted for 30-40 minutes to avoid fatigue for both parties. The interview process was based on the actual responses, and we were able to follow up with relevant details as needed.
Interviewees (Stakeholder Analysis)
1. Senior Monitoring Engineer, Mr. A
With over 10 years of experience in the field of cybersecurity, Mr. A has worked as a frontline and second-line monitoring specialist and currently serves as a research analyst. Through the interview with him, we expect to gain insights into the most direct user pain points and user experiences.
2.Cybersecurity Project Manager, Mr. B
Mr.B provides various cybersecurity services to small and medium-sized enterprises in Taiwan, accumulating relevant experience. Selecting it as the interview subject, the expectation is to gain in-depth insights into experiences related to product launches, convincing customers to install systems, and other related matters.
3 .Senior Project Manager, Ms. C
The interviewee is a cybersecurity product distributor who assists customers with product-related issues. The aim of the interview is to gain insights into common problems and pain points experienced by general users while using the products.
Interview Outline
-
Introduction:
-
Briefly explain the interviewee's background and work experience.
-
-
Job Responsibilities:
-
Understand the interviewee's current job role and responsibilities
-
5W1H：
What:
What specific features or aspects do you or your clients prioritize
when choosing a cybersecurity product?
Why:
Why do you or your clients feel the need to use
cybersecurity-related software?
When:
At what point do you or your clients typically
encounter difficulties or issues related to cybersecurity?
Where:
Where do you or your clients utilize cybersecurity monitoring software?
Who:
Who are the individuals you interact with, and what roles do they hold?
How:
How do you usually address problems or fulfill customer demands?
What is your typical approach to solving issues or fulfilling customer needs?
Key Take away
-
Complexity and High Learning Curve
-
The existing software is considered challenging to use due to its complex functionality and data management. Mr. A mentioned that training new monitoring personnel requires specialized education and training; otherwise, it would consume a lot of time and effort to navigate through the software effectively.
-
-
Customization of Information Content
-
Different clients have varying data preferences, requiring the dashboard to be customized accordingly. Ms. C noted that clients often struggle to determine their specific information needs, and using the standard templates can be difficult.
-
-
Information Overload
-
The system provides excessive information that many users do not require, resulting in a cluttered interface and language barriers that hinder smooth usability. Mr. B stated that most clients are primarily concerned with compliance with government regulations and often overlook detailed system information. Ms. C added that clients usually have limited knowledge of cybersecurity, making it challenging for them to understand technical issues and preferring quick resolutions.
-
Group Discussion on Interview Results
Interview Record
Research Method
Persona
1. Discussion with a basis to identify issues and propose more suitable solutions
2. Each team member contributes their expertise to integrate the identified pain points and consider user expectations and diverse needs.
3. As part of the discussion on functional tasks, as a designer, I aimed to make complex functions more intuitive and user-friendly, reducing the learning curve and enhancing overall usability.
User flow
1. Listing user problems and habits at each stage to determine product functionality and direction.
2. Designers possess a keen sensitivity towards pain points. Identified issues and engage in discussions with the team to explore the feasibility and visual aspects of proposed solutions.
3. Openly seeking advice and discussing with team members with relevant expertise
Service Blueprinting
1. Identify touch-points between user and interface. Consider how the product can assist customers from another perspective.
2. Interaction Simulation: Reflect on "service providers" that offer assistance at each step, clarifying the role of the product in this context.
3. Propose protential solutions and explain how the product resolves issues.
Wireframe & AB testing with prototype
In the monitoring system, "search" is an essential tool. Monitoring personnel rely on their experience and expertise to input specific requirements and search for the data they need to understand. During the wireframing phase, I observed that having the search bar in a sticky position all the time might not be necessary. I believe that presenting it differently could potentially enhance the browsing experience for alert data.
As a proactive approach, the supervisor suggested conducting an "AB Testing" to confirm the appropriate version and proceed with actual testing. Instead of having the search bar fixed on the screen, it could be positioned in a more contextual manner, appearing only when users need it or when they reach a certain section of the interface.
Design A
fixed on the screen
Pro
allowing users to view the monitored data continuously without disruption as they scroll through other elements on the interface.
Con
When the search bar is fixed and always visible, it may obstruct the viewing area, reducing the space available for monitoring data.
Design B
appearing only when users need it
Pro
The browsing screen becomes more spacious, allowing users to have a broader view of the information.
Con
User will have to learn to reopen the screen, which might be an additional step and potentially disrupt the seamless browsing experience.
Outcome and Decision
Solution B save more time
Based on the results of the AB Test, both test subjects consistently completed tasks an average of 4 seconds faster using Version B compared to Version A. This AB testing aims to provide a more user-friendly and efficient experience for monitoring personnel while interacting with the system :
-
Wider browsing space
By collapsing the search area, the right side of the interface now displays all field data, providing users with a more spacious browsing experience.
-
Clear search area
The search icon is prominently designed in a circular shape, implying that users can click on it to open the search bar.
-
Distinctive functional separation
When using the search functionality, the search area is highlighted, while other unnecessary information are covered by dim. This design choice simplifies the interface, emphasizing the primary actions and information required for efficient monitoring.
Design process
In addition to interface design, the overall product image, including logo design and branding guidelines, falls within my responsibility. I began by drawing wireframes based on the requirements and refined them to confirm the functionalities with the stakeholders. To present our ideas and concepts visually and enable quick understanding among different domain experts involved in the discussion, I used mood boards.
The key focus areas of this design project are as follows:
1. Using mood boards to concretize the discussion content, making it clear and understandable for colleagues without a design background to grasp the style and vision.
2. Departing from the conventional cybersecurity system style, we emphasize a user-friendly interface, concise information presentation, and unique brand characteristics.
3. Defining design guidelines to establish components and systems, ensuring a more unified overall interface.
For this stage, the company has assigned a UI design intern to assist, providing me with an opportunity to collaborate with someone who shares a similar background and expertise.
01
Ｗireframe
Paper and pencil allow for direct modifications, enabling quick discussions with the supervisor about the functionalities and the intended placement.
02
Low-fidelity
At this stage, we use Sketch to create Low-fidelity interface, which will serve for final confirmation purposes.
03
Mood Board
By using a moodboard, we can visually present our ideas and concepts, avoiding potential misunderstandings caused by differences in perspectives and ensuring effective communication.
04
High-fidelity
By aligning with the previously agreed-upon moodboard, we can establish a cohesive and unified visual identity for the project.
Solution
Through user interview and research, we have identified the primary functionalities, services, and solutions needed, and understood that the most significant pain point for users is the requirement for a highly flexible interface design.
In response, we propose a "Flexible Adjustment" presentation approach where users can customize the size and layout of the dashboard content according to their specific needs. This solution addresses the demand for customization and allows users to tailor the dashboard to their preferences, enhancing their overall experience and satisfaction with the product.
Product Features
-
Flexible Dashboard Customization:
The system allows users to tailor the dashboard layout according to their preferences, enabling them to arrange and resize widgets, charts, and data elements based on their specific needs. Ensures a highly customizable interface for a more personalized monitoring experience.
-
Dashboard Concept with User Customization
By providing users with the flexibility to customize the dashboard layout, they can prioritize and access the most relevant data quickly, streamlining their monitoring tasks and decision-making processes.
1x1
1x2
2x2
Design Guideline
Integrating the product's text, colors, and basic elements during the design process not only accelerates design speed but also ensures consistency in the platform's style. By maintaining the same set of visual language and logic, we can reduce cognitive burden for users.
This approach not only benefits the users but also promotes brand recognition of the product and company.
Final Design
Dashboard / Mainpage
Dashboard / Alert selected
Dashboard / Chart selected
Alert / information
Alert / List view
Alert / Search
Design impact
Introduce AB testing
It's been a great pleasure for me to be part of the DarkSirius project for almost half a year now, starting from the research phase. This experience has allowed me to gain a deeper understanding of the entire product design process.
During the process, I carefully observed and identified potential areas for improvement. Taking the initiative, I proposed the AB testing method and received approval from our team. I then proceeded to create the test content and integrate it into the interface. I am grateful for the trust and time given by my colleagues. Their support has enabled me to validate my ideas and hypotheses effectively.
Through this experience, the entire team has gained insights into the AB testing process, which will undoubtedly be a valuable tool in designing future products and features.
An effective mood board
Engaging in discussions with different departments and decision-makers to understand their requirements and objectives is crucial. Describing visual styles using words alone can often lead to misinterpretations and difficulties in achieving a shared understanding among colleagues and stakeholders with diverse professional backgrounds
To address this challenge, I provided a concrete and visual reference for all involved parties to refer to during discussions. By seeing actual colors, fonts, imagery, and layout examples, it becomes much easier for everyone to get on the same page and align their expectations. This approach ensures that the design is not solely decided by the designer but also aligns with the team's vision and objectives.