After I completed the sketches and working out the interactions I then went to Adobe XD to mark out the layout I wanted for the interface uses minimal images and designs so I could re-organise or make adjustments when needed.
After I had settled on the format I started inserting images that I would use and fleshing out some the information text and descriptions.
I then went to develop the look testing how I wanted the “message boxes” to look like and the surrounding layout and design moving it away from being a wire-frame into a designed and stylised interface.
After finalising the aesthetic I could then apply the style to the other slides in the wire-frame and inserting more context and make it seem like a real tangible interface for someone to go through. Furthermore, I could then work on the smaller aesthetic details or interactions such as I trailed with different areas for a “further details” button and how I wanted that to look like. Ultimately I shifted it to a “glossary” button to serve as a quick look-up for those uses the interface.
Shown below is one of the process variants of how the user maneuvers to the screen shown above.
Full Adobe XD “layout” of all the slides.
If I could develop this further I would want to move this out of XD onto its own website with it further developed with animations and sound.