UX, UI and Prototyping at Taylor

The majority of my time at Taylor is spent collaboratively solving UX and UI issues. A lot of the time that means prototyping new experiences to get stakeholder buy-in. It also means working closely with our agency and development partners, as well as multiple teams within the company such as sales, product development, and HR.

hub-laptop

Content Page Experiences With a Activist Twist

I spend a lot of time working with our content team developing new ways to tell the Taylor story. This involves a ton of prototyping. We iterate, change content, and constantly re-evaluate the user problem we’re trying to solve. Below is a brief overview of the steps taken to develop a new sustainability focused section on the site. This is an ongoing project.

Content Map and Initial Discussions

Coming up with a content map and considering the information architecture of a project is one of my favorite phases. Getting everyone in a room together, and laying out on the table what all the stakeholders in a project think…before any designing gets done. Often I like to talk to co-workers and collaborators individually to talk through any ideas they might have for the project. The process is similar to conducting user research, but with internal teams and collaborators as opposed to end users.

Key insights for this project

After talking to a large group of co-workers it became apparent that the main focus of this new section was presenting information about the projects we’ve been working on.

There was a need to establish trust early on in the experience. Saying we’re working on a project isn’t enough, we need to show that other qualified brands believe in these projects too.

Many team members wanted this experience to be ‘brand adjacent’, living on its own and able to grow, but still being associated with the base company.

There needed to be simplicity to the navigation, and information needed to be scannable.

Competitor Analysis

I love being inspired by others. There are so many great ideas out in the world, and so many amazing brands that can help bring your own ideas to life. For this project I looked at brands known for telling stories based in social and environmental issues. Brands like Patagonia, The Nature Convservancy, and also direct competitors like Martin and Fender.

Side Bar: Part of the reason I love conducting competitive audits is to see what brands with a very high design maturity are developing. Not every team is ready to conduct rounds of researching, testing, and iterating. That might be from a lack of education on UX, for legal reasons, or technological debt. When conducting a competitive audit I think it’s important to keep this in mind. The company focused on developing new technology is able to consider solutions that wouldn’t be possible at a company still working on understanding how to empathetic to their users to help them complete their goals.

Competitive insights for this project

There is very little ‘green washing’ in the messaging. The brands that are telling the most successful stories, and conveying their messaging in the clearest way, are doing it in a very high level, non-force fed way.

The content is evergreen, and grows as the brand grows. There are new stories, and updates for most of the projects being shown. It’s not enough to ‘set it and forget it’.  

Products take a back seat to story telling. Very, very rarely is there even an inkling that the user is being put into a purchase funnel. The focus is on the content, not on the products. 

Surveys and Pain Points

It’s one thing talking in a room with a handful of coworkers, it’s another getting out there asking people what information they want, and what solutions would be helpful for them. I did some independant user research early on in this project to understand what the users wanted, to help inform the initial designs.

Survey insights for this project

Users felt like every brand is trying to spout some kind of sustainability story these days. It’s important to them that the brands they buy from are doing ‘real work’, not just saying they’re doing the work. 

Users are looking for two kinds of information. The first is quick information that is easy to digest, with easy to understand facts. The second is long form content, with information that legitimzes the efforts, and explains why the initiative is important. 

The users also backed up the teams feelings that establishing trust was important. They referenced other websites that show publications and news shows that talk about the projects.  

Who Did We Talk To?

We developed user personas and user stories for this new section of the site. Recent data showed that our user demographic has been trending younger. We also looked at data from across the web and noticed that younger (millennial, Gen X) demos were placing en emphasis on corporate responsibility in their purchase journey.

User Persona Nicole D.
Nicole D. User Story

As an outgoing adventurous person, I want to make good purchase decisions so that I can feel good about the purchases I’m making.

User Persona Geren W.
Geren W. User Story

As an social justice warrior, I want to align my passions and my wallet so that I can find new hobbies and have new experiences that help make a difference in the world.

Architecture and Storyboarding

Content is king, or so they say. Using the insights from the intial round of testing/surveys we can start to think about the content that’s going to live in on these pages. In my experience this process takes longer than expected. It’s good to get the ball rolling with brainstorms, and even quick mockups because all of the assets needed to support the content will likely take months and need to be budgeted for.

Storytelling and Navigation Insights

There are a couple of larger stories and projects that must be present in the experience. These are non-negotioable for the stakeholders.

An overview section is a good place the talk about the ‘why’ of the projects and to show off some quick stats for the users who don’t want to spend time diving deeper. 

Having overview content on the ‘home’ page will help users decide if they want to go deeper into the experience. 

Make sure that SEO stays top of mind, it’s not just sustainability that we’re interested in ranking for, but also how that ties into guitar and sustainability leadership searches. 

Starting LoFi

Good ole fashined pen and paper. LoFi prototypes are a great way to get lots of ideas down quickly. I started with a quick sketch of the landing page, just marking out the content sections.

Getting Going with Crazy-8’s

Crazy 8’s is a classic brainstorming excersize. I didn’t get too crazy with this one, but it’s a great quick way to get a project moving. 

Taking inspiration from the crazy 8’s excersize and also drawing from the current module library I drew out a couple of landing page sections to bring back to the team. Some ideas like social sharing, and more interactive modules like the guitar focused module were still included, even though they seemed like a reach.

Low Fidelity Wireframes

From the hand drawn prototypes to the computer. With the basic outline of the page signed off on, it was time to move onto the computer. I love iterating within the design programs, so wireframing is one of my favorite steps in the design process.

