UX Writing Sample
Laika
Industry: Technology, Blockchain
Product: Developer Tool
Task: Re-launch landing page
Laika's new landing page design
My role is to write the UX copy for Laika's new landing page. I chose to work for Laika because I wanted to gain experience writing for a technical product. Through my work, I learn about smart contracts on blockchain, a recently emerging payment technology.
Note:
The work featured here is a prototype. The UX Writing copy is mostly complete, but some media and design elements may remain missing.
Industry Background
What is Smart Contracts?
Smart contracts are programs stored on blockchain that automatically execute when predetermined conditions are met. For example, a smart contract can automatically transfer money to a party once the conditions written on the smart contract are met. Smart contracts are a technology that belongs to Web3, an approaching internet era that focuses on the decentralization of data.
How does a smart contract works?
Developers interact with smart contracts through coding to trigger execution or request information.
Smart contract challenges
Interacting with smart contracts is often complex and time-consuming for developlers.
Company Background
About Laika
Laika is a Bangkok-based start-up that tackles the pain point of developers who are spending a lot of time and effort working with smart contracts. Laika is a developer tool that aims to simplify developers' interaction with smart contracts.
Laika's business needs
-
Launch Application:
Laika wants potential users to try out its application after navigating its landing page
-
Establish community:
Laika wants potential users to join their community channels so that Laika can:-
Communicate with users about frequent product updates
-
Promote Laika Pro, its product premium
-
​​
Why UX Writing matters?
Currently, the only way users can access the Laika app is through Laika's landing page. Thus, it is important that the UX copy on Laika's landing page can convince potential users to launch the application.
Approach
I use the double-diamond method to create my UX copy:
Research:
Discover & Define
1. ​User interview
2. Define goals
3. Define success metrics
Design:
Develop & Test
1. Header section
2. Features section
3. Tutorial section
4. Community section & reinforcing statement
Research: Discover
Company's initial assumptions
-
Users understand that Laika is a developer tool
-
Laika appears trustworthy
-
Laika's detailed and informative UX copy effectively communicates Laika's values to users
-
The landing page's flow is intuitive to users
User Interview
To test the assumptions, I conducted a user interview and combined the result with Laika's past user interviews. All users have some experience with smart contracts development.
Findings
.png)
AFTER
BEFORE
20%
80%
If users were to join Laika's community channels, they expect to...
​
-
Get help when facing problems on the Laika app
-
Get news about Web3 technology
-
Learn about Laika's use-cases
-
Hear about features updates
Highlights
Laika strikes a good balance of appearing trustworthy and approachable
Laika's UX copy overwhelms users yet does not effectively communicate Laika's value
The landing page does not encourage users to join Laika's community channels
The landing page successfully communicates that Laika is a developer tool
Users prioritize getting a big picture understanding of Laika and exploring its features
Users want to understand what Laika is before how Laika works
Users are more likely to click launch app after gaining some understanding of the product
Users are mostly interested in getting informative content on community channels
Research: Define
Positive and negative design aspects
When designing a new landing page, I will be focusing on improving Laika's negative design aspects while maintaining Laika's positive design aspects.
Laika's current landing page...
Laika's Assumptions
Users' opinions
Appears trustworthy
Is a tool for developers
aligns its flow with
users’ priorities
High
Priority
Encourage users to join community channels
Clearly communicates the product’s value
User Persona: The efficient developer
To lead the direction of the new landing page design, I built this persona based on the user research result which suggests that most users want to get a big-picture understanding of Laika before launching the application.
Success Metrics
Goals
1. User must launch application after navigating the landing page
To achieve this goal, I will be focusing on these 3 aspects in my design process:
-
User Flow: The flow should prioritize the features section, which users are most interested in
-
User understanding:
-
The Headline section must show a clear value proposition of Laika
-
The Features section must clearly explain why Laika is useful for smart contract developers
-
-
User Trust:
-
UX copy must provide accurate information about Laika
-
UX copy must have a professional tone of voice to balance with the approachable design aesthetics
-
How to measure performance:
Monitor the click-through rate of all CTAs that ask users to launch Laika's application.
2. User must join at least one of Laika's community channels after navigating the landing page
To achieve this goal, I will make sure that my UX copy encourages users to join Laika's community channels
How to measure performance:
Monitor the click-through rate of all CTAs that ask users to join each of Laika's community channels
Metrics
-
Conversion rate: 1 - 10% for each goal
-
According to Nielsen Norman group, a good conversion rate for a web page ranges from 1-10%
-
-
​Success rates in usability studies: At least 80%
-
According to Nielsen Norman group, the success rates in usability studies often reach 80% because users know that they are expected to perform specific actions.
-
Laika already has a 100% success rate of getting users to launch its application in the usability study. However, Laika has not conducted the study with a bigger pool of users. Thus, the 100% success rate could be an overestimation.
-
-
Total page views: Above the current 2,000 views per month
-
Using SEO keyword research to design my UX copy, I expect that the total page views per month of Laika landing page will increase over the course of three months.
-
Design: Develop
Now that I have set the success metrics for the new landing page, I am ready to start the design process! Here are a comparison of the current landing page and the new landing page prototype to show the users flow I have created with the UX Designer and the sections I will be focusing on
Current Landing Page
New Landing Page
Header
Tutorial
Features
Footer
Header
Tutorial
Features
Social Proof
Community
Blog
Footer
Header Section Design
Why prioritize this section?
To achieve the first goal which is to make users launch Laika's application, the headline and supporting copy must clearly communicate the value of Laika.
Current Header Section
1.
2.
Problems
1.
-
Despite our users being familiar with Web 3.0, many users say that "Request builder" is unclear
-
Many users say that the supporting copy helps them understand that the app is related to smart contracts, but they do not realize how Laika is a developer tool for working with smart contracts until they scroll down to see the picture of Laika's interface
2.
-
"Start building with Laika" does not present Laika's value to users and thus it does not encourage users to launch the app
-
If users do not understand the value proposition of Laika yet, they are more likely to click "Learn more" than Launch App and may never finish navigating the landing page
New Header Section
Solution
UX writing: The efficient developer persona tends to quickly scan Landing page's content. Thus, I highlighted Laika's value proposition with a brief headline using the action verb "Simplify". I also decided that the term "smart contracts" is central to Laika's product and needs to be part of the headline. "Simplify your interaction with smart contracts" is exactly the value that Laika offers to its users.
​
UX Design: Many users mention that Laika's interface is similar to that of Postman, a famous developer tool. As a result, the picture of Laika's interface on the current landing page makes them immediately realize that that Laika is a developer tool. I share this insight with the UX Designer and suggest that featuring a picture related to Laika's interface next to the headline could quickly build users' understanding of Laika.
Features Section Design
Why prioritize this section?
80% of users prioritize reading the features section when navigating Laika's landing page. Thus, Laika's features section is vital to communicating to users why Laika is useful. An improvement on the features section should help the efficient developer persona gain enough understanding of Laika to decide to launch the application.
Current Features Section
Problems
Many users feel overwhelmed by the five paragraphs describing the features. They ended up skimming for keywords to get a rough understanding. Many users claim that they understand how the features work, but still do not understand why these features are useful. ​
New Features Section
Features description shown
on-click:
READ and WRITE with zero coding
Adjust and reuse environment variable for testing out different cases
Easily connect with Hardhat and any development environment of choice
Manage and execute conditional requests quickly with a node graph scenario
Take notes, get code snippets and use a converter, all in one tab
Graphics Placeholders
Features description Placeholders
1.
2.
3.
Solution
1.
To write a description of what Laika is, I conduct SEO Keyword research using Google Ad Keyword Planning. Here are the keywords I found:​
I write my explanation of what Laika is using these keywords that have a high average monthly searches, three month change, YoY change and low competition.
2.
I make sure that all feature headings consistently begin with a verb and are direct and concise. I also highlight terms that users are familiar with including ENV and Hardhat, to help the efficient developer persona who dislikes heavy text easily skim the headings
3.
To make sure I communicate how Laika's features work accurately and why these features are useful, I conduct a technical interview with the business and engineering team. Here are my interview questions:
​
-
How does each function work? ​​
-
How does each function improve the smart contracts development experience?
-
Are users familiar with each feature and do these features exist in other developer tools?
This is how I came up with my feature descriptions using both the interview results and individual research:
-
Create requests: Users' requests to smart contracts only include two functions: READ and WRITE. Thus, drawing on users' familiarity, I highlight these two functions in the description.
-
Create ENV: Users are familiar with how ENV works and why it is beneficial, so I focus on explaining its functions and values accurately to establish trust.
-
Integrate Hardhat: Users are familiar with Hardhat and its benefits, so I highlight how easy it is for users to integrate Hardhat with Laika. I also point out the flexibility that the users have to use other development environment options.
-
Plan requests flow: This feature involves the use of a node graph, which users are familiar with. I appeal to the users' familiarity with the node graph while highlighting the value of this function. With this function, users can easily manage and execute conditional requests, eliminating the time-consuming process that usually goes into planning this type of request.
-
Get helper tools: Users are familiar with having the helper tools in other developer tools for taking notes, getting code snippets and using a converter, so I emphasize to users how our helper tools match their familiarity.
Tutorial Section Design
Why prioritize this section?
Although the tutorial section is not users' top priority when navigating the landing page, tutorials could help users understand how Laika works and may eventually lead to users launching the application. New users who already launch the app can also refer back to this section for a quickstart guide.
Current Landing Page
1.
2.
3.
Problems
1.
The UX copy is not concise in communicating how this tutorial aims to help users quickly get started on Laika​
2.
The hyperlink titles are repetitive and also use Thai language, which is inaccessible to Laika's international users, who are a big proportion of total users
3.
The tutorial video is around 30-minute-long, and many users mention feeling overwhelmed by the long video and decide to skip the tutorial section altogether
New Landing Page
1-minute tutorial video placeholder
Solution
-
I use a direct and concise message for the headline saying "Get started on Laika" and replace the hyperlinks with only two main CTAs.
-
"Watch tutorial: " lead users to the in-app tutorials
-
"Request a demo": let users set up a meeting time with the Laika team for a demo.
-
-
With the efficient developer user persona in mind, I suggest the UX Designer and business team use a short tutorial video (less than one minute). This shorter video will make users feel less overwhelmed and more likely to watch the video.
-
This new tutorial section offers users flexibility with three ways to learn how Laika functions: through a quick video, an in-app tutorial or a demo.
Community Section
& Reinforcing Statement Design
Why prioritize this section?
-
Because users can only access the Laika app through the landing page, social media/community channels work with SEO to help users discover Laika's landing page. The social media and community channels are also where Laika can provide customer service, collect user feedback and employ its marketing strategy.
-
This section marks the end of the user flow and thus must encourage users to complete both goals: to launch Laika's application and join community channels.
Problems
The original landing page ends with a social proof section, without any reinforcing statement encouraging users to launch the app. There is also no Launch App button at the end of the landing page, which means users have to navigate back to the header in order to launch the app.
The original landing page also lacks a community section. Community channels only appear on the footer of the page, and the user research suggests that 100% of the users do not check out the community channels after they finish navigating the landing page. Many users claim that they do not see any benefits from joining the community channels at the moment.
New Landing Page
Solution
-
Community section: I add a statement that highlights what users expect on Laika's community channels, which are updates on features and use-cases
-
Reinforcing statement: I rephrase Laika's headline ("Simplify your interactions with smart contracts") to have a friendlier tone to encourage users to launch the application at the end of their landing page application
Design: Test
The new landing page design is still in its prototype stage and Laika's business team has decided on testing the new landing page after launching it. The design and business team, however, have been working together to edit this design and will be using the success metrics that I created to guide the testing and performance tracking of the new landing page after the launch.
Learning
It has been a challenging yet fun experience building my first UX Writing case study! I have learned a lot of valuable lessons that motivate me to keep improving on my UX Writing journey. Here are a few things I learned:
1. Thinking about the "why": Early on in the process, I focused a lot on how I can create the best UX Writing copy, but I never stop to ask why what I do is beneficial at all. Thanks to my mentor's advice, I now realize that the understanding of why UX Writing is important for my specific work helps me remain motivated and produce better quality of work.
2. Collaboration is key: Because Laika's team is based in Thailand and most team members only work part-time for Laika, collaboration was challenging. Initially, I did not collaborate as much with the UX Designer and did a lot of repetitive work that could have easily been avoided with a quick chat. Once I started collaborating more with the team, I realized that our work process is more efficient with collaboration. In my next project, I hope to initiate collaboration with my team more.
3. Combining SEO with UX Writing: I realize later on in the writing process after researching that SEO is vital to the success of a landing page. I eventually use keyword research to edit my UX copy, but I hope to integrate the use of keyword research early on in the UX Writing process in future projects.
4. Structuring and data visualization: Although I have some experience with data visualization and visual design through my sales and marketing internships, I know I am still building my expertise. I am glad that I get to practice using those skills in this case study and hope to keep improving in my next project!