PROJECT 1

REDESIGNING A RETAIL WEBSITE

PROJECT SUMMARY

Improve website structure and usability & align the content with business goals

FEATURED TOOLS

Photoshop, Sketch, Optimal Workshop’s Treejack, Google Sheets

PROJECT DURATION

February 2019 - May 2019

THE CLIENT

Alethiah, a CBD product company based in Texas

THE TEAM

I worked with Jeremy Schuler (UX Designer & Developer - http://jeremyschuler.com) and Alethiah’s COO, Natalie Pennington Castellanos

MY ROLE(S)

UX Designer, Content Strategist, Content Creator

Background

Alethiah, a small company in Texas selling CBD products, hoped to gain funding, but needed to revamp their current website. The site suffered from:

  1. A lack of a clear purpose and message
  2. An impersonal and potentially untrustworthy experience, caused by corporate-sounding text and generic stock images
  3. Confusing information architecture, with hidden or absent information
My Role

Jeremy Schuler, who I worked with on a previous design project, asked me if I would be interested in helping him with this project. It sounded like a good design challenge, so I agreed to help with the content strategy and UX design.

Background Research

Before diving into the content strategy, I wanted to get a better understanding of the CBD industry. I started out with background research, focusing on understanding some of the science behind cannabis, so that I could accurately determine who Alethiah’s competitors were.

Competitor Analysis

I then went to work finding competitors, and ended up with eight: six direct and two indirect. I only had a few hours to complete the analysis, though, so I selected four direct competitors and one indirect competitor to focus on.

Next, I set up my analysis spreadsheet, and went to work evaluating the five companies’ websites. For each website, I considered the following criteria, and documented my findings.

  1. Did the website clearly establish its purpose, and maintain a consistent message throughout the entire website?
  2. Did the company depict their products as high-quality and trustworthy?
  3. Did the company use conversational and friendly language?
  4. Was the website aesthetically pleasing?
  5. Was the experience of navigating the website simple and enjoyable?
  6. Did the website engender a personal connection with the users, helping them to connect with and trust the company?
  7. Did the website guide users through the overwhelming and often confusing landscape of cannabis and CBD products?
  8. Did the website showcase the advantages of its products over those of its competitors?

To help make the analysis table more accessible for the client and easier to interpret at a glance, I added a few special formatting features. For each website, I highlighted areas of failure using a red background color, to provide a visual representation of the website’s success. Then, based on the percentage of red areas, I gave each website a letter grade (F for very bad through A+ for outstanding). Lastly, I gave each website an overall analysis, summarizing my findings.

I was asked to present my finding to the client, so I created an insight report, where I listed five key findings that documented the trends that I had observed. I then provided four actionable suggestions that Alethiah could take to improve the content strategy and user experience of their website.

An insight report, summarizing my findings from the competitor analysis
A table comparing the websites of competitors
A table comparing the websites of competitors (click to enlarge)
A table comparing the websites of competitors
Results

Both Jeremy and the client (Natalie, Alethiah’s COO) were pleased with the results of my analysis. It helped us to establish benchmarks and goals for the design, and to begin building a strategy for content that would align with Alethiah’s business goals.

Sitemap

With a clear strategy in mind, our next step was to map out the site. I was tasked with creating a sitemap outline, to organize the client’s current content into intuitive groups, as well as to incorporate necessary content that the current site was missing.

I began by creating five rough categories - Home, Store, Education, About, and Contact. For each page, I brainstormed what information should be showcased in order to:

  1. Orient users within the page and within the website
  2. Provide users with necessary information and a clear call to action
  3. Help users connect with and trust the Alethiah brand
  4. Call attention to Alethiah’s advantages over their competitors

The sitemap outline then went through several rounds of iteration as I received feedback from the COO. She pointed out where content was missing or inaccurate, and expressed preferences over labels and groupings.

For example, the client preferred using the term “Learn” over “Education” for the navigation link to the area of the website that provided users with information about cannabis and its benefits. I implemented the request, but asked permission to do tree testing, to check whether the term would make sense to users. I am currently running simple user tests on Optimal Workshop’s Treejack service, to find out whether users will know what to expect in the “Learn Section”.

Finally, after the client, developer, and I were happy with the way the site was organized, I sketched a visual representation of the page hierarchy. This also helped the client and I make a checklist of all of the content that we would need to create for each page.

The outline of the sitemap that I created for this project
The outline of the sitemap that I created for this project
The sitemap that I created for this project
The sitemap that I created for this project

The outline of the sitemap that I created for this project

The sitemap that I created for this project

Home Page Mockup

As I was working on the sitemap, Jeremy began a rough mockup of how the home page would be laid out. We quickly realized that the copy on the current homepage would not work, and so I was tasked with helping the client re-write it to make their message clearer, and to better connect with users.

Using Jeremy’s mockup, I drafted out appropriate content, and then sent it to Natalie for review. She and I collaborated to modify the text, and we ended with a version that we were both very happy with.

The home page mockup, along with the copy that I wrote for it. This is a snapshot of some of the comments that I received from our client during the review process.
I rewrote the content for the home page, making it more concise and conversational, so that it appealed to all of the target users.
I rewrote the content for the home page, making it more concise and conversational, so that it appealed to all of the target users.

Next, Jeremy created a more detailed mockup, and Natalie and I both provided feedback. I felt that the design had too many areas of dense text, without any graphics to break it up, and Natalie agreed. I suggested that we change and highlight the service icons, incorporate a photo as a background for one of the sections, and add in pictures of the doctors who provided testimonials. I then created a new version of the mockup to illustrate my ideas, and both Natalie and Jeremy were happy with the results.

The home page mockup, along with the copy that I wrote for it. This is a snapshot of some of the comments that I received from our client during the review process.
I rewrote the content for the home page, making it more concise and conversational, so that it appealed to all of the target users.
I rewrote the content for the home page, making it more concise and conversational, so that it appealed to all of the target users.
Sketches and Wireframes for Remaining Pages

Because I had one foot in the content strategy and creation, and one foot in the design and development of the website, I was in an excellent position to plan out the remaining pages. I quickly sketched each page, using a pen and paper, and making sure that the styling was in line to the home page styling that Jeremy created. My main priorities were to structure the pages following good usability principles, and to ensure that all of the content was represented. After iterating on the pages with the developer and client, I created wireframes of the pages using Sketch.

The sketches that I created for the remaining pages of this website
The sketches that I created for the remaining pages of the website

The first sketch for the "About" page

The second sketch for the "About" page

The first sketch for the "Learn" page

The second sketch for the "Learn" page

The sketch for the "Services" page

The sketch for the "Store" page

The wireframes that I created for the remaining pages of this website
The wireframes that I created for the remaining pages of the website

The wireframe for the "About" page, with the modal for the additional bio info for team members

The wireframe for the "About" page, without the bio modals

The wireframe for an example "Article" page

The wireframe for the "From Our Advisors" page

The wireframe for the "Learn" page

The wireframe for the "Services" page

The wireframe for the "Store" page

The wireframe for the "The Science Behind Cannabinoids" page

Further Content Creation

Natalie was so pleased with the content that I had created for the home page that she asked me to help her with the content for the rest of the site. In reviewing and helping to create this content, I was able to ensure that the website copy remained consistent and was written in a conversational tone.

As Natalie received resources from her team to add to the website, such as doctor articles and testimonials and other educational content, I edited each piece. I focused on removing any jargon and any words or phrases that were corporate-sounding, verbose, or pedantic. I ensured that each sentence made sense and was concise, and had no grammatical errors. Above all, I checked that every piece of the copy had purpose and significantly contributed to the overall message.

Finding Time for User-Centered Techniques

The changes that Jeremy and I helped to implement on the Alethiah website were unquestionably improvements upon the older website. However, the project did not leave a lot of room to do user research or testing. As the project lead, Jeremy developed the proposal that Alethiah agreed to, and it did not include user research or testing. Additionally, Alethiah was on an urgent deadline, hoping to improve their site in time to garner financial support from investors, which left little time for coordinating with users during the design process.

As a UX designer, I took as many opportunities as I could to incorporate user-centered techniques into our process, because I knew that doing so would make the website more of a success. Wherever I could, I implemented user-centered techniques, such as when I conducted tree testing for the navigation item, “Learn”. From beginning to end, I also made sure that the user’s perspective was represented and advocated for, and that we didn’t design components solely based on the easiest or quickest path for development, or to adhere blindly to business goals. Instead, I sought to find a balance the users, the developers, and the business that would product a good website that met the deadline.

I plan to remain as a consultant for Alethiah, even after the “phase one” of the website goes live. My hope is that, once Alethiah’s deadlines become less urgent, we will be able to find more time to use UX methods to ensure that the experience of Alethiah’s website is seamless, efficient, and delightful.