Overall UX/UI improvements

[rorar]

Hey,
I'm really in love with your application, it suits my needs and therefore I'd love to contribute/propose ideas to make it even better :)

From my user experience, there is room for improvements regarding

• user storys and flows,
• cleverly placed UI elements and
• processes serving the user.

My main finding is that currently cv-manager relies on active discovery and/or doc usage instead of the users intuition.

I'd love to discuss it with you and the community as it may involves/implies deep changes to the look an feel of cv-manager. :)

Background: Currently the most actions are happening from the upper menu:

Let's dive in from left to right:
1. "CV Manager" Text
Problem:
The user knows that this is the CV Manager Application from the look and feel.

Proposed Solution:
The text could be omitted or replaced with a small logo for recognition (e.g. switching browser tabs) and free up space for future features.

2. "Add CV Language" settings are hidden behind CV Manager
Problem 1:
If a first time user tries to add a CV language, he need to know even know that the feature even exists as the language selection won't appear on first run:

Problem 2:
If a first time user tries to add a CV language and if he heard from it, where to find the feature.

Problem 3:
Entry point is that a translation exists; If a user wants to translate the CV from one into another language, the users has to repeatedly click on the dropdown-menu to change the CV language forth and back.

A dropdown would make sense with like 7+ languages. But often the native language plus english is required.

Proposed solution:
Instead of hiding this awesome feature behind a modal, I'd suggest adding language tabs with country flags/names, equal to browser tabs, including a fused globe-with-plus-sign Icon like
to add CV languages.
Tabs reducing clicks from 3 clicks, including visually looking up for the desired CV language, to just one click.

3. Themes are set globally instead of individually
Problem: A user wants to match the Corporate Design / color of a company, e.g. working for Mattel and applying as Barbie Product Manager = Pink color coding. The user also wants to apply at Disney/Marvel as Product Manager for kids toys, so Marvel = Red. As the users switched from Mattel (pink) to Marvel (red) and set the color to red and switched back to Mattel, the color coding is still red instead of pink. => Color Coding is set global instead of per Slug/CV.
Solution: Allow users to use colors by Slug/CV.

⬇️ ⬇️

Other findings in indirect connection:
Profile Picture is set globally instead of per CV/Slug. Needs an option to set it globally as well.
Example:

• I'd like to apply for a startup = relaxed dresscode 👗
• But I'm also open for work at a bank = strict penguin dresscode 🐧

Also, if I've got a set of let's say 4 profile pictures I'd like to repeatedly choose from, they should be stored and easily choose-able from a modal/dialog...
... instead of re uploading it/overwriting picturs every time.
(=> File Upload to an Media Manager. the Picture Grid Custom Section could also benefit from this.)

4. Settings: Editing Section Names + Reordering should be doable on the "front"end not at settings level
Problem 1 (Happend to me as first time user):
A new user wants to edit a section name. The user (double) clicks on the section name to edit it and nothing happens.
--> Currently all editing happens on the item-card level inside the Main Container level, except the headlines.

Problem 2:
A user wants to change the order of sections. Inside the Main Container, the user tries to drag-n-drop a section above another but nothing happens/just text get selected.

Proposed solutions:
a) One domain is editing the CV, another domain is to change settings for the application itself. The boundary should be resolved.
b) Allow users to edit Section Names on Main Container level
c) Add handle bars near Section Names on Main Conainer level and allow users to use them.

(FYI: it's getting late and I need some sleep+rest, I'll continue with Custom Sections tomorrow.)

[vincentmakes]

Thank you for taking the time to propose those ideas, this is much appreciated and good to have a fresh pair of eyes.
I will definitively consider them to make the UI more intuitive and reduce the friction points.

[vincentmakes]

I've put some thought into it and here's some of the UI/UX changes in the latest version :

Profile picture is also now handled at dataset level with the option to have it globally. The theme selection improvement is something remaining

[rorar]

Hey @vincentmakes !
Sorry for being absent... you know, life is just "happening" :)
I really appreciate the improved UI and UX. Looking good so far! 💯

Regarding adding a custom section:
Instead of mouse hover actions I suggest to use a touchscreen friendly option, like this one

For dragging sections:
Problem 1:
If a user starts a dragging a section action using section-reorder-handle, currently reorder-pill can be out of bound of reorder-list. This can mess up order on larger screen.

