The Impact of Small Steps in Design: Exploring Landing Page.
A while back, I caught up with my old buddy, Alex (not their real name, haha). Both of us being product designers, Alex was diving into learning code by creating their own product (as a portfolio), while I was busy evaluating digital products.
Long story short, Alex showed me their product while chatting about the backstory behind it.
Alex: “I made this product to help users create articles.”
Me: “How does it help users with this product?”
Alex: “It’s pretty simple, users just pour in their ideas, and the product generates the article. So, users only need to focus on the big idea.”
Me: “Wow, interesting! Can I see the product? I’d like to check out the features it has.”
Alex: “Sure thing. Just log in. You can try it out too. Feel free to give feedback after using it.”
Me: “Sounds good!”
After our chat, I tried to grasp insights from Alex (pretending to be a product owner or stakeholder). Alex’s insights about the product were:
- Generating articles from the author’s big ideas
- User input is in the form of a chat with AI, which serves as a prompt
First, let’s take a look at the landing page. The assumption is that the landing page is the first page accessed by users. Ideally, the landing page should help users understand the function and features of the product.
Current landing page:
There are some key points Alex highlighted on this landing page:
- “Chat with personal assistant through your docs directly” — indicating there’s a chat feature with AI to help with writing articles.
- Quotes: “Almost every confusion is solved by the Assistant. Really like a writer assistant” — emphasizing that this tool can play the role of a personal assistant for a writer.
From these key points, we can use them as a basis for exploration. This involves finding visuals that can communicate more directly to the user.
Breaking it down further for visuals:
- User conveys ideas to AI:
a. Tell users to share their ideas with AI
b. By chatting with AI - AI generates the article:
a. Let users know to just wait for AI to generate the article
b. The article will also appear automatically.
After understanding the process, it’s time to start designing.
Step 1: From the existing landing page, I’ll split it into two sections, left and right. Create space to place visual explorations.
Step 2: Add a background color. I’m going with a purple color, taken from the text “Genuine writing bla bla bla.”
Step 3: Add a background with a touch of accent to avoid it looking too flat.
Step 4: Create visualizations with the points that have been broken down. First, suggest the user to convey their ideas through chat. I use moving-visuals (motion) to make it more representative.
Step 5: Next, visualizations for the point “generate article by AI.”
Step 6: Combine the story of the two interactions (steps 4 & 5) into one. Then, place it into the section created earlier (step 1).
Step 7: The final step can be used for a re-check: UX writing inside the CTA button or the color of the text in the left section.
Done.
The process above is an example of revising a landing page. So, it can be concluded that the implementable and easy steps are:
- Interviewing stakeholders (or the product owner): to gain an objective understanding of their product.
- Write it down before starting the design: to break down what you want to convey to the user.
- Start exploring the design with the written material.
We can begin training our design exploration instinct by starting with writing. Small steps matter.
