Home
DiscoverObjectiveFunctional RequirementsDefineDevelopWireframesDecisionsIterateUsability TestingFutureSolution
Final landing pages for AdamTicknor.com

AdamTicknor.com

Role: UX Designer

Overview

This project was focused on designing a personal website for a client who is an educator on seemingly disparate topics. In addition to the user experience design, I was also responsible for assisting in the content curation, creating a logo, branding, and visual design/UI.


Below I discuss and show some of my process and how I thought about the user, the client and the information he has to impart.

Discovering the Problem

Objective

The ultimate objective is to create a website that the client can use to establish a meaningful online presence. As this is a project which revolves entirely around a single individual, I put together a summary of the important information about the client and his needs. As I went through the design process, I referenced this document to help me stay on track

Adam Ticknor

About:
  • Is an observer, learner and researcher
  • Has been a fitness and wellness trainer for the last 20 years and currently works as the Director of Health and Wellness for Holt Logistics, an international shipping company and the largest privately owned port in North America.
  • Has been teaching body language to individuals and corporations since 2004
  • Is a former Marine Reconnaissance Scout Sniper and has been privately contracting since he left the military.
  • Until now, his clients have been mostly through word of mouth. He’s been quietly successful with a small circle of families and individuals.
  • He’s been trying to figure out a way to gain an online presence without compromising his sense of self.
Goals:
  • Introduce himself to an audience
  • Share this knowledge and experience with a wider audience
  • Introduce interested segments of his audience to his online courses without feeling sales-y
  • To recommend resources to his audience and encourage them to find information in many places
  • Wants his website to feel personal
Frustrations:
  • Users tend to view his knowledge base and disjointed.
  • Doesn’t have the skillset or inclination to design a website for himself
  • Has tried using other website designers in the past and didn’t like or publish the results
Motivations:
  • Wants the information he currently shares with friends and clients to be freely available to anyone with an interest
  • Wants to have a place to direct people. He often gets the same questions from the same people over and over again.
  • Wants people to be able to go to his site and find the information at their own pace. 
Delineated client information. I used this document much like I would a user persona.

Functional Requirements

