Site Map / Navigation Schema

Duration: 6-8 weeks. 1/2 hour meetings with multiple stakeholders. Completed: June 12, 2017.

The existing site had 11 main items in navigation (!) which was a clear issue with findability.  Here's how I cleaned that up.


Step 1: Creating a Sitemap

The result: 6 items in the main navigation with a utility nav.

  • Aiming for less
    Main navigation should have 5-7 items.  So that was the aim.

  • Creating the site map
    Cleaning up the navigation required creating a site map.

  • Multiple meetings to create new groupings. 
    I worked with stakeholders to validate groupings/hierarchies.

Attribution: All sitemaps created by me.

  • Sitemap on old website

  • New Sitemap (Post Stakeholder Discussions)


Step 2: Build a Prototype and Get Executive Feedback

After working with stakeholders on the revised sitemap, I presented to Executive Stakeholders multiple options for navigation:

The schema options were:
• Action based schema
• Informatin based schema
• Benefits based schema

The result: they liked the benefits based schema. Later, we had to simplify and go to a simpler information based schema due to space issues.


Step 3: Iterate Based on Feedback

Few iterations after presenting to Executives.

  • No more portals bar
    The Portals Project got moved to Phase 2.  So this version had it removed.

  • Making membership visible
    To promote login and membership, I designed a fixed login and join us buttons in the navigation bar.

  • Increasing the view screen
    To increase viewing screen size, as a user scrolls, the navigation bar collapses.

  • Introducing brand elements
    We're using the IEEE blue and new logo.  JZ added the "slash" which you see in the logo, into the footer.

Attribution:  All wireframes shown here by MS, Visual Design by JZ


Step 4: Design Expanded State and Logged In State

Next, I worked with stakeholders to define all final groupings and the logged in state:

  • Parent-Child Relationships
    Here you can see the parent-child relationship setup in the hierarchy. Much cleaner!

  • Logged in fly out, for quick access to a user's "things" 
    When a user logs in, their profile image and their subscriptions are all in one location.

Attribution:  All wireframes shown here by MS, Visual Design by JZ

  • Placeholder

  • Placeholder

  • Placeholder

  • Placeholder

Brand Identity Prism

Duration: 1-2 weeks. Two, 1 hour workshops.

To begin visual design, it was necessary for us to understand the "look and feel" from a company identity perspective.

  • "Brand Identity Prism" Workshop: Round 1 with Executives
    I conducted a 1 hour brand identity workshop with Executive Stakeholders and a few staff. Few participants were remote as well.

  • "Brand Identity Prism" Workshop: Round 2 with Volunteers (Users) 
    I conducted another 1 hour workshop with the DX Ad Hoc (The Digital Experience Advisory group ).

The output: Both prisms ended up to have similar themes!  Themes ended up helping us with image selection work, later on in the project.

Homepage

Duration: 3 months. Multiple iterations and stakeholder meetings before presenting to Executive Stakeholders.

Problem

FACT: 
"70% of users who come to Computer.org 
leave within 10 seconds."

1.  We needed to capture and engage a younger audience for the future of our volunteer, creator, and customer bases (while NOT alienating our existing audience).

2.  There was a huge missed opportunity with engaging, retaining, and converting visitors into satisfied paying customers.  

Solution

Creating online value that engages and retains visitors and core customers.

Side note: Value was a big part of the solution.  Everyone knew we were sitting on great content but it was buried or not presented very well.

A big part of the solution would then have to do with giving people a reason to come back.

The final framework (below) was a result of talking to numerous users and staff members.


The Final Framework:  Content, Community, and Commerce

