Before the Renbacci website could be built and finalized on the Editor X CMS; its usability and functionality were first conceptualized and prototyped. Using a Wacom tablet, Adobe Illustrator and Figma, I conceptualized the homepage, about page as well as the online store page to have a clear idea of how the website would work, its appearance and to simplify the user journey as much as possible. Instead of free-flowing information and imagery; I opted to utilize blocks instead to organize and arrange the overall structure of the entire website. The ideation for the block-based functionality can be seen in the wireframe illustrations found below. Once after the wireframe was approved, the website design and interface was then finalized through a prototyping and mockup process that was undertaken on the following programs: Adobe Illustrator and Figma. The design process for the prototyping and wireframing process can be found below in video format for viewing. To learn further about the website's front-end and appearance, please consider viewing how the website's interface came to fruition on the Editior X platform.