德古拉是 WordPress 的阴郁模式插件，这是一个免费的增值插件，点击链接https://wordpress.org/plugins 可以轻易的安装。该插件供应实时编辑，并且可以预览对网站前端所做的变动，同时许可用户将其配置为与网站相匹配。
我的角色：
作为德古拉阴郁模式 WordPress 插件的产品设计卖力人，我卖力以下部分：
进行用户研究，以确定痛点和用户需求。
根据竞争对手剖析理解市场代价。
创建线框和原型以测试设计观点。
领导视觉设计事情，创造一个视觉统一和用户友好的界面。
与开拓团队互助，确保插件的设计和功能符合用户的需求和公司的目标。
与营销团队分享有趣的营销理念，以独特且令人难忘的办法推广插件。
韶光线：
14周
1.用于UX/UI方案的工具：1）Tools Used for UX/UI Planning:Figma, FigJam, Miro & Google Docs
UX/UI项目方案工具
WordPress
WordPress 是一款利用 PHP 措辞和 MySQL 数据库开拓的个人博客系统，也是一款逐步蜕变成内容管理系统的软件。它可以在支持 PHP 和 MySQL 的做事器上建立自己的网站，也有许多第三方开拓的免费模板可供选择。
1.该项目的设计流程:1.The Design Process I followed:
我把精益用户体验和设计思维的方法论结合，创建了一个设计办理方案。该方案不仅用户友好、高效，而且能知足阴郁模式用户的核心需求。MVP（minumim virable product, 最小可行性产品）是针对精益用户体验快速开拓的，并运用设计思维过程来确保阴郁模式插件知足用户需求并有效办理问题。
精益用户体验与设计思维过程的结合
1)目标用户:1)Target audience:
Dracula Dark Mode 插件的目标受众包括 WordPress 网站所有者、网站设计师和 WordPress 开拓职员，他们希望通过供应阴郁模式选项来增强网站的用户体验。
此外，在他们的网站上启用阴郁模式选项只需点击几下，不须要任何编码知识。
2)用户故事:2)User Stories:通过网络许多与阴郁模式网站干系的用户故事，剖析表明：包括网站所有者、开拓职员和设计师在内的所有类型的用户都有兴趣在他们的网站上实现 Dark 模式。
用户故事
3)利用暗模式的主要性和好处.3)Importance and benefits of using dark mode in a website.在过去这几年，阴郁模式已经成为网页设计中的一种盛行趋势。
减少眼睛疲倦和疲倦（尤其是在光芒阴暗的环境中）。
增强有视觉障碍或对强光敏感的用户的利用体验。
为用户供应了一个可自定义的选项，用户可以根据自己的喜好或一天中的韶光在光亮和阴郁模式之间切换。
使网站设计看起来更加当代时尚。
4)用户画像4)User persona
用户画像1
用户画像2
5)良好用户体验的关键产品目标5)Key Product Goals for Better User Experience供应定制选项以适应各种设计偏好。
用户可以轻松安装并激活插件。
对付喜好深色界面的用户，提高可读性以减少眼睛疲倦。
通过优化阴郁模式功能，提高网站性能和速率，实现高效加载和操作。
为寻求提高用户参与度和留存率的网站所有者供应经济高效的办理方案。
6)竞品剖析6)Competitor features analysis通过进行对竞品的功能剖析，我可以确定我的竞争对手供应了什么以及他们缺少什么功能，来改进自己产品，更好地知足目标受众的需求。
点击 check the live comparison 查看实时比拟
7)通过感知舆图创造竞争对手的市场定位7)Discover Market Positioning for competitors by perceptual map.我利用感知舆图来剖析竞品和自身的市场定位。
SWOT Analysis8)用户流程（基于我不雅观察到的信息）8)User flow based on the information I was noted
用户流程是用户完成特界说务所采纳的一系列步骤——从最初的进入点到终极目标。
根据开拓团队的信息处理用户流程
2.发散和草图阶段2.Ideation and Sketching Phase
从草图开始已经成为我设计过程中不可或缺的一部分。在终极的用户界面之前，我总是考试测验利用一个粗略的草图。
粗略草图用于插件内部和实时编辑器小工具的高保真线框
插件屏幕内部线框
实时编辑器组件的线框图
为了验证设计决策并快速迭代设计思想，我从创建高保真模型开始，然后再转到终极的视觉效果。此外，我天生了一个线框流程图，以便与开拓团队有效地互换设计思想。
线框流程图
1)进入UI设计阶段1)Now time to move part of UI Design为什么我选择利用矢车菊蓝（#675ED5）作为品牌色？
视觉效果：矢车菊蓝是一种有活力的、吸引眼球的颜色，可以让用户更好的关注主要组件。
可信任的：这种颜色给人一种可靠的、可信任的安全感；对付商业和组织来说，该颜色通报可依赖性。
性别中立：该颜色男性气质和女性气质适中，适宜多样的用户群体。
情绪化：该颜色给人一种宁静的觉得。
可兼容的：该颜色从色相上和其他颜色都可以很好的搭配。
为什么我选择利用 Manrope 字体？
可读性：简洁，当代的风格，纵然在较小的字号下也可清晰阅读。
多样性：有多种字重和风格，与设计风格保持同等性。
整合性：该字体很随意马虎在wordpress和saas产品上利用，不同设备和平台都可兼容。
网页流畅度和设计自由度：该字体可优化网页的运行速率，同时有对应的标题，正文和按钮字体。
插件设置
https://www.figma.com/proto/OJ55bSDghb7X6u7JPsGrsK/Dark-Mode-WP-Plugin-(Case-study)?kind=&node-id=2863-34258&page-id=2863%3A34242&scaling=scale-down-width&starting-point-node-id=2863%3A34243
我为实时编辑组件设计了浅色和深色变体，适用于安装高等版本插件的前端版本。
设计系统和组件库
2)与营销团队分享社会推广理念2)Sharing Social promotional Ideas with the Marketing team作为一名产品设计师，我与营销团队互助创建了一个表情（meme），即如何在社交媒体上营销我们的插件的图像，它可以影响用户心智模型。
3)关键业务寻衅3)key business challenges确保能够为与功能干系的任何技能问题供应足够的支持和资源。
制订整合和优化的综合计策。
制订和履行有效的定价和货币化计策。
有效的营销和推广阴郁模式的特点去吸引目标受众。
4)成功道路上的寻衅4)Challenge to succeed为阴郁模式插件履行有效的定价和货币化策略，这须要全面理解目标受众及其付费意愿，以及市场趋势和竞品定价。同时，也须要理解如何优化该功能以得到最大性能和可用性。
5))成果展示5)Now time to show our product on the website这是我们的登录页以及其他页面，用户可以在这里Dracula Dark Mode: Revolutionary Dark Mode Plugin for WordPress理解我们的功能并采纳行动购买高等版本。
德古拉阴郁模式WordPress插件网站
ORG的屏幕截图
营销活动的电子邮件模板
6)社交横幅和营销资产6) Social Banner & Marketing asset这是成功的数字营销活动的主要组成部分。它们包括各种视觉元素，如图像、视频和图形，旨在吸引目标受众的把稳力并有效传达我们品牌的信息。
Youtube视频缩略图
3.发布和结果3.Launch and results德古拉阴郁模式在WordPress插件目录上的推出是一个巨大的成功。在推出后的短短几个月内，该插件就被超过 460 名用户下载，并得到了令人印象深刻的五星肯定。仅在 1.0.0 版本上，它就有 70 多个用户安装。
检讨WordPress目录中的插件
我们的目标始终是得到尽可能多的用户。然而更主要的是，增长并不总是在一夜之间发生的。随着韶光的推移，产品的下载量和用户会缓慢而稳定地增加。
截至2023年3月27日用户激活和评分的统计数据
我们很高兴看到我们的竞争对手购买了我们插件的高等版本，并留下了积极的五星评价，夸奖了用户体验。
您可以查看实时预览：
Yes it’s a Revolutionary - [Dracula Dark Mode - The Revolutionary Dark Mode Plugin For WordPress] Review | WordPress.org
4.未来改进4.Future Improvements提高与其他插件的兼容性：未来须要改进的一个领域是提高德古拉阴郁模式插件与其他WordPress插件的兼容性。这有助于增强用户体验，降落冲突并规避技能风险。
增强自定义选项：通过供应更多的自定义选项，用户可以根据自己的特定需求和偏好定制插件，从而增加代价和吸引力。
扩展平台支持：目前，德古拉阴郁模式插件仅适用于WordPress。未来将支持扩展到其他平台，有助于增加插件的覆盖范围并吸引更广泛的受众。
5.履历教训5.Lessons Learned在确定终极设计之前，始终要考虑市场代价和竞争，以确保其在市场上脱颖而出。
在没有进行彻底研究的情形下，千万不要认为完备理解用户的需求和痛点。
在向"大众发布之前对插件进行广泛测试，有助于尽早创造和解决潜在问题，改进用户体验，降落负面反馈的可能性。
有效的营销和推广对任何插件的成功都至关主要。
通过营销策略和利用一系列渠道和策略，开拓职员可以打仗到更广泛的受众。
认识一下我们才华横溢的团队，他们在这个项目上与我密切互助。
我们的团队由高技能职员组成，他们热衷于创造卓越的产品。每个成员都为项目带来了独特的上风和专业知识，从用户研究和设计到开拓和测试。我们相信协作方法，每个人的想法和反馈都会受到重视，并融入到终极产品中。
Israil Ahmed Prince ( Sr. Software Engineer )
Akash Ahmed ( Frontend Developer )
Ashikur Rahman -Me- ( Product Design lead )
Naziur Rahaman ( Digital Marketing Executive )
感谢您花韶光阅读我的案例研究。我希望你能创造它供应了信息，有助于深入理解我们的项目和我们用来开拓德古拉阴郁模式插件的过程。如果你有任何问题或见地，请随时联系我。我感谢你的关心和支持。
原文：https://medium.com/@ashikxql/ux-ui-case-study-dracula-dark-mode-plugin-for-wordpress-website-users-85f6d7838127
作者：Ashikur Rahman
添加小助手微信，备注「社群」，即可加入读者群。
