Concepting & Design
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.
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
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:
- IEEE CS was a community of practice
Since IEEE CS was an association, my definition of that meant it was a "Community of Practice."
- 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.
- 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.

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

Before and After


Prioritizing the Design Based on User Goals and Business Goals
User Goals*
- At a glance, understand what the IEEE CS is
- See IEEE CS offerings
- For members, Login and access their subscriptions
- Stay up to date on latest technical news
- See CS happenings (events, timely news about awards)
*User goals were derived from Persona work and also chatting with business stakeholders.
Business Goals
- Get more members to sign up
- Showcase our broad offering up front
- Show upcoming conferences and get more attendees
- 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.

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.

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.

Hero Component

"Focal" Icons

Secondary Nav

"Content" Cards

"Full Width" sections (1 CTA)

Related Pages Component

Membership Footer

Unique Pages (1 offs) and Other Templates
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.