The following is a list of functionalities and information that the site had to address:

  • Navigation method between all pages
  • Website needs to be designed to share the following information:
  • Body Language
  • Rehab
  • Nutrition
  • Fitness
  • Survival Skills
  • Tactical Skills
  • Bio/About
  • Contact Information
  • Resources (guest blog posts, videos, TV shows, Books he’s contributed to)
  • Resources (recommended books, videos and websites
  • Blog Page
  • Navigation to education Platform/courses

Challenges

The User 

Adam’s audience had been in-person so there was no direct audience data. I knew that individuals coming to the site would be interested in one of the topics addressed in the copy or interested in Adam. There are also separate audience segments for each of the topics, some of which overlap. 

Content

There was no copy for this website. There were no online courses. There was no logo and no brand. 

Adam had an old blog, had been invited to guest write for some other blogs, and had spoken on a couple podcasts. He has a lot of information to share. I knew this would be a text heavy website. As part of the project, I would work with Adam to discuss and decide what should be shared and how to pare down and present the information in a manageable way for the audience.

Competitive research

There is no other website covering all of these specific topics and so there is no direct competitor. I did due diligence and researched competitors in each topic field. The other sites gave me insight into the current standard for navigation, layout and usability.

Define the Problem

New users are not going to be familiar with Adam or how he connects the vast and varied information that he has to offer. Users will need the information to be presented in an understandable and digestible way so that they can get the information they came for without getting overwhelmed.

To address this first hurdle, I plan to chunk the information into four or fewer categories so that users can remember the topics and navigate between them more easily. Additionally, I intend to make the lists of resources more user-friendly by presenting them in a visual manner, rather than only in text (links, book titles, etc.)

Developing the Design

Basic Architecture

I analyzed all the topics/information that the website was to address. After assessing and reading all the planned information, I grouped all the topics into three categories, as shown below.

Survival & Tactical

  • Survival Skills
  • Tactical skills

Health & Wellness

  • Rehab
  • Nutrition
  • Fitness

Body Language

  • Body Language

Sitemap

Once the main topics were grouped, I looked at the rest of the information and built a sitemap which would encompass all the necessary information and functional requirements in a logical manner.

Initial sitemap
Initial sitemap

After some thought, sketching wireframes, plotting content and mapping how and why a user would navigate from one page to the next, I refined my sitemap.

I wanted the site to be easily navigable and streamlined, so I wanted as few pages as necessary. In order to reduce cognitive load for the user:

  1. Removed the “about page” and places topic-specific bios on each page instead.
  2. Removed the “contact page” an contact information to the footer of each page. I fixed the information to the bottom of the page so that it’s available for users when they need it.
  3. Removed the blog page from the landing page navigation so that it’s only accessible after the user has navigated to one of the three main pages.
Final sitemap
Final sitemap

Wireframes and Mockups

Desktop Home page wireframeMobile Home page wireframe
Landing page low-fidelity desktop and mobile wireframes
Desktop Body Language page wireframeMobile Body Langauge page wireframe
Body language page low-fidelity desktop and mobile wireframes
Desktop Blog page wireframeMobile Blog page wireframe
Blog page  low-fidelity desktop and mobile wireframes

Design Decisions - Features and Visuals

Navigation

My goal was to streamline the navigation as much as possible. I didn’t want users to have to scan through a bunch of options and think about where they had to go.

I could see two ways to do this:

  • Keep nav the same on all pages but visually denote the current page by changing the color/denote it visually
  • Remove navigation items when on the corresponding page.

I wanted the navigation bar to give as few options as possible, so when the user is on a given page, that page is not an option on the nav bar until the user navigates to a different page.

For the mobile versions of the site, I decided against hamburger menu. I did not want the options to be hidden. Removing the current page from the navigation bar also made it easier to fit all the options into the navigation bar in mobile.

Resource Grid

I wanted to make links to resources seem more tangible. Adam had a lot of links to books, articles and PDFs included in the copy. I thought making visual representations of the items might make them easier to scan and remember. The most efficient use of screen seemed to be a grid. Users are used to grids from popular apps such as Instagram. There are at least two grids of books, articles and PDFs on each of the main topic pages. I think this also gives a bookshelf feel, which is very in-line with the background of bookshelves Adam currently uses for his educational videos.

Screenshot of the resource grid on the Health and Wellness page.
Screenshot of the resource grid on the Health and Wellness page. This grid features an image for each resources and when clicked, will take the user to a link where the users can buy or learn more about the item.

Iteration

Usability Test Objectives

  • Identify if there are issues with the user experience of the site
  • Determine if the the website easy to navigate
  • Find out if the user understands the purpose of the website
  • Discover if users can find information they are looking for

Summary

What Went Well?

“I like the color scheme. It feels militant without being too on-the-nose”
“I like the book grid, it’s easy to see everything”
“Good ergonomics, interesting yet not overdone graphics and images”

What Went Badly?

Finding the Online Course
“I feel like if you’re selling something, you should let me know right way. I have to scroll down to the middle of the page to get there.”
Blog Page
“All the blogs are on one page? I wish there were pictures. Oh you can sort by topic, that’s cool. ”
“I do like how this expands and closes and that all the info is on one page. I don’t have to go back a page to read the next..but there’s only three blog posts now. Will I have to scroll all the way down? And how do I send a friend a link to a blog post I like?”

What's Left?

Landing Page
“I don’t feel like there’s enough information on the landing page. There’s no logo and I don’t know where I am.”
“Oh, I like the landing page, he looks like a book author and it’s very simple”
“I’m getting a cross between a surfer/ski bum and REI mountain man - but not serious in nature. I would like to see a more buttoned up version of him.”
Navigation
“[the navigation] Seems pretty easy”
“I don’t like the logo in the middle [of the navigation], move it to the left where I’m used to seeing it.”
“I’m not sure how I feel about the navigation, that it changes when I switch pages.”

Future Iterations

Two main updates made based on participant feedback are discussed below. These are not the only changes that were made, but they are the most visible.

Course Notification Bar

Originally, the online course page could be reached by the "Education" link in the navigation bar from all pages and from a CTA on the Body Language page. Some users found these navigation methods quite easily, however a few were unsure that there even was an online course available because the button and video for the body language course was so far down the page.

The client does not want to move the course above the fold where it would be easier to see. He wants users to know that the information provided for free in the site is just as important.

So, a notification bar was placed at the top of each main topic page and on the landing page. If a user dismisses the bar, it doesn’t show up again on any page for three days. When other online courses are added, the bar will be updated to reflect changes.

Screenshot of the Home page with the online course banner and CTA at the top.
Screenshot of the landing page with the online course banner and CTA at the top. Call to action will take the user to the course landing page.

New Blog Page

The blog page was changed almost entirely. Users liked that they could sort the posts by topic, but didn’t like that the posts were all on one page. Each post has been given its own page and the blog landing has redesigned so that each blog has its own card with a picture and relevant information.

Giving the blog post their own page also means that users can share specific posts with each other more easily, which may improve traffic.

Screenshot of the revised blog page.
Screenshot of the revised blog page. Each card will bring the user to a separate and corresponding article.

Moving Forward

The next steps in this project are more user testing and iterations. This project doesn’t have the budget for formal user testing methods right now.

The study topics and objectives for the next tests will be shaped by user feedback, but two issues that will be addressed are the landing page and navigation.

Landing Page

There was mixed feedback from participants on the landing page. Some liked how simple and clean it is. Others think it doesn’t have enough information and is unnecessary. I need to do more research and dig into the issue. Before that happens, I do plan on prototyping and updating the page to include the logo.

Navigation

Based on the preliminary user testing, 80% of users aren’t confused the navigation. One user specifically mentioned that they weren’t sure about it/didn’t like it. Another participant specifically said that she liked how the navigation changed.

The navigation needs iteration, but it’s currently unclear what exactly needs to change. It would be simplest to just follow common patterns and put the logo on the left. I originally put the logo in the middle to separate the topic pages from the blog and education pages. I plan to do more user testing after prototyping some possible solutions.

Solution

This website is live, but is still undergoing continuous iteration. Feel free to take a look.

AdamTicknor.com

Tools

I built this site using:

Webflow IconPhotoshop IconVectornator IconNotability Icon
Webflow
Photoshop
Vectornator
Notability

In addition to building the website with Webflow, I also used it to create high-fidelity mockups and to prototype the site in lieu of using AdobeXD. I did this because I wasn’t familiar with the capabilities and limitations of the tool. I didn’t want to spend time into creating high fidelity prototypes just to discover that what I wanted to build wasn’t possible or within my capabilities. Webflow has a feature which allows you to publish a site to a staging URL, which allows testing of interactions as they will actually occur. User testing can be conducted using the staging site, which makes catching and fixing errors more accurate and more efficient.

I’ve since reverted to using Adobe XD to create a mid/high fidelity wireframes and mockups. However, when building sites using Webflow, I will continue to use it to prototype. When all the interactions are completed, I can publish directly to the real URL and it’s live (unless I’m using another hosting service).

Want to read more?

Here are two other case studies for projects I've worked on.