01. Research

To fully understand how to improve the landing page, I first wanted to know the product and its main competitors. I met with the company's stakeholders and asked about the goals (both long and short term), what he liked or disliked about the original landing page, the competitors, and any user feedback he had already received.

I then conducted a competitive analysis of Roll20, Mythic Table, and D&D Beyond to get a better idea of what made TableRaven stand out and how to present the information in an easy-to-read format for the user.

Competitive analysis of Roll 20, Mythic Table, and D&D Beyond using Figjam

To fully understand how to improve the landing page, I first wanted to know the product and its main competitors. I met with the company's stakeholders and asked about the goals (both long and short term), what he liked or disliked about the original landing page, the competitors, and any user feedback he had already received.

I then conducted a competitive analysis of Roll20, Mythic Table, and D&D Beyond to get a better idea of what made TableRaven stand out and how to present the information in an easy-to-read format for the user.

The user feedback he had received included the following:
• Users were unsure of what TableRaven is
• Users were unsure of the cost, making them hesitant to sign up

TableRaven, the application, was much more developed than the website, and I wanted to keep things consistent between the website and application to reduce any learning curves for the user. I reviewed the current app state thoroughly and made a brief design system to follow using Figma.

Simple design system referencing the TableRaven web application, created using Figma

02. Ideation

The insights gathered from the research presented one main problem: Users did not have enough information about the application to want to create an account and start using it.

The competitive analysis of Roll20, Mythic Table, and D&D Beyond gave me a good idea of what information users are looking for when searching for a new TTRPG assistant. To flesh this out a bit more, I used Figjam to create a content brainstorm where I used UX Writing and Information Architecture to organize and present information in an easy-to-understand way.

Brainstorm and IA map for TableRaven landing page, created using Figjam

Once I had an idea of the content to be included on the landing page, I rapidly ideated low-fidelity designs in Figma. The leading information I wanted to convey was what TableRaven is, the features that make it stand out from the competitors, and how a user can get started using the application. I played with different information hierarchies and conducted user testing to gain insight into the best-suited structure.

Low-fidelity wireframes for TableRaven Landing Page, created in Figma.

Note: After discussing business needs and constraints with the stakeholders, "how to get started" was pushed to a future improvement

03. Iteration & Review

At this time, the front-end developer on our team was fully immersed in building a separate feature. This gave me the opportunity to dive into some front-end development and get my hands dirty with HTML and CSS. Because my knowledge of front-end development is still developing (pun intended), I opted to build the landing page using Webflow and export the code to host on the company's local server.

Using the low-fidelity Figma mockups, I created the landing page design in Webflow and optimized images for the web using Adobe Photoshop and Illustrator. The high-fidelity designs went through several iterations before we landed on the final design and copy for the page. Our process looked like this:
‍
• Meghan in the design cave for a day
• Schedule design review with the team, take notes in shared Confluence page
• Meghan in the design cave making changes
• Another design review with the team

We followed this until the entire team was happy with the landing page. I then exported the code from Webflow, uploaded it to Github, and worked with the Project Manager and Back End Developer to get it up and running.

Further Iteration

In August 2022, we began to implement a stricter pricing plan. This led to the website needing a pricing page explaining the subscription options, benefits, and new features users can look forward to. This process began about 6 months after the launch of the initial landing page and the process began with the project manager setting the restraints and visions of what the pricing page may look like. The project manager relayed the requirements of the pricing page included price comparison, features being worked on, and frequently asked questions. I took the notes and recommendations from the project manager, referenced the design system, and maintained consistency navigating through the website.

Low-fidelity mockups of the pricing page for the TableRaven marketing site, created in Figma

Note: Due to the project being scoped down due to business constraints, frequently asked questions was not included in the final version

04. Development

The project manager, back-end developer, and I worked together to ship the code to launch. This was our first time exporting code from Webflow, so none of us knew exactly what to expect from it. The project manager and backend developer worked through the JavaScript to clean it up while I went through the HTML and CSS to debug anything that went awry.

I used Visual Studio Code, GitHub, and BitBucket to collaborate with my team and get the website up and running. While this was a special case-scenario due to our front-end developer being preoccupied, I always provide support to the development team on my designs in the case of any last-minute changes or unexpected engineering / time constraints.

05. Recommendations & Lessons

As the company and product grow, we continue to add more valuable information such as pricing and a blog page. As I design new features, I will create new mockups previewing the new feature, such as Custom Spells or Inventory on the Character Page, to demonstrate the benefits. One skill I would like to work on based on my experience with this project is my front-end development skills and gaining a better understanding of HTML, CSS, and JavaScript to better communicate with developers.