After creating the sketches for all key screens/pages it is time to dive into the prototyping. Therefor I will use Figma as a tool which has decent collaboration capabilities. Please find the link here. I will start with the Search page.
I will start with Lo-Fi variant, because it’s fast & dirty process which can be changed on the go, doesn’t require a lot of details and can be used as quick check of certain concepts.
Keep the progress always in mind
Very important component which I didn’t include in the interaction design phase is the breadcrumb or so called progress tracker. According to my experience there are four main points that should be taken into account in order to build perceivable, usable and accessible navigation element:
1. Previous step
Visually indicated by “check” icon shows to the user that this task is complete. I’m not 100% sure that the absence of a number in front of the step tittle is vital, so I removed it. The underline shows that this item is a link, it has also the “active” color.
2.Prominent current step
Now when I’m coming again to this step I’m noticing that the current step is not so distinguishable. I’ll tackle this in the medium-fidelity stage. So back to the point current step has a number and a name ( main dark grey color ). It is not a link but will be read by the screen reader with a hidden label “Current step”.