UI/UX Case Study: Author Website — What does a writer need to promote their work & build a fan base?
As an active part of the #WritingCommunity on Twitter, I’ve spoken to many authors about their online presence and the struggles they have to set up a website.
It seems the main problem is that there are too many choices authors need to make to go from having no website to having a functional and easy-to-update online home for their work. There are indeed decisions each author has to make for themselves, but there are also ways to make the process less daunting.
This project was born as a result of conversations with authors who asked questions like:
- Which platform should I use?
- What should I put on my website?
- Which colors are right for me?
- Which font should I use?
- Do I need a blog or do I just use a newsletter or Twitter?
and more.
Most questions have no right or wrong answers. However, this case study is a deep dive into some of the best practices when it comes to designing a website for an author. By learning more about the reasons behind the design decisions, authors can make informed choices, avoid decision paralysis, and set up a website that works for them and their readers.
Description
Online space for new fiction writers, where they can put their work and all their projects for readers, agents and publishers to discover. For this case study, I’ve created a website for a traditionally and self-published Young Adult (YA) fiction writer.
My Role
- Research
- Web Design
Tools Used
- Figma
- FigJam
- Photoshop
- Canva
Understanding the Problem
Challenge
The challenge of this project is to design a website for a fiction writer, that is simple enough so the writer can change and maintain it themselves, but also flexible enough to style it however they want by adding or removing needed content.
Unlike nonfiction writers, who almost always have blogs and thus a functioning website they update on a regular basis, most fiction writers shy away from setting up an online base of operations.
This is a wasted opportunity to connect with readers. Every creative pursuit needs an engaged community to be sustainable, both emotionally and financially. Having a website can help writers build a solid fan base.
The reluctance of fiction writers to set up a website can, in most cases, be attributed to three reasons:
- no budget
- no design or technical skills or
- no time and/or no mental space.
The good news is that owning a domain and building a simple but functional website has gotten a lot more affordable in the last five years.
The bad news is that there are so many website-building platforms out there, so many templates, that writers now face decision paralysis when it comes to putting their work all in one place.
And when they do attempt to create it, the pages often end up cluttered, doing the opposite of promoting their work and growing a fan base.
This case study came to be as a result of a discussion with authors who have no clue what to put on their websites. As both a designer and a writer I was in a unique position to understand their frustrations and look for a solution.
The second challenge of this project is to find the middle ground between what the author wants to share with their audience and what their readers actually need to see, to be able to fall in love with the author’s work.
Goals
- Find out what an author’s website should include so it can do an excellent job of popularizing the author’s work and helping them build a fan base.
- Explain the reason behind each component so each author can decide what to include and what to leave out, depending on their unique style and readers’ expectations.
- Create a modular website template authors can use as an example when building their websites on a chosen platform.
Requirements and Restrictions
- The website template must fulfill the needs of the readers and meet the author’s needs while being easy to build for those who might not have any grasp of design concepts.
- The web design concept must be flexible enough to allow for modifications, both functional and aesthetic.
- The website has to be platform-independent. A poll I did on Twitter (see below) showed that authors use different services for their websites so the design needs to transcend specific features and focus on the functionality and the reasons behind each element.
Research & Analysis
The initial research was supplemented with authors’ interviews and polls. However, one thing to keep in mind is that in this case, the authors should be considered “unreliable narrators” because they might not be aware of the wants and needs of the other user of this case study — their readers.
I asked the #WritingCommunity on Twitter what they think they need on their website and what they don’t really care about. These are the results:
✅ Must Have:
- About the author (10 votes)
- Images of the books (9 votes)
- Separate page for each book (5 votes)
- Blog (5 votes)
- Link to shop (4 votes)
- Social media links (4 votes)
- Contact (3 votes)
- WIP progress updates (3 votes)
❌ Don’t Care
- Podcast (7 votes)
- Patreon link (4 votes)
- YouTube videos (4 votes)
- Author’s portrait (3 votes)
- Newsletter link (3 votes)
As I pointed out above, this is what authors think they should have on their websites. Whether or not their readers want to see the same elements there, is something that must be determined for and by each author.
For example, a fantasy author with tons of lore and worldbuilding behind their work is almost obliged to include maps and wikis on their website. On the other hand, an author writing literary fiction about women’s rights might want to highlight the social causes they are actively supporting.
The questions each author needs to think about are these:
- What does my reader expect to find on my website?
- How to make them happy and engaged when they visit?
- What do I want to share with my readers to help them fall in love with my characters and stories?
Personas
This case study is focused on the creation of a website for a YA author, who has one traditionally published book coming soon, three self-published books already out, and publishes a serialized novella for free on a weekly basis.
However, there are two personas for this case study — the author and the reader. The needs of both must be taken into consideration when designing the website.
Sam (The Writer) — 26, they/them, YA author
Sam works as a brand manager at a marketing company and publishes YA books under a pen name. Their first three novels were self-published and their upcoming one is being published by a traditional publisher. They also publish a serialized novel on Patreon. They have a linktr.ee page but this writing thing is getting serious so they need a proper website.
Likes:
- comic books
- writing first drafts of stories on paper
- new notebooks (one for each new story)
- coffee early in the morning
- libraries and old books
- open spaces full of light
Needs:
- a place online where they can showcase all their projects
- a simple website where their readers can buy their books, read free chapters and support them on Patreon
- an online home where they can share news with their fans
Hates:
- wasting time learning new tech yet again
- trolls
- plot holes
- clutter
- not finding the information they need on Google
Anne (The Reader) — 19, she/her/any, student, YA reader
Anne is a first-year psychology student. She loves reading anything YA and has a YouTube channel where she posts a video each week reviewing the YA books she has read.
Likes:
- working with people
- LGBTQ+ romance novels
- her “extra” friends and the wild adventures they go on
- soppy rom coms
- jogging and dancing
Needs:
- to be able to follow their favorite authors online, and not just on social media
- to know more about who’s the person writing some of her favorite books
- new stories as often as possible
Hates:
- notifications on her phone
- bigots, homophobes, bullies
- having nothing interesting to read (almost never happens)
- blinking ads on websites
- waiting for sequels of her favorite stories
Sitemap
The main focus of this case study is the landing page. To make sure the most important information is seen and the intended actions are taken, information is displayed on the first level, reached easily through simple scrolling.
However, all important information is doubled — once on the landing page and once on a separate page (2nd level). This might be redundant for some websites, but not for this one.
This website is a hub for everything the author has to offer — their work, their story, their contact info, their activism, etc. Each piece of information needs to be accessible regardless of where the reader is currently on the website.
This is the sitemap for the whole website. In this case, redundancies are a great way to make sure the readers are able to get the information the author wants them to get wherever they are on the website.
Goals of the website:
- help build a fan base around the characters and the stories
- sell the author’s work
- build the author’s brand and community around their personality
Sketches & Wireframes
The landing page contains the most important information. Each additional page can duplicate this information and expand upon it.
Here’s the initial idea for the landing page:
Wireframes
Navigation: It can contain more than the usual 4–5 links because readers are used to seeing larger navigations on news sites and other websites they go to for reading. The top navigation contains the pages the reader needs to see first to be turned from a casual visitor into a devoted fan.
There are no social media links in the navigation. The assumption is that this is where a user comes from and not where they want to be sent a second after landing on the website.
Module 1: The first module is the thing the writer wants to put the main focus on. It could be a newsletter sign-up form, blog posts and news, upcoming events, the latest chapter of a serialized novel, or in this case, an upcoming book.
Module 2: Most writers I interviewed felt that their personal story was one of the most important things to be featured on their websites, so the second module is an about section. And if we believe that there are no original stories, only original points of view, the author’s story becomes vital for their brand building.
Module 3: This module is a sample of the author’s work. In this case, it’s a full chapter of a serialized novel, but it can be a sample chapter of the upcoming novel, a short story or an essay by the author. Any work that gives a taste of the author’s style and allows the reader to dive right into a compelling story is welcome here.
Module 4: News, shared as blog posts, and events people can add to their calendars are a way to keep readers visiting the website regularly and engaging through comments and likes. This module is a snippet of the latest posts.
Module 5: This module is a full or a partial book collection with links to buy the author’s work on Amazon, directly through the website, if the website building platform offers an e-commerce option, or through other book stores.
Footer: The footer is where the rest of the links can be found. Just like the top navigation links, these can be reached from anywhere on the website. However, they are less important for building a fan base of readers and meant more for agents and publishers, who might want to get in touch with the writer.
This is where the social media links can be found. Once the user has seen the whole page and taken the actions planned for them, they can navigate away from the website, if they wish.
Other modules: These are the modules I have chosen for this author based on their work, reader base and style. However, more modules can be included on the landing page and as separate pages:
- Maps & wikis for the world
- FAQ
- Social causes
- Podcast
- WIP progress and updates
- Awards
- Reviews and press (as seen on)
- YouTube channel
- Social media links
All modules can be moved up and down the landing page, depending on the actions the author wants their readers to take and the information they want to share at any given moment.
Designing a Solution
The main concept for this website is based on having modules authors can include or leave out depending on what they and their readers need at any given moment. The solution is built around this concept.
Design System
The main goal of this design system can be described as “inviting people to stay and read”. Making the website feel like other places the user is likely to spend hours reading was essential. This is the main motivation behind each design choice.
The other thing to consider was, how easy it will be for this design system to be adapted to the needs and style of another author’s brand. The elements and components needed to be kept flexible but not too simple or “underdesigned”.
Branding
A mistake I see made time and time again by authors is going for flashy, overdesigned logos. These are usually distracting and look quite unprofessional.
With so many great fonts available, both premium and free, creating a simple, yet distinctive logo requires just a little time to try out different options. In this case, I’ve used a free Google font called Viaoda Libre.
Fonts
Another common misconception amongst writers is that script fonts are suitable for their websites. Some authors think they look like handwriting and remind them of the writing process, some find them “romantic” or “cute”. However, script fonts are hard to read and should be used only for decorative accents, or better yet, not at all.
For this website, I have chosen three fonts. This might be too much for some websites, but not for this one. In a text-heavy website, having different fonts makes it easier for the reader to recognize different information and focus on large pieces of text.
- Marcellus in all caps for headlines
- Futura in all caps for buttons and small sub-headlines
- Adobe Caslon Pro for body text
Colors
The one thing this website needed above all else is white space. If the goal was to encourage users to read directly on the website, engage and be part of a community, the design had to remind them of other reading environments the users already knew and liked.
The major colors are white for all backgrounds, black for all text, and grey for the separator lines.
After this, each author is free to choose their accent and highlight colors. Since this is a website for a YA author, I have chosen bright and bold brand colors, in tune with the Gen Z color trends. The colors are used for all book covers and more sparingly on the website itself so the book covers can stand out.
However, this must not be the case for every author. This website concept allows for modules, buttons and headlines to be brightly colored. I have chosen the more moderate approach because I wanted to encourage reading directly on the website. If this is not the author’s goal, then colors can be used for backgrounds and other elements.
Book Covers
The book cover designs were created for the case study using Canva graphics and Photoshop mockups. There are plenty of book mockups available for Canva, Photoshop and Figma and these are just an example of how to create a consistent-looking library.
Grids
I have used the Bootstrap grid system, with three breakpoints and I have made all three screens responsive and easy to resize. As I’m working my way through a WebDev Bootcamp, I might use this design for my HTML/CSS and Bootstrap project.
Components
The Solution
The final solution for this YA fiction author is a minimal website peppered with bright color spots to guide the attention and the actions of the user/reader.
This is one solution for one author. However, each module can be skipped, or extended, or more modules can be added using the design system above. Depending on the needs of the author at any given time, the website can be changed without rebuilding any of the components.
Evaluation & Conclusion
Key Takeaways
- Even though no two authors are alike, most authors need the same core modules on their websites.
- Authors ought to consider readers’ needs. They should put the stories and the characters front and center and highlight how they can inspire the readers.
- An author’s website should be more about creating a fan base and a community, and less about selling books. Soft marketing is usually a better strategy than hard sales when it comes to promoting creative work.
Next Steps
The next step will be to build the website as a template on various platforms such as Webflow, Squarespace, Wix, Showit, Tumblr, etc., and offer it to authors to use and test.
Some authors may not require more than the landing page, a blog and the book pages and some will need wikis, forums, event pages, and more. However, all pages can follow this module-based approach and use the same components as the landing page.
Conclusion
The case study part may be over, but I will be sharing the results and the templates with the #WritingCommunity on Twitter so all current and future authors may benefit from them.
Thanks for reading!
