Experience website – Mi fidelity to high fidelity wireframes
Design for Good – Project 4
After changing a lot of things for my website from last weeks chat with Johnny, I finished off my mid fidelity wireframes for my phone and started with the high fidelity wireframes for both phone and desktop. I created my wireframes in Figma as I didn’t want to waste valuable term time getting to grips with Framer, when it is something I can do during the holidays more comfortably and experiment better. This in turn ended up being a good decision because the familiarity meant I was able to create my prototypes faster.
I chose to create my high fidelity prototypes for the desktop first as I believed it would been a bigger job, however looking back I think it would’ve been better if I started with the phone and scaled up to a desktop – easier taking out design aspects, rather than adding them in and filling up more space.
From last weeks further research I was able to create my website. I decided to change some fonts to make my experience look more thrilling and exciting. I also started experimenting with colours on a separate Figma page, as well as design layouts and text placements. My mid fidelity wireframes had a lot more changes as I began to think more about how the user would realistically interact with the website. The initial experimentation of the home page took the longest as I knew it would set the theme of the whole website. After going with the orange theme, I began creating my high fidelity prototypes on Figma and realised that it didn’t look as thrilling as I wanted it to be. The animation I did in after effects also looked quite childish which didn’t fit my target audience, adults. I therefore decide to get rid of it and change the theme to a navy with added elements like lines and shapes which added depth and dimension to my website. Keeping to the sharp lines ensured that it didn’t look fluffy, but more of a thrill seeking experience.
I looked on YouTube and used the tutorials available on Figma to help with prototyping, however without knowing the correct terminology I struggled to find what I wasn’t looking for. Some of the tutorials on YouTube demonstrated the process too fast and I often went wrong which led to the feature I was trying to achieve not working. I had trouble with creating overlays and closing them for my reviews on the home page. To avoid more time being lost, I decided to put each review onto a separate page. I ensured to still keep some of the orange colour theme throughout my website which allows for certain information to stand out as well as adding a pop of colour.
For project 4, using some of the work from the workshop, the focus group activity allowed me to address aspects of sustainability I wouldn’t have normally gone for. Initially I wanted to do it based on clothes, however with energy being a huge sustainability issue, I thought it would be a good topic to start my research on. I came up with 3 ideas:
- Carpool/rideshare coordination – Connect people along similar routes to share rides and split costs.
- Utility rate comparison – Compare rates across providers and calculate potential savings from switching.
- co-lodging finder – Locate and review sustainable hotels and eco-resorts
I initially liked the first idea, however I came to the conclusion that it didn’t sound as safe carpooling with people you wouldn’t know, the second suggestion doest seem like I could experiment with it as much. However the third app option it something I could game-ify, add incentives and rewards and be more playful with it.
Next week I am going to begin the research aspect of the project that will form the starting point of the Design for Good project.