Context-based formatting panel design
Roles
UX researcher
UX designer
Timeline
2 weeks ( expected )
Ideate
Prototype
Test
Introduction
I was the only UX designer working on a project with a software development team, that was creating an AI-powered extension for Adobe InDesign.
The extension was designed to help format large amounts of text more quickly, making it easier to follow the editorial guidelines needed for publication.
​
I would like to preface by saying, that the team decided to hire a UX designer after the development was underway. They encountered a few problems with the interface and that's where I came in. This was a challenge for me because I needed to take into consideration the design decisions they had already made, and redirect them instead of create a new path from scratch which is what I was most used to.
​​
I was given a free hand when it came to the design ( besides the fact that they had mapped out some of the path already ). I decided to work in a lean UX style for this project. I did this because the team I was working with was not very experienced with front end coding or design. Therefore, user flows or lo-fi wireframing would not communicate my ideas as clearly as a functioning prototype. This way, I could also continue the design process that had already begun unknowingly by the team. They designed, failed and now I could come in and test what went wrong and continue from there.
​
Before I started testing, I wanted to validate the problem that the team had presented me with, and ensure the proposed solution from the development team was in line with the user's needs, because no targeted research had been carried out prior to my involvement in the project.
I would like to preface by saying, that the team decided to hire a UX designer after the development was underway. They encountered a few problems with the interface and that's where I came in. This was a challenge for me because I needed to take into consideration the design decisions they had already made, and redirect them instead of create a new path from scratch which is what I was most used to.
​​
Proposed problem ( by the team ):
The current adobe indesign program is not accustomed to the unique editorial guidelines the editing team was using to format the text. ​
Proposed solution: ​
​An LLM-based extension for Adobe inDesign, that would allow speedy formatting of large bodies of text with different editorial input options. ​
​​​​​
My thoughts: ​
Seems like a pretty straightforward and easily-detectable problem that they have experience with ( it's probably correct )
​​
The problem is not very detailed and does not include the exact pain points of the user. I need to understand the user's process better. What do they really need and why? And what parts do they currently enjoy and would like to keep the same?
When I joined the project, this was the interface design created by the back end developers:
​​​​​​​My thoughts: ​​​​
​
- Very high cognitive load (there's so much to take in)
​
- Not that hierarchal, making it confusing and daunting to begin using the program
​
- Could be used by experienced user, not a new user
​
- Button is streamlined with non-buttons ( CTA is not even detectable at first glance )
- The selection of formatting option should be legible even after it's been selected ( could span the entire width)
​
- The apply button is confusing because it could mislead the user to click it with every suggested correction ( only intended to be clicked in the end )
- UI elements need changing ( It's just ugly )
​
- Too many buttons piled on the bottom ( and that's not even all of them )
I decided not to conduct user testing at this stage because there were already many issues I could identify based on my own understanding of the user experience. I wanted to address those first before bringing in external feedback. So, I audited the information architecture and redesigned the interface to display a sequence of screens, organizing the content in a clearer, more digestible way. The new esign outlines a path for the user to follow.
​
Here's the new design prototype:
​
​Screen 1:
- clear instruction ( the theme of the design b/c there are so many steps involved )
​
- I aligned it to the top so that the following screens with more information can easily fit the contents of the screen without having the user's point of initial familiarization with the screen change with each one.
​
- I made it purple because it's a friendlier more calming colour and we're going to need that subconscious aid because this is a complex process
To be continued
I'm still working on this project. Thanks for reading so far, and stay tuned for more!