Experience website – site map, user flow and wireframes Design for good – initial ideas
This week of my Experience website I created a created a site map and finished my user flow. For my user flow I decided to change the orientation of it to make it easier to read as it was landscape. I got a bit confused with what exact pages I was going and thought instead of carrying on it would be best to create a site map on Miro.
In my sitemap I branched all the pages that would be on my website, like a flow chart. This helped me establish how many pages would be on my site and the connections between the pages. I found this to be an easy task as I use my research boards to help figure out what pages I wanted and the navigations throughout the site.
For my wireframes, I was quite confused on how to create them. After looking at some examples on google I was able to create my low fidelity wireframes. Using my site map I mapped out all the pages and then started designing. I wasn’t sure on how to get the pages to scroll as I only through you could create static pages on Figma. However after talking to Dave he showed me that if you extend the pages, attach the navigation bar to the top so that it stays stationary as you’re scrolling, when you view it as a prototype you are able to scroll. This allowed me to be more experimental with the layout of images and text on the pages.
Due to the fact that I have a lot of extra pages on my website like the e-gift card and booking process pages, I decided to create a template page with a box that included all the information of the process, to avoid my wireframes looking too busy and confusing. Some of the pages I still need to add where I would like my images to be and add in text placement to make it more easier to visualise as a website.
We had a briefing for the design for good, Generative research project – which I then came up with a few initial ideas of what topics of sustainability I could base my project on.