Brief
Project Type
Product Design
Internship
Team
2 Product Managers,
1 Designer Mentor,
6 Engineers
Duration
4 weeks
Time
Summer 2023
01 | CONTEXT
It was an exciting time to be working at Tezign. I worked in the product design team, optimizing the functions and interfaces of Portal. Collaborated with exceptional product managers, designers, and engineers enabled me to successfully complete numerous projects, includes translating user requirements into technical specifications.
Project Glossary
DAM ~ digital asset management platform that helps enterprises manage creative content resources and enable efficient team collaboration.
Portal ~ A module in DAM, where users can upload, categorize, manage and distribute content.
(What I design for)
02 | CHALLENGE
Situation
A large fashion company serves as a user of our DAM platform. There are dealer ordering meetings every quarter. The fashion company currently displays new product materials on the Portal to dealers, but these products are not yet available to consumers.
Problem
Limited functionality
The absence of watermark poses a potential risk of creative leakage and copyright concerns when Portal users intend to share content with outsiders.
User
Who will use the watermark feature?
Managers
Product Department Head
Omni-Channel Management Department Head
Employees:
Portal administrator
Portal editor
Portal viewer
Objective
Current and future content added to the portal will be watermarked
View content with a watermark
Download material from Portal is watermarked
03 | DESIGN CONSIDERATION
Design points
I summarized the points that needed to be designed based on user objectives, design system, and technical feasibility.
1
Open watermark settings
2
Display watermark on Portal
4
Downloaded content
3
Add new content to Portal
User Flow
User flow helped me to gain insights into the journey users undertake, including the entire process of utilizing the watermark function from initiation to completion.
Watermark type
The existing technology enabled the configuration of watermark templates, leading me to design two approaches: static copywriting and dynamic copywriting:
1. Static copywriting: This refers to fixed watermark text, such as "Avoid using"
2. Dynamic copywriting: This refers to the watermark text that changes according to the operator, such as "name + email address"
Static copywriting
Dynamic copywriting
Design system
Since it was an enterprise-level design, visual and functional consistency need to be emphasized. The design system accomplishes this very well, and my design used the system's existing components and styles to ensure that the user interface remained consistent even as the product evolves. At the same time, standardized design made it easier for me to communicate with engineers about technical feasibility, increased work efficiency, and avoided misunderstandings about the design.
04 | ITERATION
Before
After finishing the initial design, I encountered uncertainty about adding content to the Portal after opening the watermark settings. Given the current constraints in technical capabilities, certain file formats are incompatible with watermarking. Consequently, users must receive a notification when attempting to add such content to the Portal. Initially, my approach to addressing this involved placing a reminder message after files that cannot be added with watermarks in the content publishing settings interface of the Portal.
Feedback
Reminder message causes user confusion
When I presented this design to my design mentor for feedback, she posed several questions to me, "Is it possible to upload files to the Portal that are incompatible with watermarking?", "What categories of files are not eligible for watermarking?", "How should I manage existing files in the Portal that do not support watermarking?". She recommended that I reach out to the engineers to verify the optimal integration of the current technology with the design.
Communicating...
After
Alert in watermark setting
Files stored by users in the Portal may contain company-sensitive information and copyrights, making watermarks highly valuable. Following the discussion, we opted for a modal component to issue warnings, emphasizing the irreversible of certain operations and reminding users accordingly.
Use the tooltip to inform users which file formats support adding watermarks
Notify users when watermark is turned on
After the user turned on the watermark switch, a global tag prompt "Watermark opened" would appear on the board title. If the watermark was turned off, no tag would be displayed.
When uploading materials to the Portal, utilize modal component with filter to exclude unsupported files
Introduce a new category labeled "Not support Watermark" to the current material filter. Utilize technology to automatically filter out unsupported files, retaining those that can be added to the Portal.
05 | HAND OVER
Design passed
After a design review meeting with relevant stakeholders, everyone agreed that the design solution met user objectives and was technically feasible. Consequently, the project moved forward to the development stage.
Operation video
06 | RESULT
Successfully Released
Our team successfully designed and implemented the feature, delivering it to users as planned. The large fashion company, among the users, expressed high satisfaction with our watermark function in Portal, ensuring their dealers could place orders without encountering any copyright leakage concerns.
07 | FINAL THOUGHTS
Learnings
🔧 Proficient in using Figma: Prior to joining this internship, I utilized Figma for school projects but didn't fully exploit its advanced features, such as shortcut keys, auto layout, and calling library files. Engaging in work sessions with other product designers during the internship allowed me to acquire additional techniques, significantly improving the efficiency of my work. I believe it is essential to keep learning and picking up new tools or methods as a designer.
👥 Communication is key: At the beginning of my internship, I was dedicated to putting in long hours, but the results fell short of my expectations. Consequently, when I faced with challenges, seeking timely guidance and solutions became crucial. Communication shouldn't be sticked to designers; engaging with colleagues from various fields. Following effective communication, I implementing prompt adjustments. This approach significantly enhances work efficiency and minimizes the need for subsequent corrections and rework, reducing associated costs.
📅 Keep up with team: Regularly inform team members about the project's status, providing details on its current stage, challenges faced, and whether it is on track with the schedule. Stay responsive and attentive.
🧠 Think more: Understand the current interface and business logic, ensuring that the design addresses all functional usage scenarios. Given the enterprise-level nature of the design, consider development costs, as well as technical support capabilities, to identify the most optimal design solution.
Next steps
💡 More testing: Due to tight release deadline, this feature underwent limited testing. If I had extra time, I would conduct thorough testing and multiple feedback rounds, especially for specific use cases.
💁🏼 Find a balance between functional requirements and user experience: The existing design fits the requirements for the watermark function, but is it easy to locate and activate? Is it because the product has to satisfy business needs that it grows bulky and users find it difficult to use? What ways may the interface be improved? How can we boost the product's viscosity among users? In the future, I'll think about how to better blend user experience with business.
Available for freelance work