Proposed Solution:
Therefore I suggest you to use a snap-in feature for a dragged reorder-pill on the y-axis, not allowing any reorder-pill outside the reorder-list.

Problem 2:
Using section-reorder-handle with touchscreens, the right click context menu appears because of a long-touch gesture..

Proposed Solution:
While dragging, disable the context menu. Reference: https://www.w3schools.com/jsref/event_oncontextmenu.asp

And for UX/UI I'd like to "throw an alternative solution in the ring" 🥊 :
https://github.com/MorphyKutay/ATSResume (demo: https://ats-resume-eight.vercel.app/ ) handles the sections and section actions in a side panel.
Which is nice, because

• no long scrolling to a section is needed,
• every section is on first sight
• actions like visibility can be done quickly
• editing the section name is accessible

(also I like the minimal CV design, no sidelong Section; everything is on first sight - ready for a quick review)

BUT - What's missing in the example:

• Mobile compatibility (like collapsing to an hamburger menu),
• print visibility,
• reordering sections,
• add (custom) sections,...

(In terms of flexibility, I would keep sticking to modals, as currently used for editing, instead of editing content in the left pane.)

UX: Apply * to all datasets
Problem:
Currently this is set to on by default and may lead users to overwrite CV settings by mistake.

Solution:
"Apply to all datasets" (for sections and profile picture) should be an active user decision and therefore turned off by default. 🙂

Delete Profile Picture: Modal instead of js prompt to avoid deletion trap
Problem:
Deleting multiple profile images resolutes in a prompt where the user can permanently dismiss prompt notifications from cv-manager. This can trap the user not being able deleting any more profile pictures without touching the browsers/site settings.
Solution:
Add a delete->confirm modal with an option to "Don't ask again" (e.g. for the current session).

Icons: The mother of all UX/UI improvements
I'd suggest you to use icons whereas possible.
For example:

• activeDatasetPublicBadge "🌐 Public" if the CV is published
• a greyed and crossed out globe version for non-public
• dataset-make-public-btn with an globe+up-arrow (symbol for "push")
  --> Alternatives: Globe+Checkmark, Globe+cross

Icons can be used as an ubiquitous language (e.g. globe as base) with variations to differentiate the means (e.g. publish, public, non-public).

---

Let's continue where I left off last time. 🙂

Import/Export
Current behavior: Import/Export buttons triggers a the OS file dialog/download
Problem 1:
A user uses an LLM to parse its current CV and export it as JSON. The LLM offers the CV as inline block, not as download. The user needs to touch/create a file first before importing it to cv-manager.
Problem 2:
A user wants to quickly edit/change a section using an LLM. cv-manager just triggers a download for a JSON file
Problem 3:
After a bit of forth and back, the download folder piles up with cv-data-en(1).json, cv-data-en(2).json, cv-data-en(3).json,... Out of confusion the user imports the wrong JSON file.

Propose Solution:
Unify Import and Export:
Add a modal and to following features:

• Add a text input field for file naming conventions <date> <time> <filename> <version> <language> foo (with options to set it globally/for this CV set only)
• Add a text input field + JSON validation/linting to quickly copy and paste in JSON data
• Add buttons with icons and descriptions
  • Download
  • Upload*
  • Overwrite current CV*
  • Create new CV
    * --> Warning Modal: Data maybe lost. Continue? + Don't ask again for current session)

UX/UI: Language Selection
Currently selecting a different CV language also changes the UI language.

Problem:
A user is applying at a french university to study engineering. The user can't speak/read/write a word in french as it's not needed; the courses are held in English. Nevertheless the student office needs a french CV. The UI changes to french upon changing CV language and the user is stuck.

Solution:
I'd keep it simple and straight - UI in users preferred language (e.g. german) and sections etc. in the target language (e.g. french)

ATS Document / Print PDF
As mentioned before, cv-manager relies on active discovery and/or doc usage instead of the users intuition (and adapted knowledge). This includes to find settings at the right place at the right time for the intended usage.
Problem:
A user wants to change the look of a document, e.g. changing the Page Numbers settings. Out of experience from Programms like Word, the users looks inside the ATS Document modal/dialog but can't find any settings for that.
Solution:
Using ATS Document / Print PDF, the user is able to change the settings before every export. Settings are saved per CV or globally.