top of page
CTR_Mockup.png
create the remarkable logo.png

UX DESIGN CONSULTANT

Client: Create The Remarkable  - B2B2C Media Production

Responsive Web Redesign

Spring | Summer 2020

ROleS

UX Researcher & Designer

UX Writer

TOOLS

Calendly, Zoom, Miro, Notion, LucidChart, Google Forms, Google Slides, Square Space

METHODS

Stakeholder Interviews, 

Heuristic AuditSite Maps, 

Task FlowsCompetitive Analysis

User Interviews, Affinity Maps, Persona, Design Studio,

Paper Sketching, Usability Testing, Style Guide, Content Writing

TIMELINE

3 Months

SUMMARY

Using a research-first approach, I designed a responsive website for Create The Remarkable, a M/WBE-owned media production company based in Brooklyn, NY that creates video & photography content for social-impact organizations. 

 

My biggest takeaway was how vital it was to the user experience to strengthen the brand narrative by providing better clarity, credibility, and context, in conjunction with their showcasing their services and products. There was a rich story missing!  

 

Using SquareSpace as a hosting platform, I removed all template presets and designed using a blank canvas. By including new navigation, clearer information hierarchy & taxonomy, new copy, a new style guide, and introducing interactions, I made it much easier for users to understand the story of the brand.

 

Traffic on the redesigned site increased by 34% in the first 60 days after launch, and user testing showed a 150% increase in user satisfaction, 66% increase in ease-of-use, and indicated new users were 60% more likely to reach out to the business.

​

​

PREVIEW THE REDESIGN

Watch a short walk-through of the redesigned website.

HOMEPAGE : HIGHLIGHTS

All content on the original website existed on a single scrolling homepage with a hero video at the top, and duplicate pages built into the navigation tabs.  A cleaner homepage uses an updated hero videowhite space and sections with headers to give users a preview of what else they should expect to find on the site, with obvious CTAS buttons and navigation tabs to take them there. 

CTR_Homepage_original_05_01_2020 (1).png

Homepage - BEFORE

Homepage for Case Study.png

Homepage - AFTER

Research: The Business

UNDERSTANDING

THE BUSINESS

ARTICHOKES, RAPPERS, and $1 BILLS: CONTENT WITHOUT CONTEXT

I started my work for this redesign project with a scored heuristic evaluation of the existing desktop site to familiarize myself with the business, and gain a qualitative and quantitative understanding of what the experience of the current website is like from the perspective of a prospective client (the user). 

CTR_Heuristic Scoring Graph.png

Despite an interesting banner video on the top of the homepage, it wasn't immediately clear what the brand did based on the content and organization. The video had no clear context, the text overlay was hard to read and blocked the video, and the entire website existed on a single anchor page. 

The site initially earned a good score for credibility, trust, and brand value by listing their notable clients, but findability was compromised, as the list was buried in the "About" section making up a visually dense block of text at the fold.

Credibility of the creative team was also diminished by use of an unclear, partial headshot

Based on the absence of labeling, unclear taxonomy, and wide variety of images making up the site's current portfolio content, the evaluation also pointed to high potential for confusion and unclear expectations about the types of clients the brand typically works with, who the content meant for, or what purpose it serves. 

As a production company providing both a service and a product to non-profits and government agencies, the evaluation showed that while users could see examples of finished media products, they were not able to find information on any technical production services.

For a brand with "Remarkable" in their name, my experience was rather...unremarkable. 

CTR_Homepage_original_05_01_2020.png
CTR_Homepage_original_05_01_2020.png
CTR_Homepage_original_05_01_2020.png
usability test.png

KEY TAKEAWAYS

According to best practices and heuristic scoring, users were likely to lack significant context when visiting Create The Remarkable's website, but to find out if this was true, I conducted a round of baseline usability tests.

CAN USERS COMPLETE BASIC TASKS?

To evaluate how the website's usability fared for real users, I tested 3 users in a scenario and set of 4 tasks developed to validate or invalidate my assumptions from my heuristic evaluation. 

Insights from testing confirmed that:

users are unclear on brand story, target audience, and final product

services, brand credibility, and specific examples of work are difficult or impossible to find

"It's emotionally promising, but I don't know what I'm looking at, or what they do." - User feedback

TASK SUCCESS RATE: 

 

SATISFACTION:​

​

EASE OF USE:  

​

LIKELIHOOD OF

CONTACTING

THE BRAND:

25%

2/5

3/5

2/5

low speed.png
CTR_Task Flow_Original.png

ORIGINAL SITE TASK FLOW: 

The endless loop of searching for a specific video

lightbulb 2.png

KEY TAKEAWAYS

My heuristic evaluation and usability testing indicated that changes to the information architecture, labeling, titling and copy, and designing a more cohesive visual & written narrative would improve the user experience.  But before I could start designing, it was important to talk directly to stakeholders as part of my research. 

TALKING TO STAKEHOLDERS:

THe THREE w's

1. WHO

2. WHAT

3. WHO