What might be the end result?  From a conceptual standpoint I understood these 3 things:

  1. IEEE CS was a community of practice
    Since IEEE CS was an association, my definition of that meant it was a "Community of Practice."

  2. IEEE CS's core value was it's IP (intellectual property) and technical content.
    A successful design solution would also utilize the core value CS offers (it's valuable content) to build that community.

  3. Monetization comes AFTER you've established some customer love.
    Once we could establish content and community, we'd have be able to monetize.

This is the framework I came up with as a result:  content, community, and commerce.

Image

Exploring Competitors and Exemplars

Meeting with business stakeholders, IEEE and ACM were the two competitors that came up - however, from a design standpoint, these were lackluster websites.

Good design helps you to differentiate yourself from the competition.

I began to start look at other associations and websites that did a good job (1) showcasing who they were (member activity)  (2) sharing technical news.

A few exemplar websites came up:

  • The Aspen Institute
  • O'Reilly Media
  • Stanford University
  • IEEE Spectrum

Design Walkthrough

Below is a walkthrough of iterations of the homepage. Looking at main components and feedback given, you can see how the final design was ultimately structured.

The design position was to keep the homepage simple - showcasing highlights from news and core products.

Click through each of the tabs to learn about my decision making while designing the homepage and getting it's approval.

The homepage required a lot of thinking, discussing, and iterating to get to the final solution.

A high fidelity prototype was created and shown to staff, Executive Stakeholders, and volunteers to get sign off.

Wireframes (1st pass)

I knew that the homepage was to showcase what was going on at the computer society.

From talking to stakeholders and users, I understood we needed sections for:

  • Explaining who we are
  • Showing our volunteer community
  • Providing valuable content that would make users want to come back
  • Conferences
  • Education
  • Digital Library
Image

Homepage Prototype (Axure)

After numerous iterations, I got the wireframe in good enough shape to present to stakeholders. I wanted to ensure they were high fidelity wireframes so feedback would be more precise.
I shopped the prototype around staff. Then I officially presented to Executive Stakeholders. Overall feedback was positive. Then I showed volunteers.
This selling of my skills, was essential to getting 2 designers assigned and reporting to me for future work.

Before and After

Image
Image

Prioritizing the Design Based on User Goals and Business Goals

Ultimately, the prioritization of design features was based on a balance between feasibility, user goals, and business goals.

User Goals*

  1. At a glance, understand what the IEEE CS is
  2. See IEEE CS offerings
  3. For members, Login and access their subscriptions
  4. Stay up to date on latest technical news
  5. See CS happenings (events, timely news about awards)

*User goals were derived from Persona work and also chatting with business stakeholders.

Business Goals

  1. Get more members to sign up
  2. Showcase our broad offering up front
  3. Show upcoming conferences and get more attendees
  4. Get more Digital Library subscribers

I had also been hearing from Executive Stakeholders that we wanted to appeal to younger professionals.

Based on user goals and business goals, the final order of the homepage elements:

  • Mission (Hero)
  • Membership promo
  • Latest News
    • Featured Article
    • CS News
    • "What People Are Reading"
  • Conferences
  • Digital Library
  • Social Media

A Template Approach

After designing the homepage, I realized that we couldn't  design all unique pages.  It would take too long.  We would have to use templates for the pages.

Taking the core navigation as an indicator of demand and popular pages, my team and I focused on designing the minimum set of templates to cover the majority of pages.

This approach, reduced the number of unique pages for development to build. We also had a "Generic" page template that was used for all pages that didn't really fit any template.

In the end, we had 14 templates and 7 unique pages we had to design.

A list of all templates in Visual Design (Invision files)
- linked to their respective Desktop, Tablet, and Mobile versions.

Image

A mapping of all 2,200 pages to Templates
- Here's the same Page Audit doc (shared with staff in planning) - with each page, mapped to a template.

Image

From Design to Design Language Library

As we were designing, we kept in mind how components could be used later for other templates.

This helped us later as we built out a Design Language Pattern Library.

Image

Hero Component

Image

"Focal" Icons

Image

Secondary Nav

Image

"Content" Cards

Image

"Full Width" sections (1 CTA)

Image

Related Pages Component

Image

Membership Footer

Image

Unique Pages (1 offs) and Other Templates

Based on wireframes, the following visual designs were created by my team's visual designer, JZ.

Filter Page Template - allows a user to filter through content cards (Magazines, Journals, Courses, Certifications)

      .  

Design Language

From our designs, I made sure our team was creating documentation for a Design Pattern Library.

This was used later as a reference for developers through Zeplin (providing them the CSS).  Ideally, the patterns would be put a site that everyone could access - but for our small company we had the files saved to Invision and on our shared drive.

Image