Home
Role: UX Designer
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.
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
The following is a list of functionalities and information that the site had to address:
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.
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.
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.
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.)
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.
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.
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:
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:
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.
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.
“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”
“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.”
“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?”
“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.”
“[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.”
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.
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.
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.
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.
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.
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.
This website is live, but is still undergoing continuous iteration. Feel free to take a look.
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).
Here are two other case studies for projects I've worked on.
See my design process. I used a mobile-first and user centered approach.
I designed and developed my first portfolio using rudimentary coding skills.
