← Back to IEEE Computer Society Project Home

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.

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.

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.

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

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

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.

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.  

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.

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.

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

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.

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

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

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.

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.

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.

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

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.