This case study doesn’t match my standards anymore and its pending revision or removal.
Embed Twine is a WordPress plugin I made that makes it easy to add Twine stories on WordPress pages and posts without having to insert the code manually.
Recently, I finished The Psychology of UI Design and Website UX Reviews: First Impressions with Paul Boag. When I watched it I was on a look out for inspiration what I could do to improve my existing projects. And I did find a couple.
Table of Contents
In a case of Embed Twine I decided to make it crystal clear to users how to use the plugin and where in the process they currently find themselves. Plus, I’d make it a little bit easier to use.
Here is the old version and new side by side:
No way perfect, the new version makes it clear what steps user needs to take and what to do at each one.
Before and after
This is how the page looked after uploading the file:
Technical details about the upload make it harder for users to spot the right notification with a shortcode (3rd one from the top), manually select the right part of the text and copy it.
Now it’s done with a single click of Copy to clipboard button:
Simple and easy. Furthermore, the technical details are shown in non-obstructive way.
Design
I started with an ugly sketch on a piece of paper. The sketch captured the steps users need to take and a rough UI to go along with it.
Then I used Adobe XD to mock the plugin page:
I’ve inspected the actual WordPress site to make sure I’d use the same font in Adobe XD.
Implementation
When I was happy with the design, I jumped into development where I struggled for a bit with ajax & jquery (in WordPress scripts need to enqueued correctly, otherwise it doesn’t work).
After few days I had a working plugin without any styling. Last step was to sprinkle some CSS on top.
Response
⭐⭐⭐⭐⭐
“Seamlessly integrates your Twine adventures into WordPress, allowing you to easily publish your adventures without the hassle of starting a website from scratch.”
https://wordpress.org/support/topic/very-good-plugin-1774/
In total, the plugin has received 3 positive reviews (as of Aug 2023).
From time to time, I receive emails from people expressing their gratitude, asking questions, or offering suggestions for Embed Twine. It feels nice 🙂
You can find Embed Twine plugin in WordPress plugin directory:
Project: Embed Twine UX
Date: 2022
Duration: 20 days
Team: Roman Luks (UX, dev)
Consultation: Gabriela
Tools: Adobe XD, Visual Studio Code, Docker