UX – Website Redesign Components

Content Strategy and Design: San Diego Floral Association Website

We began with creating a content matrix of existing pages for evaluation. Elements were organized into categories, subcategories. After review of potential audiences and objectives, Personas were created to reflect the tastes, interests, and objectives of our primary target audience. After a preliminary cleanup of the content structure, user testing was done with card sort exercises to define the most relevant tasks and objectives, and how these users thought about and performed those tasks. Tasks were then re-categorized, prioritized, tested for consistency with a reverse card sort, and adjusted based on a standardization grid which weighted tasks based on their value to users.

From there, the design phase begins with lower fidelity sketches and wireframes, to high-fidelity prototypes, ensuring that content and layout assists in reaching the primary objectives. Development of the site began in parallel with the final prototypes.


Personas

Created User Personas to outline tastes, objectives, and other attributes of most typical target audience members: mostly retired, homeowners, some industry professionals, etc. Created with Extensio (Also created an identical version in Excel which could import data from survey spreadsheets and autofill in this clean visual format for multiple personas.)

Image of Persona panels


Standardization Grid

After performing a Card Sort with users to assess how they identified with and thought about terminology for a variety of tasks we assesed the data. I created this Standardization grid in Excel using conditional formatting to identify key content groupings. This helped define our primary areas of interest and a more concise and clear structure focused in three zones: Events, Solutions, and About the Organization.

sdfa-02-standardization-grid


Info Architecture

Initial abstract model of content used to define final information architecture.

sdfa-03-info-architecture


Prototype 1

Manual sketch and low-fidelity prototype created with Axure

sdfa-04-1-prototype-low


Prototype 2

Medium-fidelity prototypes for desktop and mobile created with Axure

sdfa-04-2-prototype-med


Prototype 3

High-fidelity prototypes for mobile and desktop created in Axure and Photoshop

sdfa-04-3-prototype-high


Website Mobile, Desktop

Final website and mobile views

sdfa-04-4-website-mobile-desktop

All work by Greg Klamt, except Personas and Standardization Grid with assistance by Yara Bertran on data collection for the card sort.


 

View Working Prototype