UX – Website Redesign

Overview of Content Strategy & Design Components

Phases for a site redesign for the San Diego Floral Association. I performed all planning and UX tasks and hand-coded the site from scratch using, HTML5, CSS3, jQuery, and JavaScript.

Content Assessment | Personas | User Testing | Info Architecture | Wireframes & Prototypes | Responsive Views


Content Assessment

We created a Content Matrix, a spreadsheet of existing pages, urls, topics for evaluation, and assessed each for quality, completeness, order, relevance and other attributes. Pages were organized into categories & subcategories. These were used to define potential audiences and primary objectives of the site. We also collected all the existing content into a library of individual documents for review and editing.


Personas

These hypothetical users were created to reflect the tastes, interests, and objectives of our primary target audience, based on the preliminary review of the content matrix, the existing site, and further research into the organization. Once we had a stronger understanding of our target group, we did a preliminary cleanup of the content structure.

The audience was determined to be generally low-tech, mostly retired, homeowners, some industry professionals, etc. Persona cards 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


User Testing

We designed 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.

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

standardization-grid image


Info Architecture

Initial Abstract Model of content used to define final information architecture, created in Excel.

sdfa-03-info-architecture


Wireframes, Prototypes, Design

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.

Prototypes, Low Fidelity

Manual sketch and low-fidelity prototype created with Axure

sdfa-04-1-prototype-low


Prototypes, Mid Fidelity

Medium-fidelity prototypes for desktop and mobile created with Axure

sdfa-04-2-prototype-med


Prototypes, High Fidelity

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 design by Greg Klamt, except Personas and Standardization Grid with assistance by Yara Bertran.


 

View Site