Company
Locofy
time spent
8 hours
product Role
Product designer
platform
web
Scenario
Locofy is looking to improve the experience for our Auto-tagging feature. The problem in the current implementation is in the screen where we show the tag recommendations (Auto-tag-reco), the user doesn’t have full visibility or context of the layer they’re tagging. We are not showing the full picture of how the layers shows up in the design. Improving this will help the users in decision making.
Kishan tries to solve it as part of the Locofy designer interview hands on exercise.
Things to do:
Improve the design and experience of the our Auto-tagging feature
Create an email to announce to the users the new and improve Auto-tagging feature. You can refer to the email draft in this file
Please note that this exercise was done over a weekend and its not perfect. Do not recommend using the solution directly as the final designs have not been validated / tested with real users.
Problem alignment
I played around with the current Auto-tagging feature and identified the following detailed problems to solve:
Users need to select frames to auto tag. This is a new UI interaction for designers (whereas they are used to Figma canvas interactions)
While auto tagging an element, only a snippet of the element is shown in the auto tagging layout. Hence loosing rest of the context of the element.
After clicking ‘Accept auto tag’ for an element, user is required to choose a library manually. They are not aware of the qualities of or the result of choosing these libraries.
The AI should help in suggesting the best available library that can best build the element.
The approach to 1 and 2 above defines the core of the solution. Hence I focused on them first.
Solution direction
As a designer and engineer myself, I was able to put on a user's hat and identify 2 potentially better options for auto tagging feature.
Option 1: Canvas style
Auto tagging UX to follow the canvas style. The interaction that designers and engineers are most familiar with - while using any design tool. No more choosing frames to tag. The auto tag suggestions are dynamically shown based on the elements in the viewport.
Dot indicators gives a high level idea on auto tag suggestions available
The elements for auto tag becomes more prominent when zoomed closer
Click on a layer to choose from the auto tag suggestions straight from the view. This ensures maximum context to the user.
Option 2: Highlight the element on hover (on figma)
When user hovers on a suggested tag, the main canvas auto scrolls onto that element.
The right element is highlighted in the canvas of the design tool itself.
Pros and cons of option 2
(+) This is a lower effort solution when compared to option 1.
(-) When user hovers an element and the next element in short intervals, the canvas behind will be moving from one layer to the other rapidly.
(-) This option gives a small space for the user to see the context - behind the Locofy plugin UI only. Hence there would be instances where its a bit cramped.
decided to go with 'Option 1: Canvas style'
After discussion with the stakeholders, we decided to proceed with option 1.
Apart from the cons of Option 2 above, the following were the considerations to choose option 1:
Option 1 is the most familiar / natural flow for any designers. The learning curve is minimal.
Option 1 can be extended to 'manual tagging' feature too.
sketching
Now its time to further develop Option 1: Canvas Style to solve all the problems identified. The following are the considerations for the detailed solution:
[Primary] It should solve the identified problems of the existing auto-tagging flow.
User should be able to move from one tag to the next in a natural way.
User should be able to identify similar layers easily.
For advanced users, there should still be a way to see the layers list (not only the canvas)
I sat down and sketched out a few variations that solves the above.
Decided to go with ‘Idea 1 - Radar style’
Extensible easily to manual tagging flow as each layer can be manually selected from canvas too (in the future).
Familiar flow for designers and engineers when compared to the carousel view
The pointed arrows are more fun to use compared to a traditional carousel view
UIux
Incorporated the following improvements to the Auto-Tagging UI to solve the identified problems:
Canvas interface to visualise all layers.
Highlights (blue) on available Auto-Tag recommendations
Small indicators near the border of the canvas when a recommended element is out of view
Option to toggle "Not tagged" & "Tagged" in the canvas.
Layers list available on the sidebar for advanced users.
On click on the recommended layer:
Component library will be auto selected based on project settings. User can scroll up and change if they want to. (When we disallow multiple libraries for a project, we will disable that option too.)
Jump to next/previous recommendations seamlessly
'Done & Next' option available after tagging one layer to easily jump to the next.
User is taken to next component after clicking "Done & Next"
Auto tag recommendations while trying to tag from layers list too.
Similar layers flow (secondary goal)
Based on designers' and engineers' workflow, it will be extra seamless if there is an option where they can do tagging of similar elements at a time and then proceed to another group of elements. In order to achieve that in a simple way, I propose the "Highlight similar layers" flow
Note: the following UI is a step 1 towards the endstate. Pardon me, I did not craft the UI for the endstate at the moment (but you can find the wireframe below)
Highlight similar layers option available when a layer is selected and the layer has similar LocoAI identified layers in the design file
On click “Highlight similar layers” all similar layers will be selected.
Now using previous and next will navigate between the similar layers only.
We can see that the indicated number ‘(2) Not tagged’ ‘(1) Tagged’ has been updated dynamically too.
User can toggle off ‘[1] Tagged’ to hide all already tagged layers to focus on the pending similar layers only too.
Endstate suggestion for Similar layers flow
Tagging similar layers is a powerful feature with huge potential. It should evolve into capturing the following use cases:
User should be able to auto tag all similar layers as button (for eg.) in one click. The additional required information can be filled one after the other as a long form.
Component library in settings (Tertiary goal)
Allowing multiple libraries per project has turned out to be a problem – Causing a lot of issues in code generation and auto-tagging and the engineers don't like it too. Therefore we could take the following approach to solve that:
Thank you 🎉:
Thank you, Honey and Raymond, for providing me with this wonderful opportunity. I genuinely appreciate your prompt responses and the enjoyable conversation we shared.