In screen-based design 1, I created a user-friendly wireframe for a website that needed a new start. I choose to create a new website for Toronto Cupcakes. The focus needed to be to refine the key aspects of functionality, instead of focusing on overhauling the pages. This website assignment includes information about the clients website, research, strategy, user personas, process and techniques, sitemap, presentation and wireframing.
The design process includes a lot of research and gather information from the existing page. After going trough the existing website and finding the target market for the new page, I created two different user personas, created a moodboard and went trough goal-setting, controlled observation, auditing existing content, evaluated what to bring into the new website, did a gap analysis and had a card sorting before creating the sitemap.
These wireframes are sketches of how I wanted Toronto Cupcakes website design to be. Click on the sketches for a full preview!
In screen-based design 2, I created High fidelity wireframes and focused on building an interactive prototype for Toronto Cupcake in Figma, and after that, design the website in Webflow.
Before starting on the prosess of designing Toronto Cupcake in Webflow (CMS program I used for website design), I went trough planning & research, create a new moodboard, style guide, high fidelity wireframes and the prototype of the website. From there I had several user testing, to check if everything I created was user-friendly and correct. Click on the photos to preview them in full version.
A short video showing you how the prototype looks like.
Check out the prototype by clicking on the button under.
This website is created only for educational purposes.
This website uses cookies. By continuing to use this site, you accept our use of cookies.
