Thomas Le

Clean Sweep

by Thomas

— PROJECT NAME

Clean Sweep


— ROLE

Web Designer

Branding


— DATE

08/07/2020

Website refresh with a focus on addressing usability issues and updating the current site so that it feels modern and fresh.


Stakeholder Interviews, Survey, Heuristic Evaluation, Information Architecture, Brand Evaluation, and Design Concepts.


Engaged with the project team through a series of workshops to align key stakeholders before presenting design concepts for approvals.


Project team along with PM's and PO's were aligned every step of the Design Process and were able to provide feedback and approvals to move forward with a design concept.

Discovery

Understanding the business

Existing Problems

- The ability to archive content


-Create and update content in an easy to manage publishing workflow

 Responsive design (desktop, tablet, and especially mobile)


- Responsive design (desktop, tablet, and especially mobile)





Business Goals

  • - Need a better CMS to create, update and archive content


- Need a more contemporary look and feel to appeal to the millennial age group



  • – We need to evolve and move towards digital marketing, outreach, especially given COVID-19 to better engage with the wider community

  • - Clean up the current website with fixes that will improve the user experience in regards to finding content, typography, and responsive design




  • What does success look like?
  • - Maintain colours palette while making as minimal changes as possible

  • - Reduce the number of templates, currently templates prohibit the creation of “custom” pages for exhibits


  • - Move the current state of the website and lay the foundation for future aspects of “community and cultural hub”



  • - The website should reflect the quality of the place and product


 



Contact

email@domain.com

000-000-000


— Instagram

— Twitter

— Facebook

"PAMA is not just for Brampton -

it serves the entire PEEL region"

Empathizing

Getting to know your users

Sent out a survey through Optimal Workshop and we received an amazing 70% response rate.

Questions

1. What are your device preferences?


2. How often do you visit the website?



3. When browsing on websites where does this typically take place?


4. What’s the most important information you are looking for?


5. Can you find the information they are looking for?

Results

  • 1. Desktop (55%)


2. Less than once a month (32%)



3. At home (72.8%)


4. Interactive art exhibits (42%)


5. Moderately agree (34%)


Usability Problems

  1. 1. Finding webforms (currently it is incredibly challenging to find the appropriate webforms)

  2. 2. Self-serve and autonomy to users to donate or obtain membership
  3. Ease in finding content due to number of content currently on the website


  1. 3. Ease in finding content due to number of content currently on the website



Contact

email@domain.com

000-000-000


— Instagram

— Twitter

— Facebook

Main Target Audiences

Evaluate

Heuristic, Information Architecture & Branding

Heuristic Evaluation

Homepage


- Main navigation is located at the very top of the screen


- Slider control actions are placed within the right side panel


- Title are embedded on the page as images rather than HTML


- Outdated look and feel that is not compatible with today's web design standards

Main navigation


- Main navigation when opened blocks the logo preventing users from navigating back to the homepage

Information Architecture

Main level > Second level navigation

Main > Second > Third level navigation

Main > Second > Third level navigation

Main > Second > Third > Fourth > Fifth level navigation

Main > Second > Third > Fourth level navigation


Main > Second > Third > Fourth level navigation

Main > Second > Third > Fourth level navigation

Brand Evaluation

Heuristic Evaluation

In a heuristic evaluation, usability experts review your site’s interface and compare it against accepted usability principles. The analysis results in a list of potential usability issues.


1. Visibility of system status (35%)

2.     Match between system and the real world


2. Match between system and the real world (35%)


3. User control and freedom (55%)


4. Consistency and standards (30%)


5. Error prevention (35%)


6. Recognition rather than recall (45%)


7. Flexibility and efficiency of use (50%)


8. Aesthetic and minimalist design (35%)


9. Help users recognize, diagnose, and recover from errors (35%)


10. Help and documentation (0%)

Information Architecture Evaluation

1. The website contains a sizeable amount of content and has a menu that contains up to four levels of navigation.


This inherently poses certain usability issues that can make it challenging for users to find the right content in a timely manner. 



2. Reduce, combine, archive or eliminate outdated content




Branding Evaluation

  1. 1. Finding webforms (currently it is incredibly challenging to find the appropriate webforms)

  2. 2. Self-serve and autonomy to users to donate or obtain membership
  3. Ease in finding content due to number of content currently on the website


  1. 3. Ease in finding content due to number of content currently on the website



Contact

email@domain.com

000-000-000


— Instagram

— Twitter

— Facebook

Design Concepts

Applying everything that we’ve learned so far…

Design Concept #1

Clean Sweep


Goals


+ Clean up the homepage

+ Move away from kids look and feel

+ Re-arrange the page for better layout


Personality


Serious, organized, careful, approachable, reliable, colourful, informative


Design Concept #2 Modsleek


Goals


+ Modern

+ Minimalist

+ Accent colours


Personality


Serious, organized, careful, approachable, reliable, colourful, informative


Design Concept #3 – Ready Sight


Goals


+ Call-to-actions

+ Interactivity

+ Engagement


Personality


Serious, organized, careful, approachable, reliable, colourful, informative

Final


Concept

Hybrid Concept 1 & 3

+ Replaced hero banner of concept #1 with concept #3 to avoid copyright issues


+ Replaced the signup component from #1 with concept #3


+ Overall captured the look and feel that was established during the Discovery phase

Wrap Up

Takeaway and lessons

Understanding the problem

+ Ask questions, then ask more questions


+ Collaborate and include your stakeholders in your process




Evaluate with what you’ve been given

+ Make sure the entire project team is aligned


+ Document everything that was discussed and agreed upon



+ Sign offs and get everything approved before continuing onto the next step



Explore what’s possible, and deliver excitement

  1. + Walk your stakeholders through your thought process


+ People forget, gently remind everyone why you’re here and what you’re trying to accomplish



Contact

email@domain.com

000-000-000


— Instagram

— Twitter

— Facebook