As an entrepreneur turned UX designer, my conversations with small business owners are often revelatory. I get a backstage look at the brilliance behind the brand, and when I ask the right questions, I usually find a lot clarity on what's missing from their online presence. 

​

Even if their current digital presence isn't telling or showing me, these are the conversations that help me understand who the business is, what kind of work they do, and who they help or serve. 

Because I learned from my earlier research that the site was lacking clarity on brand story, target audience, and final product, I developed questions that would help tease out a better understanding

What makes your business unique? 

What do you bring to the process as a creative team?

What type of clients do you work with?

What purpose does your product serve?

Talking to owners helped me gather direct insights about the business and their goals that weren't clear from heuristics or baseline usability testing:

BUSINESS

Most of their clients are in

non-profit, government, and education; they also do some commercial work 

They want a web redesign that feels more aligned with their name and helps drive new leads

They are a B2B2C business: Content developed for clients is then used to raise awareness  and secure funding from donors 

They care a lot about building community with their clients and projects - who they are is just as important as what they make

KEY TAKEAWAYS

storytelling.png

The feedback I got from stakeholders helped to guide my development of voice, tone, copywriting, and visual brand story later on in the design phase of the project.

​

Additional feedback on photography - combined with confusion and feedback during baseline testing that the selection of portfolio images seemed unrelated - led to my recommendation to exclude commercial food photography from the redesign, because it was not their primary work, detracted from the brand story, and had potential to be used in the future on a "sister" website. 

COMPETITIVE ANALYSIS

I finished my business research by doing a competitive analysis to find out how similar brands were helping users find clarity and context, and also choices to avoid. 

Screen Shot 2020-08-14 at 7.41.32 PM.png
Screen%20Shot%202020-05-23%20at%207.18_e

Text and list-heavy content that describes services and project workflow are delivered like an infographic, using color, icons, and white space to help break up the page. 

Screen Shot 2020-08-15 at 7.47.46 AM.png
luminous_workflow.png

Testimonials or Reviews - a "trust must" feature for any business.

testimonials.png

Clickable v. not-clickable is unclear when titles and CTAS are the same color

Some colors combinations are

low-contrast, making text difficult to read.

luminous_low constrast colors and CTAS.p
noun_boxing_1599858.png

KEY TAKEAWAYS

Overall, the competitive analysis showed that infographics and a testimonial feature were beneficial to communicating with users. It also showed that CTA buttons are a valuable interaction and help guide the user, but only if they are easy to see and quick to interpret

TAKEAWAY suMMARY: 

HOW DOES IT INFORM DESIGN FOCUS?

Overall quantitative and qualitative research conducting heuristics, baseline usability testing, stakeholder interviews and competitive analysis pointed to a lack of story, clarity, context, informative details, and style for a brand who actually had significant value, credibility, empathy, and history of work.  

 

My list of broad design recommendations to strengthen the narrative was forming:

  • Strengthen the narrative with a UVP, expanded copy & style

  • Provide more details on the creative team and their process

  • Establish new taxonomy and labeling for portfolio pieces

  • Make info and points of value easy to find

But I still needed to talk to clients. 

Research: The User

UNDERSTANDING

THE USER

DISCOVERING NEEDS, PAIN POINTS, AND EXTRA VALUE

At this point I had learned a lot about the business, and I wanted to know more about the actual users. Who are their clients, and what do they need? 

What else can I learn from their experience with the brand?  

I interviewed 6 clients from non-profit, government agency, and educational organizations, asking questions related to the following topics: 

Experience working with the brand and owners 

Experience

using the website

Content goals as an organization

Impact of

COVID-19 on the organization's needs

Synthesized data lead to the following insights:

They have a lot of internal responsibilities, and need to work with a team who can help manage the process

They feel confident about approaching a vendor when they can see past clients and read reviews

They want to see a diversity of topics and goals when viewing portfolio work

They need a compelling yet sincere end product to show potential donors

USERS

CTR_Persona image.jpg

KEY TAKEAWAYS

Insights from client interviews led to more specificity on what features to integrate to address the broader design changes I was already considering to strengthen the overall narrative of the brand. 

  • use a logo grid to feature past clients

  • direct quotes from clients as testimonials

  • expanded bios for the creative team

  • update content to show range 

  • copy to indicate added service value, like project management

  • feature portfolio content in a way speaks to B2B2C goals

Designing A Solution

DESIGNING

A SOLUTION

STRENGTHENING THE NARRATIVE:

HOSTING A "UVP" DESIGN STUDIO

As a way to do some rapid creative brainstorming and encourage buy-in, I led a remote design studio with stakeholders to generate words and phrases for the site's UVP for the homepage. 

​

To help with brand positioning, I asked questions that were similar to earlier in the process, like "What do you make?" and "What is the purpose of your work?" 

UVP design studio

​The results of the studio were effective in 3 key ways: 

​

  1. I wrote a UVP that spoke to the B2B2C audience

  2. I did it using language that resonated with stakeholders

  3. Bonus = "leftover" vocabulary was used in section titles!

