For the second group project for my course through Monash University's UXUI Bootcamp was to find a website that was looking a bit "down and out" and propose what we would do if tasked with the challenge of carrying out a redesign.
The original AWLQ website was very dated and in some caes, the code to be broken. After a heuristic evaluation we found the information architecture to be in quite bad shape, making the job of navigating the site quite a frustrating one.
the main issues found were:
When starting the project we used the “Double Diamond” approach which kicks off by empathising with our users. We conducted a heuristic evaluation of the AWLQ website and found quite a few issues with the site not just stylistically but also in regard to function and information architecture. Some of the main issues found were that the Information Architecture was very chaotic, some of the user testing conducted found that the dropdown menu was disorganised, they felt the web design was dated and a few users were annoyed by the constant spinning of the AWLQ logo. Our heuristic evaluation also found that only 1 out of 5 hero CTA’s was animated, there were hidden/broken social links in the top nav and some of the sites css was improperly formatted leading to some jarring layouts.
We then created a proto-persona on our ideas of an ideal user which we conducted interviews to re affirm or challenge our initial brainstorm. After collecting all the data we created an affinity diagram which allowed us to create our proto-persona: Louise Ellen Green, a 32 year old woman who has just moved to Coolangatta from the United States. Louise wants to get involved with her local pet adoption centre to volunteer and adopt a cat or three.
We used our interview insights to highlight her goals and needs which turned into our “User Insight Statement” and we also created a “Problem Statement” for AWLQ to steer our redesign in the right direction.
The team created a user flow of both the current website and our ideal user flow as well as a competitor analysis to identify weak points and other areas for improving the user experience. We also implemented an “I Like, I wish, What If” diagram for ideas of implementing new features or fixing old ones, this led to the development of a “power interest matrix” which uses a 2x2 matrix to measure a features impact vs effort to ideate on what is ideal to design for within the 3 week sprint. Karnika also took on the task of re-organising the information architecture to help make the drop down nav bars more sensible.
For the first step of the designing and prototyping stage we worked on a mood board and Kim created an updated logo for the AWLQ. Emma and Myself worked on selecting a number of fonts for headings 1 through 6, the body and footer which were decided by a group vote. I used iconify to import a multitude of different icons and have the team vote on them to choose which style of iconography we would be using going forward.
After these decisions were made we took on the challenge of changing the website's colour scheme as user testing said the colours used made the website look very dated. As a team we decided on a purple similar to the original site and a nice earthy green along with a grey; we created a lighter version of all these colours plus 4 other shades of grey for any accenting or highlights. The in depth style guide we created advised of all the font styling, iconography, assets such as drop downs, CTA buttons as well as some of the default background images used on the hero banner.
First, we worked on some low fidelity wireframes to ensure the website would function as intended before we beautified it. Here you can see the transformation from a simple wireframe hero page to a first colour iteration of the homepage
I created all the new assets on figma to create the in depth prototype you see before you. The process shown on screen is the user navigating the site to open the new headings which was thanks to Karnika redesigning the whole IA, the user then clicks on the support tab to open the volunteering page, they are then lead to sign up and try to skip past the personal information section which shows in red to highlight that it is an error.
We then conducted another round of user testing and found the results to be more consistent as users were happy with the clarity produced from the redesign and found the website was brought up to being more "current" in it's aesthetic.
If the team had more time to further work on this product we would have worked on a more streamlined address field using the elastic search function, unified the timing on the animation buttons which was mostly a figma issue, allow location services to help customers locate their closest branch and reframe the medical questions to be less invasive.