Creating a landing page for my app using Llama 3.2, Figma, Astro and Netlify
Check out the published landing page at https://garner-app.com
Over the last couple of weeks I’ve been developing Garner, my reflective career journaling app with the goal of getting the app into Beta as quickly as possible, in order to get feedback as I build out the features for my MVP.
So far this has consisted of setting up a Continuous Delivery pipeline to get the app onto TestFlight, adding quality gates to that pipeline and ensuring that I have analytics in place to measure the impact that those features are having.
These give me a good footing to ensure that the app that goes out is of a high quality and that I can see how valuable the product ideas I test are but I didn’t have a means of attracting the people who would give me that important feedback to use the app — I needed to do some marketing.
Unfortunately marketing isn’t my strongest skill. I prefer to be blunt about things, so I struggle to “sell the dream” of my ideas and previously when getting to this stage of building an app I’ve been working with others who often veto my suggestions.
When I was building JiffyCV I wanted our tagline to be “Keeping your CV updated sucks” but this was deemed too aggressive so we went with “Maintaining your CV can be a burden” as a compromise. I’m building Garner solo so I need to ensure I have some guardrails in place.
Knowing that I needed some assistance with writing marketing copy I decided to see what “AI” could provide. For the most part I’ve only looked at LLMs in a purely technical way, I don’t really see “AI” as “AI”, more as Machine Learning with better marketing.
This however felt like a perfect opportunity to see if it would be able to bring a little subtlety to my wording and save me some time and money iterating earlier on in the process than reacting to negative feedback when I conduct user testing.
Using AI to write marketing copy
Being a little tinfoil-hat-weary another reason I’m sceptical of “AI” is the business model of the providers like OpenAI, Google and Anthropic so I wanted to run a local LLM. It was also an excuse to put my new Mac Mini through its paces.
I installed Ollama and downloaded Llama 3.2 for the task, I had used Llama last year when it was released and ran it on a Raspberry Pi and it wasn’t great so I was keen to see what 3.2 could do.
I was quite impressed with Llama 3.2, it was a small download and it was able to understand my instructions really well, I even compared it’s output to that of Google’s Gemini and it provided responses not-dissimilar to that.
I started by setting the context of what features the app had and the unique selling point of the idea and then asked the LLM to write various versions of marketing copy tailored towards conveying a certain message.
I initially thought it did a pretty good job, it would splurt out a nicely structured piece of content that covered off what the app did, the problem being faced by the users and how the app would help solve that problem.
As I tried to focus the direction of the copy towards specific aspects I started to see the limitation. One of the more annoying quirks it had was that if I told it to rewrite the text it had just given me to focus on a specific value proposition it would do the rewrite but the wording it used for that value proposition was just what I had typed in.
I think ultimately I was attributing some creativity and understanding to what is essentially just a bunch of vector maths in a trench-coat pretending to be personable.
I don’t think this exercise was a complete waste though, by having to tell it to direct the LLM on what to write, it acted somewhat like what we call “Rubber Ducking” in programming, where you tell a person (or a literal Rubber Duck) the problem you’re having and in doing so you end up realising the solution to the problem.
I was able to iterate over how I wanted to express the features and value proposition of the app by correcting the LLM’s attempts at turning them into marketing copy and came to land on clearer messaging as a result.
The results of these iterations were:
- I found a headline I wanted to use “Take control of your career with Garner”
- I realised a good way to describe the journey my users will go through as a result of using my app (Reflect, Grow, Thrive)
- I was able to tie features of the app to parts of the journey which then gave me ideas of how I could develop those features further in that direction
- It gave me a clear structure for the landing page which helped when it came to designing it
Designing the landing page
With a good idea of my marketing copy I then sat down and started to pull a single page webpage together.
I wanted the structure of the page to read like:
- The headline
- A summary of the value proposition
- Call To Action for joining the beta
- An explanation of the Reflect, Grow, Thrive lifecycle
- The problem statement
- The features that solve the problem
- Another CTA
But I hit a problem - I couldn’t decide how to start tackling the problem of building the webpage.
My initial instinct was to start by building out the site in code as this would allow me to focus on the structure and the content and worry about the design of things after that was in place.
So I started creating a new project in Gatsby, a static site generating framework I had used before to build the landing pages for JiffyCV and Reciprocal.dev but that turned into a bit of a mess as it appears Gatsby hasn’t been updated to run on Node v23 and I didn’t want to waste time on getting it working so I turned to Astro.
However it appears all these static site generator framework shenanigans were just me procrastinating from the actual task I needed to complete as once I had it all running and added the structure I wanted I realised I had no idea of the visuals I wanted for the page, so I ended up going into Figma to try and figure out what the page would look like.
One of the downsides to SwiftUI’s nice clean design language is that it allows you to do so much without thinking about the visual identity of your app so when it came to sitting down and designing the webpage I didn’t really have anything to work with.
I struggled with analysis paralysis for about a week as I played around with different styles but not feeling strongly enough about any of them to commit to building the entire page with them.
Eventually I came to realise that I was wasting time overthinking things and I should just find a landing page template that I could drop my copy into and then conduct a test to see if the copy conveys the message I wanted it to the and the design was good enough that it didn’t upset people.
I found a really useful Figma Community File called 50 Landing Page Designs (https://www.figma.com/community/file/1127302394641561751/50-landing-page-designs ) that I was able to find something I liked and could adapt into a design for my landing page.
I was able to re-use the screen designs from the prototype work I did previously in order to illustrate the features which was really useful.
Testing my landing page design
After putting my copy into the template and using it’s design language to build out the rest of the page I moved onto conducting a test of the design so I could ensure that readers of the page would come away with a clear idea of what Garner was, what problem it was solving and how they could access the app.
I used Ballpark previously to conduct user research for the idea behind the app, ensuring that I was building something to make existing behaviours easier than asking potential users to adopt new ones, and I decided to use Ballpark to conduct this test.
I pulled together a list of questions I wanted to have the testers answer while viewing the webpage:
- What does Garner do? — To see if they mentioned reflective journaling and/or professional development
- How does Garner help its users? — To see if they mentioned the reflect, grow and thrive lifecycle
- What features does Garner offer? — To see if they mentioned customising the questions to answer in journal updates, setting reminders and exporting data
- How can people get hold of Garner? — To see if they mentioned it’s in beta on TestFlight
- What do you think of the design of the webpage? — To see if they liked the design of the page
- Did you have any issues understanding any of the information on the webpage? — To see if there were any points they failed to comprehend
- Would you download Garner? — To see if they would download the app and to offer them a link to do so if they said yes
I then recruited 20 people on Ballpark and waited very anxiously (previously I ran a similar test and had to redo the page twice) for the responses to come in.
Much to my surprise the feedback was all positive, everyone was able to tell me what Garner did, how it helped and the features that made it all happen and I even had one tester install the app!
This gave me a strong indication that I was ok to move onto building the webpage and publishing it.
There was one response that I found too funny not to include here as it highlights some of the problems with anonymous user research platforms:
Building the landing page in Astro
Luckily building the landing page itself was really easy as it was just HTML and I had all the imagery for the page from the Figma design.
As it was a single page I wasn’t really make much use of Astro’s functionality other than to serve up the images I needed to render and reference them in the HTML.
There was one thing I wasn’t too keen on which was how the default way of doing CSS was in the same .astro file as the document structure. This gave me flashbacks to using Vue 2 in anger in a previous job.
Once I had the Figma design reproduced I then adapted it to be responsive and tested it on a bunch of different iPhone screen sizes before pushing it up to Github and having Netlify build and deploy it.
Summary
The process of creating the marketing page for the Garner beta took me longer than expected because it made me confront some gaps in my planning for the project — namely the visual identity for the app and communication around it’s features.
After a bit of floundering I got over this hump by realising that much like the app itself, it’s more important to get something out there and get feedback on it than to waste time trying to come up with the perfect solution.
I was able to find some tools that helped such as the Landing Page templates for Figma, and had an excuse to see if “AI” could help me in my task, which it did but only indirectly.
I have been able to get the landing page published (https://garner-app.com) and I’ve already had a couple of people sign up for the beta which is really awesome.
Publishing the page now means I can start building the features of the app and collect feedback from real users as I do, which should increase my chances of the app succeeding when it hits the app store.
