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.
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.
Using the plugin
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.
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.
Then I jumped straight 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.
Project: Embed Twine UX
Duration: 20 days
Team: Roman Luks (UX, dev)
Tools: Adobe XD, Visual Studio Code, Docker