This is my final draft sketch which I took into Figma© for wireframing.
Sketching it out
I usually start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.
The main purpose of the sketches assist with brainstorming and spatial design.
Knowledge about usability goals, end-user usability and stakeholder input influence the sketches.
I usually create a couple different versions until I feel I have usable design?
The main differences among these versions are placement and look and feel of key elements.
I knew the pop-up widget needed to be a small chat window, and from experience with other interfaces, I was able to take usability elements to perfect the UI on paper.
basing the design on the phone text message interfaces seemed the most logical layout, because it would have a familiar usability, without a learning curve.
I was then able to move into the computer for high fidelity wires and design.
UX design customer journey
This is a simplified version, to not overwhelm with the details. the entire journey was quite lengthy, and I wanted to show a brief digestible example.
This Virtual Assistant journey map UI was used in Jared, Kay, Kay Outlet, Peoples Jewellers (Can), Zales, and Zales Outlet
Want to see it in Action?
Visit the Zales Website, the chat bot is located at the bottom right. Alternately, you can see the re-skinned versions on our sister brands: Banter (formerly Pagoda), Gordon's jewelers, Peoples Jewellers (Can), Jared, Kay, Kay Outlet, Zales, Zales Outlet.