Website Mid Fidelity Layout
The mid-fidelity homepage has been changed significantly, in terms of reducing the amount of information displayed when the user opens the website. While it will still contain a decent amount of information, users will need to scroll down the page to access it. I made these changes after receiving feedback from students in my survey, they found the low-fidelity design too crowded to navigate. A major issue with crowded web pages is that it can result in the user leaving the site as they find it too hard to read or interact with. To address this issue, I have added lines to act as separators between different segments of information. And currently, I am featuring an image of MCM Comic Con on the homepage, although I am also leaning towards using an image of the event badges to represent our ticket types.
VIDEO
Companion App Mid Fidelity Layout
Overall, one significant change from the low-fidelity to the mid-fidelity is the redesign of the navigation bar. Originally it only included text, now I added additional small icons to help indicate the user which page is for what. It still lacks animation but that will be worked on later during the process of making it into a high-fidelity design. Another difference between the low and mid fidelity designs is that I now decided to include a video on the homepage. That video will give a rundown on what MCM is all about.
Because this app will be able to run anywhere on the go, I added a ‘view your ticket’ button on the profile page. This feature shall allow the user to present their ticket as a QR Code whilst at the event if needed so.
VIDEO
Responsive Layout (website home page)
Responsive Layouts is a design feature that allows a web page to be resized to show what the website shall look like if it where to be opened on a smaller device than a computer or laptop. These devices could be either be a tablet/ iPad or a mobile phone.
I created my example of a responsive layout from my Website Mid-Fidelity homepage. Once resized, my web page re-positions the placement of text whilst keeping all other elements such as the navigation bar and image in the same spot until it has no space.
CLICK LINK TO VIEW WORK IN FIGMA
0 Comments