In NormCRM there is a "Contacts" section. I added tags to it. And there is a "Recurring payments" section. I added categories to it. Essentially — the same thing.
Task: show new users pre-prepared example tags and categories so they can get oriented faster.
Constraints: two interface languages (more to come), and the unpredictability of which tags and categories different users will work with.
I started, of course, with design. Now I'll tell and show the process, share the result and the prompt with which Codex handled the task on the first try.
I still make prototypes in Axure, just like 15 years ago. The screenshot shows the first version of the add-category modals.
After designing, I coded it, tested it, deployed to production and filled it with real data in my account.
And it was precisely at the moment of adding the first tags and categories that I started thinking about what other users might need here.
The first idea: immediately provide a set of predefined tags and show it in the list. But that raised problems I didn't want to fight:
- We would have to handle two languages at once and all the logic that follows
- If a user changes the interface language after a week of use — will some tags be translated and others (the ones he already uses) remain in the original language?
- Some predefined tags and categories would be useless to a given user — and they'd have to delete them in a separate section (or keep seeing them every time)
So I quickly abandoned that idea and shifted attention to the new-tag creation window. The whole interface there is one field, plus save and cancel buttons.
The initial logic is this: if the user has no tags yet — when they try to add a new one they immediately see the new-tag creation modal (not a selector of existing tags).
So the simplest and most elegant solution turned out to be this: add a set of examples under the field where the tag name is entered. Designing took five minutes and this is what came out:
The logic is as follows:
- When adding the first tag or category the user sees this interface where they can look at examples and insert one into the field;
- If the user already has a tag — it will not be shown in the examples list;
- If the user already has all the example tags — the examples block is hidden entirely;
- Comparison with the user's tags is case-insensitive and requires full match;
- We compare the user's tags to the examples that are part of the interface (and therefore translated into the chosen language), so the language-version issue resolves itself.
After thinking it over and checking the prototype, I prepared a prompt for Codex:
Modal window for creating a new tag for a contact.
Under the text field for the tag name add a new block listing example tags that can be inserted into the field by clicking one of them.The block title should use a simple 16px font, as text: “Example tags. Click to insert into the field:”
There should be spacing after the title separating it from the list of example tags below.
List of example tags:
— Rendered in 16px font
— Separated by commas
— Each tag is rendered as a link, and commas between them are plain text
— Each example tag starts with a lowercase letter
— The list of examples is in a single line/paragraph; line breaks only occur naturally by container width (wrap)
— If the user already has a tag that matches an example (case-insensitive) — that example is not shown in the list
— If the user already uses all tags that match the examples — we do not display the examples block or its title at all
— If only 1 example remains after filtering — show it without extra punctuation (no leading/trailing comma).
— On clicking an example tag in the list — it is automatically inserted into the "Tag name" field (insertion replaces the field's current value)Show example tags in the language currently chosen in the user's interface. In other words, they should be wrapped in i18n variables.
Store example tags in the template as a list.
I also attached a screenshot from the prototype. From the implementation I confirmed that Codex didn't invent new styles but used existing ones — I moved the code to dev and tested everything there.
The final logic looks like this (these are screenshots from the live NormCRM interface):
And when switching to English all examples will appear because I filled everything in Russian and no matches are found during comparison:
That's the whole tiny case. Design, development, deploy and testing took exactly 50 minutes (I use a time tracker). I hope this little piece of my experience will be useful to someone.