Skills Used: Competitive analysis, organize personalization and customization based on user personas, user flows, site-mapping, wireframing, lo-fi mockups, interactive hi-fi mockups, designing for desktop and mobile, providing critique, presenting mockups


Overview
Our team was tasked with starting a re-design and re-organization of the company website and digital user experience. The new site should work for a range of B2B and B2C audiences, be personalized with custom content targeted to each user, function using automatically customizable modules, and offer e-commerce solutions.

Problem
Based on user feedback and customer interviews (see next case study) our team determined that there were issues with the current website and users’ online shopping experience. For instance, the site didn’t always translate to mobile devices, credit card information couldn’t be changed online, and there was no e-commerce capability for B2B customers.

Users and Audience
The site had to be a single experience that accommodated audiences across the board – users were a range of ages, professions, B2B and B2C. B2C users included students, military, and general individuals. B2B users included everything from large corporations to small businesses, and the company offered many different B2B solutions.

My Role
My role on the team was to assist with and take on brainstorming, conducting and analyzing user research (see the following case study), site mapping and wireframing, designing interactive mockups, competitive analysis, and more.

Constraints
While we worked with an agile project management approach, the actual implementation of design and development was more of a waterfall approach, and work was relatively siloed among team members. Fellow designers doubled as the future developers for the project, so resources were limited. Our website’s back-end platform was also to be changed, so my fellow designers/developers were working on determining capabilities for the website. Lastly, while we had many customer types and audiences – B2C and B2B – we only had a handful of B2C personas (created by a team member and based on customer data).

Design Process
The team lead broke the overall challenge into smaller projects for me to tackle. This has included:

Competitive Research: I was tasked with creating a competitive analysis matrix that compared business offerings and website features among our company and competitors. I was provided with a list of competitors and then built a matrix from scratch, including the creation of comparison points, which I grouped into overall sections. I color-coded each box of the matrix so viewers could easily decipher the information Green = the company had the feature, red = they did not have the feature, and orange = it was unclear, a “maybe” or required detailed notes. I also determined a “winner” for each overall section. For instance, one competitor won the section about user registration, as they clearly provided the most options for users to sign into the website. This included email sign-on, social sign-on, and guest purchase. Other competitors typically only offered email sign on.

Company X Competitive Analysis

User Flow: Our ultimate goal for the website was to personalize modules based on audiences and customers. I organized our user segments into a map that determined our acquisition sources and content creation needed for each segment. I color-coded the document as well – segment names were red, acquisition sources were blue, and content creation needs were green. Following this, I also created a sample user flow map based on the user’s position in the sales funnel. For instance, a user at the top of the sales funnel – perhaps their first visit to the website – would see modules with higher-level information about the company and services. A user at the middle of the funnel would see modules with more detail, FAQs, and additional options to lead them to the cart. A user at the bottom of the sales funnel – already a customer – would see modules to pay bills, purchase more product, or even refer the company.

 

Company X Segments

Company X - User Flow

Site Navigation Mockups: Based on our business needs and customer needs, I brainstormed site navigation and created low-fi wireframes, sketched on paper. Then I designed a number of basic interactive digital wireframes for team review. After reviewing these options with the team I iterated on the designs, narrowing down to a magazine-style nav. Eventually I used actual sample copy and images in the design to create interactive high-fi mockups for desktop and mobile. This project is currently a work-in-progress.

Company X Site Nav

Company X Site Nav Mobile

Modular Homepage Mockups: I created homepage mockups with modules and content personalized to four different types of customers – two of which were based on personas created by a fellow team member (we did not have personas for the other audiences). I began brainstorming with sketches, then cut out paper modules to arrange and re-arrange in different formations as a lo-fi mockup. I used the best formations to drive basic digital wireframes to present to the team. After the presentation, team review and various iterations on the wireframes, I built hi-fi interactive mockups featuring modules that would change content based on the website visitor type. This project is currently a work-in-progress.

WireframingWireframing Modules

Lessons Learned
We decided on tasks and next steps as we moved forward. Next time, I would like to outline all the project’s steps from the start and determine who would tackle which piece. I would also like to involve more team members in each part of the review process so the work would not be as siloed, and instill more communication as we each worked on different parts of the project.