For this project, I was looking to enhance and improve areas of the previous OneLocal website where it failed to translate well across all screens sizes. To further improve the site's accessibility and enhance the user experience for individuals with disabilities, I researched and aimed to be AODA WCAG 2.0 compliant.
Since the site redesign required some updates to the branding, I did not limit the design scope by staying within what the OneLocal brand style was at the time. If ammendments needed to be made (for example, to the colour palette) then I considered them in this project.
OneLocal - Lead Designer
Research, branding, wireframes, mockups, responsive web design, accessibility (WCAG), visual design, iconography
Jan 2021 – March 2021
Small business owners who have way too much on their plate to keep up with marketing their business effectively. These merchants want a marketing solution that is easy, less time consuming and actually work—high ROI. This sentiment of simplicity for high gains was one of my main design goals in the refreshed design.
In order to meet certain accessibility guidlines for website use, the orange and teal needed some contrast enhancing and or use recommendations that did not pertain to text use.
From comparing the previous version of the website to others, I can saw that the space on the sides felt unused and not at all a part of the whole website. Something that was needed was giving the layout more spacing between elements so everything didn't feel confined to the center so much, especially on the larger screen sizes. In my designs, I accounted for each of the main break-points and designed each page with each to help ensure a 1-to-1 design to development translation.
The font choice and iconography of the previous iteration fit the tone we were going for well, so no major changes required there. I did add background elements for the icons to enhance their size for the improved spacing and bring the branding colour together. I did not want to the feel of the site to be overly intimidating for small/medium businesses to deal with.
Contrast issues were were very apparent with our orange and teal colours as background text colours, so I limited them to use in graphics and large text only. In order to fit more content on screen, responsive font-sizing and extra space was used for larger screens.
Home
Partner
About Us
Product (LocalReviews)
Careers
Case Study
About Us
Case Study
In regards to the page intro section photos, feedback from the previous iteration of the site indicated that the photos showed only who the product is intended for, but did nothing in saying what the product does. To combat this, I mixed in floating stat infographic style cards and sammple text illustrations to provide more context as to what the products can do for the user.
LocalAds
LocalContacts
LocalMessages
LocalReferrals
LocalResponse
LocalVisits
LocalSEO
LocalSite
If you would like to see more of this design, the Figma file, and annotations, please connect with me and I will send you an invite to view the Figma file.
