By Davor Birus on October 18th, 2024
Last week I worked on redesigning the feedback entry inteface and this week I've worked on completing that entire flow. I don't have any proper UI/UX experience as I have been a software engineer my whole career. I've done UIs over the years, but they have been mostly internal tools that didn't need to be very polished. This might be the first time that I'm investing a significant amount of time to create a UI that is actually high quality.
I think I'm discoveing that good UI has to be simple and the fewer elements on the page the better for the user because they need to think less and there's less chance that they'll get confused. So while designing this feedback entry flow, I've been slowly breaking up my UI into different pages. Right now I have the following:
Envelope Page - this is the first page that the user is taken to after clicking on feedback request or offer from the list. This is the landing page of the feedback entry flow
Add Feedback Page - this is the wizard page for adding feedback
Added Feedback Page - this page allows the user to view and edit already selected feedback
Review & Submit Page - the last page allows the user to get some recommendations on the quality of their feedback and decide whether they want to send the feedback anonymously
This is the landing page of the feedback entry flow. It allows the user to add (more) feedback to the envelope and to view already selected feedback. It also displays detailed progress information.
This is the wizard page for adding feedback. It allows the user to browse through all the feedback. I've decided to simplify this page and only leave the feedback.
Before there was also the progress card, but I decided that it's taking to much space. I still wanted to give the user some sense that they are making progress, s the solution I found was to put the progress bars in the scaffold title. That way I can show the user their progress without taking up any additional space on the page itself.
One thing I might experiment with on this page will be whether swiping is also a good way to move to the next page. I would also like to add an animation when moving to the next trait. Given that the user is going to spend a lot of time on this page, I think the animation might make the experience a bit smoother.
This page is accessed from the Selected Feedback card on the Envelope Page. It allows the user to review all the feedback they've already selected. It has two levels. The first one is a list of traits grouped by category and the second one is the actual trait where the behavious can be changed.
I wanted to guide the user towards higher quality feedback so I decided to have one extra page before submitting. This page comments on the quanity and sentinent of the feedback provided.
First, the page displays some advice around the amount of feedback. I've hardcoded a value of 20 behaviours to act like the ideal number of selected behaviours. If the user submits less then 10 or more than 40 the page will recommend to stay in that range.
In a similar way the page also recommends a certain positive to negative trait range. If this ration is less than 0.33 or higher than 0.8 the page will warn the user that they are being to positive or too negative.
Test and fix any broken envelope completion logic
Test all envelope types: sent offer, received request, received offer, send request
Work on the report page