STRENGTHENING THE NARRATIVE:

​

COPYWRITING & VISUAL IMAGERY

I knew that strengthening the narrative of the brand and improving clarity and understanding was going to require clean, energetic styling and several different types of copy in the redesign

I used a combination of creative, persuasive, and functional writing to draft a UVP, header and section titles, body copy, and labeling for portfolio pieces, returning to stakeholders with questions when I needed more detail for bios and portfolio assets.

CTR_Homepage_original_05_01_2020 (1).png

"About"  -  ORIGINAL COPY

In the original, users needed to weed through dense text and lists to learn more about the company, creative team, and past clients.

Homepage for Case Study.png
Client Logo Grid_2020_08_10.png

"About"  -  NEW COPY + VISUALS

New copy introduces readers to the brand on the homepage in 4 short sections divided by white space, an vibrant image chosen to reflect the brand's connection to their community, and an attention-grabbing logo grid to feature past clients. 

 

Each section is titled with copy written to help the reader understand what kind of information to expect in the body copy.  

 

Body copy emphasizes clear and concise details on what the business does, services, and a bit about their creative process and approach. 

CTR_The Team_original_05_01_2020.png

Team Bios  -  ORIGINAL COPY + VISUALS

In the original bio, users get a general sense of the creative team's values, but offers little credibility on their background or expertise.  The headshot is cropped and stylized in a way that confused users and undermined their trust during early usability testing.  

CTR Redesign_About.png

Team Bios  - NEW COPY + VISUALS

The separate bio page uses current, professional headshots and provide details on the creative team by expanding on their roles, strengths and industry history, quantifying experience, referencing awards and achievements, and emphasizing their community values.  

STRENGTHENING THE NARRATIVE:

TESTIMONIALS = TRUST

Adding testimonial to the new site gives users direct insight on what working with the brand is like, and helps build confidence and trust. 

CTR Redesign_Testimonials.png

STRENGTHENING THE NARRATIVE:

NAVIGATION, CONTENT HIERARCHY, & LABELS

To keep mental processing order consistent for the user, I set the hierarchy of the homepage sections and related CTAs buttons to appear on scroll in the same order as the primary navigation.

homepage hierarchy

The original site was built as a single page; primary navigation tabs functioned as anchors for the various sections of the page. A UVP-style message blocking the hero video is hard to read and doesn't help provide context. 

The redesigned site uses navigation and CTAs to link to different pages. The UVP is large, easy to read, and located directly under the hero video it supports. 

The homepage introduces the brand by sectiongiving the user clear expectations on what they will find on the rest of the site, and revealing information in order from broad to granular

CTR_Homepage_original_05_01_2020 (1).png

Homepage - BEFORE

Homepage for Case Study.png

Homepage - AFTER

The original site's portfolio section lacked labeling, making it impossible for users to know what they were looking at. 

CTR_Homepage_original_05_01_2020 (1).png

Video Page  -  ORIGINAL

The redesign grouped and titled videos by the purpose they fulfilled for the organization.

​

Individual videos are labeled first by by the organization name, and then by the campaign title for the project.  

CTR Redesign_video.png

Video Page - NEW

STRENGTHENING THE NARRATIVE:

SETTING A STYLE & FEEL

I chose a new color palette and typeface for stakeholders, based on their feedback that they wanted a serif font for headings, and brand colors that resembled "sun & sky".

CTR Palette 3A.png

Playfair Display

Open Sans

For headers, titles, and labels, I chose Playfair Display Bold - a polished, upbeat typeface that stands out and is easy to read at heavier weights and large sizes.

 

For body copy, I chose Open Sans Regular, a san-serif typeface that is easy to read at smaller sizes and when there is more text present.

 

I set the color palette to have high enough contrast to meet the minimum accessibility ratio (4.5:1), using Sunray as a vibrant primary color for CTAS and infographics. 

STRENGTHENING THE NARRATIVE:

SQUARE SPACE CONSTRAINTS

Although Square Space templates all come with a pre-set layout, I deleted all of the demo template blocks and started from scratch to customize the new site

Templates also come with pre-set options for customizing styling, so if you want specific customization that isn't offered within the template, it requires a bit of coding:

I found the pre-set hover interaction for CTA buttons was too low-contrast for a user to really notice, so I added custom CSS to change the hover color from light yellow to black. 

CTR_custom CTA on hover.gif

FINAL DESIGN PREVIEW

Watch a short intro to the site below, or visit the live site here

Next Steps

NEXT STEPS

After launching the redesigned desktop site in August 2020, I plan to explore the following next steps:

MUST HAVE

  • Monitor KPIS reguarly: check data on site traffic and # of new leads on a quarterly basis over the next 12 months.

NICE TO HAVE

  • Add a "Reviews" page to the site and integrate Trust Pilot or a similar service as a method of collecting more extensive client reviews; add CTA to the testimonials section on the homepage to direct traffic to the page.

​​

bottom of page