The most common problem we see in redesigns is an empty first screen. Sometimes it's filled with an expensive video shoot, an animated logo, and a five-word headline. But it's empty of information. Someone has opened the website to find out whether you can help them, and the only answer in front of them is “Welcome to our world.”
At 88Lab, we give ourselves three seconds to show what the business offers and what the next step is. That's our practical clarity test. Show the first screen briefly to someone who doesn't know the company and ask what they can do from there. If the visitor remembers the background color but doesn't know whether the company sells furniture, designs kitchens, or offers interior design consultations, our first task is to improve the headline and the offer. The animation can wait.
The six techniques in the video “6 EASY Tips to 10x Any Site’s Design” offer a good starting point for this kind of review. We take six design decisions from it and apply them to challenges from our own work. You'll see why it's worth starting with one difficult headline for a publication with a large archive, while for a gift with a personalized inscription, the most important detail only appears in the cart.[1]
What visitors should be able to do
Before opening your design software, take three real questions from your recent conversations with customers. When someone asks, “Do you work from my drawings?”, the page is missing different information than what someone asking, “Can I see what it looks like in person?” needs. For the first person, prepare a short explanation of how you handle a project brief. For the second, choose a completed project and show it in enough detail. Now you have a reason to put each of these things on the page.
Describe success from the business's perspective, too. For a hotel, an inquiry may be valuable if it includes dates, the number of guests, and a way to get in touch. For a publication, success means readers can find a specific article in the archive. For a wholesaler, interest in a photo of the packaging has business value when the buyer can find the pack size and ask about delivery. If all these tasks are grouped under “more engagement,” it'll be hard for the designer to make informed decisions about what to enlarge and what to cut. At 88Lab 88Lab portfolio there are examples of all three.
You can make the first sketch on paper. Write the headline as you would explain the service over the phone. Under it, add one piece of evidence the customer can look at, and write what will happen when they click the button. Show the page to a sales colleague. If they need to add, “Actually, the price is for two people” or “We only work with businesses,” that detail deserves a place in the sketch from the start.
1. Choose fonts using your business's actual headline
In the video, the designer first chooses a font for the headings, then pairs the narrow Instrument Serif with the wider Geist Sans. This is a good approach for a page where a few words need to make a first impression. An architectural project name looks different in wide, bold letters than it does in a narrow serif font. The choice gets easier when you can see the actual name alongside the project photo and a short description.
You have three sensible options. With a single font family, you can create a clear hierarchy using size and weight. A large family with related serif and sans-serif styles gives you more variety. And if your headings need their own character, pair an expressive display font with a calmer one for paragraphs. Put them side by side with real text. Two almost identical styles often look like an accidental substitution, while a clear difference shows what is a heading and what is a clarification.
For a Bulgarian website, start by testing in Cyrillic. In the demonstration, Instrument Serif works well for a large English headline. However, the font's creators describe a Latin character set. If you use this version for “Custom Kitchen Design,” the browser will substitute a fallback font for the missing Bulgarian letters. In practice, you'll be judging a completely different composition.[2]
Before approving the typography, check your longest headline, a regular paragraph, a price, and the main button label on a phone. A headline that looks good on two lines on desktop may take up almost the entire mobile screen. Often, the best fix is more precise wording. Shrinking the text to an uncomfortable size just to fit the old copy rarely helps.
How to design a headline for a website with over 600,000 articles
For the redesign of “Banker,” we migrated over 600,000 articles from a custom platform to WordPress. We updated the topic sections and gave readers the option to choose which categories they see. An editorial template needs to handle both today's brief news item and a long headline from the archive. Manually adjusted lines in three beautiful demo cards tell you very little about how the publication will look tomorrow morning.[3]
If you approve a template like this, give the designer the shortest and longest real headlines from the past week, an interview with two names in the headline, and a post without an image. Ask to see them both in the news list and on the articles themselves. Headlines that differ only at the end are especially revealing. If automatic truncation leaves two identical sentences on screen, readers will have to open both to find what they’re looking for. A fix might be an extra line in the card, a narrower image column, or an option for the editor to set a shorter headline for the list.
How headings are marked up on the page matters, too. Ask the team to show you what the page looks like without its styling. Is there a main heading that makes the topic clear? Are the sections below it labeled meaningfully? The right sequence helps people who navigate with screen-reading software. A designer can enlarge a quote or number without the developer marking it as a new section in the document.[4]
To finish the typography test, type a name with “shch,” “ŭ,” and “y” on a real phone, along with a price with cents and a date with a four-digit year. Are the dots, accents, and decimal point visible at the usual size? Choose a paragraph and read it all the way through without zooming in. A font can look great in five words on a poster, but make your eyes lose their place in a longer paragraph. In that case, keep its character in the headings and use a more readable font for the body text.
2. Give the first screen one clear visual focal point
When everything on the page demands to be seen first, visitors have to decide for themselves what deserves their attention. Choose a leading element based on what you sell. For a furniture studio, it might be a photo of a finished kitchen that shows how a difficult corner was handled. For software for repair businesses, it could be a screen showing how an incoming request reaches an available technician. In both cases, the image says something you’d otherwise have to explain.
Take a furniture studio that makes kitchens for small homes. The headline “Craftsmanship in Every Detail” could appear on a watch website, too. “Custom Kitchens for Small Apartments” immediately makes clear who the service is for. Beside the photo, we’d place “Explore completed kitchens.” If the studio really does provide initial estimates from plans, “Send us your measurements for a quote” would be a logical next step after the gallery. That way, the button matches the decision someone is ready to make at that point.
Open the 88Lab homepage and judge for yourself. Can you immediately tell that we create websites, platforms, and digital marketing? If you already have a project in mind, you can choose “Discuss a project.” If you’re still getting to know us, there’s “Explore our work” beside it. As you scroll, you’ll see our work for CoolFit, Pulse Fitness & Spa, Apolonia Resort, and Banker, and further down, you can follow the process from the first conversation to the website launch. This order follows the questions we’d expect you to ask in an introductory conversation. What do you do? Who have you done it for? How would we work together? Only then would we ask whether you like the design and animations.
How to choose an image that answers a question
In the video, the subject is software for managing service businesses. The creator takes a motif from the charts in this kind of product and recreates it with orange vertical lines. This gives visitors a visual sense of data and structure. On another website, the same lines would just be a background. For your own page, finish the sentence: “We’re showing this because the customer wants to see…” If the answer is “that we’re modern,” you still have work to do on your choice.[1]
For the furniture studio, we’d ask for two shots of the same kitchen. The first shows the whole room and makes clear how small it is. In the second, an open cabinet shows how the difficult corner has been used. If we put “Functional solutions” above the second photo, we’re leaving the customer to guess what they’re looking at. With the caption “The drawer opens all the way without hitting the dishwasher,” the photo now gives buyers an answer they can apply in their own home.
Give guidance on framing, too. A panoramic apartment photo may look great on a laptop, but on a phone it could show nothing but the empty wall between the window and the bed. When a smaller version of the same image will do, the developer can offer the browser several sizes using srcset and sizes. When an object disappears from the frame, a separate mobile composition using picture may be warranted. Provide both approved versions. That way, whoever uploads the next image will know what must remain visible.[5]
Sometimes the best candidate for the lead image stops working when you change the context. For example, a photo of a glossy conference room doesn’t answer whether the software can actually show an available technician. A small, legible crop of the working screen with sample data would provide more information. Show only the rows needed to understand the action. A photo of an entire monitor, shrunk to phone width, preserves the product’s shape and loses almost everything the visitor wanted to see.
3. Repeat details that help people find their way around
In the recording, this is called a “visual rhyme.” In the demonstration, the designer repeats the triangle from the logo in the dropdown icon, the main button’s arrow, and the outline of the image. The individual sections begin to look like parts of the same website. For a business, though, the most useful repetition is in the elements visitors interact with. If someone has learned what the booking button looks like, they should recognize it on the page for a specific room, too.
Imagine a hotel website where the solid green button takes you to available dates. In the gallery, the same green rectangle labels “Room with a view” but can’t be clicked. A few lines further down, the same shape opens a photo. The design is formally consistent in color, but inconsistent in meaning. Reserve the most prominent button for the chosen action and give the informational label a different look.
For a quick check, put all the buttons, text links, and labels from the homepage on one screen. Which ones look clickable? Which ones actually are? Then move through the page using the Tab key. You should be able to see where the focus is and reach the actions that the design so convincingly presents.[6]
When to organize a website by audience and when to connect the services themselves
Our work on CoolFit and Pulse Fitness & Spa shows how many different questions people can have about two websites in the same sector. The CoolFit digital sports card brings together three groups. Employers are exploring a benefit for their team. Employees already have a card and are looking for places to use it. Sports venue owners want to know how to become partners. We organized the information around these three roles, and added service filters and an interactive map for people looking for somewhere to work out.[7]
Imagine an employee who would go swimming after work if there were a suitable pool on the way home. First, they want to know which places accept their card for swimming. Then location determines which option they choose. The same venue map means something different to the person arranging the benefit. They may want to know whether colleagues in different cities will have somewhere to work out. It helps if both groups can reach the same information from different places on the site. That way, when a new venue is added, both audiences have up-to-date details.
For Pulse, we moved the content from the old site and built connections between clubs, workouts, and trainers. We added a map and filters to help visitors find venues.[8]
Here, the same visitor can start their search in three different places. Today they’re looking for a club near the office, tomorrow a friend recommends an instructor, and next week they want to try a different workout. When planning a structure like this, start with one specific question. “Where can I work out with this instructor?” shows what connection the trainer’s page needs. “What can I work out at this club?” points to the connection needed in the other direction.
Test the same journey by starting on an interior page. Someone who opened it from Google has missed the explanations on the homepage. Give them the page address for a particular workout and ask them to find a convenient location. If they return to the search engine, ask what they expected to find. Perhaps the city is missing next to the club’s name, or the link to it is lost among the photos. These two observations call for different fixes.
How to test filters and returning to results
Choose a combination you know in advance will return at least two suitable results in the directory. Give the participant a scenario that makes sense to them, such as choosing between two places to swim near work. Let them open the first venue and check its location. Then ask them to view the second one. See what happens when they tap “Back” on their phone. Is their selected activity still there? Do they see the list they started from? Note anything they had to enter or select again. Also pay attention to whether they recognize the venue they just viewed. Two identical cover images may lead them to open the same place a second time.
Try again with a combination that returns no results. Someone who is set on swimming may be willing to travel to a nearby neighborhood. Can they see which condition to change, and keep the others? If two people struggle for different reasons, describe each issue separately. “Returning from the venue cleared the selected activity” gives the developer something they can reproduce. After the fix, follow the same journey on the same phone and check whether you can now compare the two places.
4. Use depth and motion where they serve a purpose
You can create depth with a barely noticeable shadow, texture, overlap between two elements, or a translucent background. In a dropdown menu, for example, a subtle shadow around the list helps show where the menu ends and the page beneath it continues. In the demo, the author adds a fine texture to the hero image and carries some of the glass effect over to the cards. The hero image remains recognizable.
This is exactly where it’s worth testing the difficult case. A translucent card looks great on a dark photo chosen in advance. What happens when an editor uploads a bright kitchen with white cabinets? On mobile, the crop might place the heading right over the lightest part of the image. Test with a photo like that, too. A solid background behind the text could solve the problem for every project that follows.
With animation, ask yourself what the visitor should have to wait for. A transition between two photos can show the difference between them. But if visitors have to wait for the heading’s letters to come together to understand what you do, the most important information appears last. Show it from the start. Provide a calmer version for people who prefer less motion. The CSS prefers-reduced-motion setting lets the site respect the device’s preference. At the end of our homepage, there’s also a “Reduce animations” button.[9][10]
When 3D animation belongs on a retail website
For the Bulgarian representative of American Pop Corn Company, we created a website where a 3D popcorn kernel, lettering, and product packages move as visitors scroll. After this scene, visitors reach a catalog, information about production and delivery, and an option to send an inquiry about a selected product. Trade partners can check package sizes, units per carton, and palletization details. The site also includes controls for decorative motion.[11]
This example sets a useful condition for every effect. Imagine a buyer for a retail chain who likes the presentation and sends the link to a colleague in logistics. The colleague opens it with one specific question about the packaging. If they have to watch the whole presentation on every visit, the effect becomes a repeated time cost. For a project like this, we’d check two separate tasks. Can a new visitor connect the memorable visual with the actual product? Can a returning visitor go straight to the relevant line in the catalog?
To evaluate the motion before development, ask for three frames. What’s visible before it starts, what’s revealed in the middle, and what does the visitor see at the end? Place the static version alongside them. If it leaves out an essential purchase detail, give that detail a permanent place. If everything important is already clear, you can calmly decide whether the motion is enjoyable or explains a change. This makes the discussion about animation concrete even for an owner who has never opened design software.
Check the in-between state on a real phone, too. Scroll quickly, flick back up, open the menu halfway through the effect, then rotate the device. Does the right text appear straight away? Does the button stay in place when you tap it? Try the same sequence with reduced motion enabled. Visitors should be able to reach the product and take action even when they choose a calmer presentation. This is a practical check you can repeat after replacing images or adding a new section.
5. Build hierarchy without sacrificing readability
On a product page, the name, price, size and production time each play a different role. The name helps customers find their way around, the size determines whether the product will work for them, and the production time may decide whether they order it at all. If “Made in 20 business days” appears in pale gray below a large “Buy” button, the most important condition can easily go unnoticed by someone choosing a gift for next week.
In the video, the subtitle’s opacity has been reduced to 70% to make the heading stand out. The result depends on the original color and the background behind the letters. The Web Content Accessibility Guidelines (WCAG 2.2) set a minimum contrast ratio of 4.5:1 for regular text and 3:1 for large text. Large text is defined as at least 18 pt regular or 14 pt bold. For example, #999999 gray on white has a contrast ratio of only about 2.85:1. The same text in #666666 on white reaches about 5.74:1. This lets you keep secondary text visually subdued while still making it readable.[12]
Before lightening the text, try reducing its weight, giving it more space, or moving the detail next to the element it refers to. Check the screen with this question in mind: “What might I miss if I scan this quickly?” A pale image number in a gallery and a pale delivery date might look equally good in the mockup. Their consequences for the customer are different.
What should stay visible from selection to confirmation
In our project for Ellie & Co, visitors personalize a plush elephant. They choose the color, which ear should carry the lettering, and how the text should look. The name or message appears directly on the product. The selected details are saved in the cart, and the final form sends an inquiry to the team. The customer receives a confirmation with a reference number. Here, the final action has a very specific meaning and does not include online payment.[13]
Imagine you’re buying a gift for twins. You add two elephants with different names to the cart. What information would you want to see before sending the inquiry? Two identical thumbnail images and a total price probably wouldn’t reassure you. Look for each item’s own inscription, selected color, and a way to return to that specific item to edit it. This exercise reveals what needs to be legible on the final screen. The brand can use delicate typography, but the name on a gift for someone else’s child deserves a clear preview.
Messages also have a hierarchy. When a form is submitted, the most important text explains what happens to the inquiry. If the email field is incomplete, give instructions next to it, preserve the values already entered, and let the person fix just the missing information. When there are several errors, a summary with links to the relevant fields also helps. After successful submission, say what you received and what happens next. “We’ve received your inquiry about the two elephants” makes a different promise from “Your order has been paid for.” Write the message to match what the system actually does.[14]
To test on a small screen, choose a color, enlarge the text and try to adjust your selection with one hand. The swatch can stay subtle while the clickable area around it is larger. The WCAG 2.2 minimum target size criterion uses 24 by 24 CSS pixels at Level AA and allows exceptions, including when there is sufficient spacing between elements. A 16-pixel visual square can sit inside a wider button. Add a name or a clear indicator to the selected color so customers can check their choice even on a screen with reduced brightness.[15]
6. Compare different solutions before approving one
If your designer shows you three versions of the same page with different shades of green, you can choose your favorite color. But you still won’t know what content deserves the first screen. In the recording, the creator says they tried twelve versions of the main visual element. That makes sense as long as the options test different ideas. Two may be enough if the choice between them changes something substantial.
For a kitchen studio, the first version could open with a completed project and a button to the gallery. The second could show how room measurements lead to a design and invite visitors to send a floor plan. The first welcomes customers looking for style and proof of quality. The second suits someone who already has measurements and is choosing a contractor. Before developing either one, show both to people who resemble your customers. Describe the participant’s situation in the same words a customer would use. If you say “open the gallery,” you’ve already made the first choice for them. Testing different solutions early is part of the Design Council approach.[16]
Two first screens for the same getaway
For Apolonia Resort, we designed the mobile version, included an inquiry option and integrated the Quendoo booking system.[17]
How would we compare two ideas for a homepage like this? For the exercise, imagine two sketches. The first leads with a photo of the resort, followed by a short description and a “Explore the rooms” button. The second uses the same photo but leaves more room to select dates and the number of guests. Below them, it says “Check availability.”
Give a participant a phone with the first sketch and a specific task: “You’re traveling with your partner and eight-year-old child from June 12 to 16. You want to find out whether you can stay in one room and how much the whole stay will cost. Show me how you would check.” Let them choose where to start on their own. If they open the room photos straight away, see whether they can check those specific dates from there. Note when they have to go back and what they expected the button to say.
In the second sketch, look for a different problem. Someone may easily find the calendar and still give up if it’s unclear where to enter a child’s age when adding them. The same goes if they only find out on the next screen whether the price is for the room, one night, or the entire stay. The fix here is very specific. The designer shows the age field when a child is selected and places the date range next to the total. Then they test the same task with another participant. Finally, they ask them to say how much they expect the family to pay. This will reveal whether they understood the price, even if they moved through every field without hesitation.
What people look for when they don’t have dates yet
For the next participant, change the scenario. “You’re considering a summer holiday with your parents. Before deciding when to travel, you want to send them two suitable accommodation options.” See whether the visitor can find rooms without selecting dates, how they compare the options, and what opens when they share the link with their family. If the calendar fills the whole phone screen and the participant assumes they need to know the dates already, the designer can add a visible “Browse rooms” link next to the form. If the shared link takes people back to the homepage, each option needs its own URL. Both fixes follow from a specific obstacle in the exercise.
What happens after the form is submitted
Let’s take a separate illustrative example from a service website. We show two randomly assigned, comparable groups different versions of the form over the same period. The sales team agrees in advance on what counts as a qualified inquiry, and the definition is the same for both versions. In the first group, 40 out of 1,000 visitors submit the form, and 20 of them are looking for a service the company offers. In the second group, 52 out of 1,000 visitors submit the form, and 18 inquiries are qualified.
If we count only submissions, the second version leads by twelve. But among all visitors, 2% submitted a qualified inquiry with the first version, compared with 1.8% with the second. This small difference leaves the winner unclear. Before changing the form, it’s worth reading what people asked for in the unqualified inquiries. The description may be creating expectations of a different service. That gives us an explanation we can test with the next revision.
How to check your finished website on a phone
When I choose a design, I open the website on my phone. I look at how quickly the first screen appears, what I understand from it, and how easily I can take the next step. If you’re checking a page with an inquiry form, try filling it out with one hand. Can you reach the button after the cookie notice appears? Does the keyboard cover the field? Is the confirmation visible after submission? I’d reject even the most beautiful option if it distracts me or makes me search for what the company actually offers.
How to tell a slow website from unclear design
First, measure when the main content appears. The LCP metric tracks when the largest eligible element in the initial viewport is rendered, often a hero image or block of text. A good LCP benchmark is 2.5 seconds or less at the 75th percentile of visits, with mobile and desktop devices measured separately. If the large image loads late, that’s a specific task for speed optimization.[18]
If the measurement shows a problem, first check which element was reported as the largest. If it’s the hero image, check whether its URL can be discovered in the initial HTML and whether it’s marked for lazy loading. Lazy loading is suitable for many images further down the page, but it delays the image people expect to see right away. It may make sense to give a critical image high loading priority. Giving every image high priority defeats the purpose. If the metric points to text, check when the text appears and what’s holding it back before compressing the entire gallery.[19]
For the mobile layout, also open a page with unusually long content. Check whether paragraphs and standard controls fit at a width of 320 CSS pixels. WCAG explains how vertically read content should reflow, including for people who zoom in. Elements whose meaning depends on a two-dimensional layout, such as some tables and maps, are exceptions. In practice, there’s a big difference between scrolling within a wide logistics table and having the whole website scroll sideways just because one heading extends beyond the screen.[20]
Once the screen is visible, it’s time for our three-second test. Show it briefly to someone who doesn’t know the company. Put the phone away and ask two questions. “What does this company offer? What would you tap if you needed the service?” The answer “I saw a kitchen I liked, and I’d look at their other projects” tells you more about the quality of the homepage than a polite “It’s very modern.”
Which change to assign first
After the review, you’ll probably have notes about the font, images, form, and a dozen other details. For each one, write down what the person tried to do and how far they got. This will help you give the team a task with a clear outcome.
If this month’s budget only covers one change, start with the obstacle that prevents people from completing the main task. When several obstacles have similar consequences, check how often they occur and how much work each fix would take. If the problem only affects phones, check how many of your customers actually use one and identify the affected models. Even a brief report like “the keyboard covers the button when entering an email address” is enough to make a useful first fix, as long as it includes the page and device.
Before the next approval, step away from your computer and open your homepage on the phone of someone outside the team. Give them a real task and let them complete it without prompting. The point where you reach out to help is a good place to start the next revision.