Wireframe Insights

Stats feel small and insignificant on the homepage. Save individual statistics for the child pages and story pages. 

The team really likes having large quote blocks – keep these in and explore different design options.

Video needs to be easily found, and easily played – don’t make users go further into the experience to watch videos.

Decide how to prioritize projects vs. new content vs. social.

Bring back the elevating of ‘trust’ sources. Where did the publications and ‘as seen in…’ go?? 

User Testing

With 5 unique layouts for the homepage we setup a user test to make sure we were on the right path. This was a simple test where we asked users to scroll through the page and think outloud as they did it. Before participating users were given a brief summary of the project and all users were familiar with the brand. 

This test was a success and we gained a ton of insight from it. Those insights will be used in the next round of designs and will help inform a lot of the content decisions we make for the experience. 

Module Prototyping

Next I started developing higher resolution modules to pitch to the team. This is when designs really start coming to life. Working with existing assets and making new designs is always exciting. Using insights taken from all of the steps of the process so far I worked on bringing some color and excitement to the experience.

It helps to have design and content teams working together, and this project is no exception to the rule. Working in tandem with the content leads I comped a variety of new modules to help tell the stories. Something that experience has taught me is that simple is usually better. Yes, we can make a super immersive VR jungle experience, but is it worth the resources, dev time, and upkeep, or is there a much simpler way to tell the story and help the user along on their journey?

Main Project Module

This is a module for a featured project. These projects will have overview videos, and individual page(s) that will give the users the option for more content. It was important to have an overview, and a video view option for this homepage module.

After review there were a couple of changes to this module. We wanted to add in some kind of ‘trust identifier’. The branding of the project wasn’t necessary. We wanted a specific CTA to watch the video. The edited module can be seen below as the ‘featured project module’.

Quote Module

One of the characteristics of this experience that we wanted to maintain was having a human voice. Yes it’s a large company doing sustainability work, but it’s the people and the founders of the company pushing us to do it. Having quotes and elevating those quotes is a must. 

Article Slider

The article slider is a necessary utility for these pages. It can hold deeper related content, outlink content, and works nicely on desktop and mobile. 

Featured Project

Featured project cards are the backbone of the experience. They need to be visual, compelling, feature video, and display the ‘trust’ factor (a.k.a. the news articles). 

Art Direction

With the bulk of ideation behind us, it’s time to begin organizing assets. Plan new photo shoots, and video shoots to support the known content. Anticipate new asset needs and plan ahead for those. Develop a look and feel to remain consistent across the experience.

Art Direction Insights

There are sooooooo many assets for some of the featured projects. Organizing them is a multi-phase process. I’ll make an initial pass, then work together with the content team to narrow down to a final selection.

Because of the emphasis on imagery in this experience there will be the need for new assets. Establishing the look and feel for ‘the hub’ is going to help with that.

Use video whenever possible. The videos should be shorter in length, and provide valuable insights. We can draw some insipiration for the look and feel from existing video assets. 

For some projects we just need to work with what we have. It might not be possible to get new assets, so being flexible and creative is important. 

Protoyping

Create a ‘final’ high fidelity prototype to get final sign offs. This proto still contains some lorem and very little deeper content, but it accurately represents all of the major components and establishes the layout for the development stage.

Iterate, Iterate, Iterate

Part of working on a project like this is knowing the team you’re working with. I know the stakeholders of this project are very visual. It’s hard for them to take drawings and wireframes and reach a decision based off of them. Because of this I know there’s going to be many rounds of designs for each module. 

After each round of edits, I’ll go back and make changes based off of feedback. I’ll also shop designs around with non-team members. I wasn’t able to test with users, but that doesn’t mean testing can’t be done. Getting the perspectives of people not closely involved with a project/product can really help take out any biases from the design process. 

Protoyping Insights

This is an iterative process. Working closely with all stakeholders and being able to validate design decisions is important at this point. 

Start thinking about the hadoff to the development team, and the testing that will need to take place within that process. 

Next Steps

This project is currently under development. For the next couple of months I’ll work together with developers t help the designs come to life. My background in web design and development comes in handy here. Being able to ‘speak dev’ really helps at this stage of the process.

We’ll work on the homepage and one main project page first. The experience is being developed in wordpress, so design changes are quick and cheap. We’ll be able to test the first round of developed experience with users to determine is everything makes sense and the flow is easy to understand and intuitive. Once we have the initial flow nailed down, the rest of the main projects will be developed.

This whole experience will be module based. To that end we’re developing a component library for consistency and ease of expansion. Elements will be used across multiple pages on the site, so we’ll design them once, and be able to re-use them across the experience.

When we’re done with testing and development, I (and members of my team) will go in and build the remaining pages of the site. This will include working together across multiple teams to dill in content, and make sure the information various stakeholders want displayed is going up in a way that makes sense to users.

Final-ish Insights

No project is perfect, making concesions and choosing your battles is a part of every larger project.

Make sure the user stays top of mind for at every step. There was a round of design where the team got caught up in features, and lost sight of what was important for users. We quickly corrected, but if we had gone forward with those designs the end product would have been flawed. 

Start thinking about assets early and often. With content heavy pages and experiences content like imagery and video can really slow down the launch timeline. Factor in these components to the overall timeline, and make sure there’s time for reviews and editing. 

The closer you work with developers and content teams, the more user friendly the final product will be. The UX designer is the person thinking ‘user first’ – not the other team members. I am the advocate for the user, and the more present design is at various stages, the better the experience will be in the end.