my chosen site

for this project, I chose to redesign the Hawes Fine Foods site, as it had a clean, simple aesthetic that I appreciated (but also room for improvement).

problems

• usability
• no navigation functionality besides vertical scroll makes page usage tedious
• the ability to view the store's inventory seems like the main function of the site, but the lack of emphasis on that section makes it difficult to find, therefore decreasing the usability of the site
• memorability
• I think the site being primarily read-only makes its functionality easier to remember
• however, a lack of visual accent makes the site design forgettable
• general
• a lot of awkward negative space
• disjointed headers between 'about' and 'gift card' sections
• small font used throughout the site can make text difficult to read and less accessible to all users
• body text is a medium grey against the all-white background, so the contrast looks a bit low when users aren't focused in on the text

accessibility

the site actually scored a lot of accessibility points with WAVE, particularly with its strong overall color contrast, which I understood, but didn't totally agree with. I thought the contrast between the body text and the background could still be improved. however, WAVE did catch a couple notable issues:

• most images were missing alt-tags
• some header sizes were skipped, which WAVE noted could be confusing

WAVE actually didn't mark the small font size, but I still took it upon myself to improve that. a lot of the site's text is quite small and I didn't like that I had to squint/zoom in on the site to read its content.

process

I used Figma to create a design guide as well as hi-fi prototypes for the 3 aforementioned displays: desktop, tablet, and mobile.

you can find the design guide and each prototype at this link. if you run the prototype, you may notice the transitions between each frame are a little janky — this is because i did not implement scrolling in the prototype. the actual website scrolls like normal!