Key Objective
Design a demo website and a video of the demo as a preview for clients prior to advancing development on Moodle.
Design a demo website and a video of the demo as a preview for clients prior to advancing development on Moodle.
Significant Outcome
The demo video led to multiple clients expressing interest in working with us within a month.
The demo video led to multiple clients expressing interest in working with us within a month.
Team
Me (Digital Interface Designer), Seth Walloch and Zach Becka (Developers)
Me (Digital Interface Designer), Seth Walloch and Zach Becka (Developers)
Project Duration
September 2023 - October 2023
September 2023 - October 2023
Step 1
Designing Figma wireframes through PowerPoint mockups
As the team received mockups crafted in PowerPoint by the executives, I began the design of high-fidelity wireframes on Figma based on a placeholder company, Bob's Widgets. During this process, I collaborated with the web developers to establish our strategy, select the tools we'd use, and explore the UI possibilities within Moodle, including its coding aspects.
Step 2
Introducing Framer to the team
After designing the wireframes and prototype on Figma, the executives expressed a desire for a more realistic and interactive prototype. Instead of following their suggestions to redesign the wireframes using platforms like WordPress, I proposed using Framer. This approach allowed us to directly export the Figma files into Framer to save time. We transferred the Figma files to Framer, and the primary task within Framer was to link all the elements before publishing the demo website.
Step 3
Developing on Moodle
As the Framer website was being built and published, the web developers attempted to rebuild a replica of the website on Moodle as a test run. Throughout the development phase, I contributed by offering extra design recommendations.
Final Product and Future Work
Presenting to clients
Using the demo website built on Framer, I edited a video recorded by our team explaining its features and presented it to various clients. We will then proceed to develop the final product using Moodle, taking into account each client's requirements.