Constraint
No performance data verified, so no number is claimed
Client
Rufous & Co., a design studio with a services practice and a store
Scope
Strategy, design and development with the founders
Stack
Web, storefront
Two people arrive at the same page. One wants to buy a single print. The other wants to commission six months of design work. They read the same opening sentence, which is trying to be true for both and ends up specific to neither. The buyer cannot find a price. The client cannot find a process. Each scrolls to the bottom, finds the one contact form, and decides to come back later. The studio ran two businesses through one door, and the door was labelled for nobody.
Two revenue lines cannot share one route. Somebody always loses the coin toss.
What was actually happening?
Services and products competed for attention on every page. The portfolio was organised for the studio's convenience rather than for someone deciding whether to hire it, so the proof took effort to reach. And the contact page opened with pleasantries instead of asking for the brief, which was the only thing the studio needed in order to reply.
1. How should a studio homepage handle two different buyers?
Before: one homepage for services and store, with a single blended message.
After: a homepage with two clearly separated routes, one for hiring the studio and one for buying from it.
UX and UI analysis, before against after
Before: what the design cost the visitor
Two buyers, one blended message. Someone hiring the studio and someone buying from the store want different things, and one homepage with one message gave neither a clear scent to follow. Source: Nielsen Norman Group, 2003.
Choice without structure. With the routes mixed together, the visitor had to work out which parts of the page applied to them: cognitive load spent on navigating instead of deciding. Source: Nielsen Norman Group, 2013.
Neither audience named. A headline that does not say who it is for fails the basic test the headline research sets. Source: Nielsen Norman Group, 2015.
After: what changed and why it works
Two clearly separated routes. One path to hire the studio, one to buy from it. Each visitor sees their route named and follows it: information scent by design. Source: Nielsen Norman Group, 2003.
One decision instead of a mixed page. The visitor makes a single binary choice and moves on. Fewer decisions at the top of a page is what the choice research recommends. Source: Columbia University and Stanford University, Iyengar and Lepper, Journal of Personality and Social Psychology, 2000.
Both audiences addressed by name. Each route opens with the reader it serves, so both feel the page was written for them. Source: Nielsen Norman Group, 2015.
2. What should a services page say before it asks for the brief?
Before: a list of services with no process, no scope and no shape of an engagement.
After: a services page that states scope and process, then asks once.
UX and UI analysis, before against after
Before: what the design cost the visitor
Labels without process or scope. A buyer cannot judge a service from its name. With no sense of what an engagement looks like, the page asked for a brief before giving any reason to write one. Source: Nielsen Norman Group, 2016.
No picture of what happens next. The usability heuristics call for visibility of system status; on a services page that means telling the buyer how the work runs from first call to delivery. Source: Nielsen Norman Group, 2024.
The ask came too early. A form on a page that has not yet said what the work involves is the form usability failure of a purpose left unclear. Source: Nielsen Norman Group, 2018.
After: what changed and why it works
Scope, then process, then one ask. The page sets out what is included and how an engagement runs, and only then asks for the brief. Value before the form is the order the form research prescribes. Source: Nielsen Norman Group, 2018.
Disclosure as trust. Explaining the process up front is the kind of up-front disclosure the credibility research counts among the four factors that make a site trustworthy. Source: Nielsen Norman Group, 2016.
One ask, not several. A single request for the brief replaces scattered prompts, which lowers the decision load on a buyer comparing studios. Source: Nielsen Norman Group, 2013.
3. How should a design portfolio be arranged for a buyer?
Before: a portfolio organised for the studio, where the proof takes several clicks to reach.
After: a portfolio that can be taken in on one scroll, with the work readable before any click.
UX and UI analysis, before against after
Before: what the design cost the visitor
Organised for the studio, not the buyer. Reaching the proof took several clicks, and every step before the work is visible is a point where the information foraging research says people give up. Source: Xerox PARC, Pirolli and Card, Psychological Review, 1999.
Work not readable from the list. A buyer scanning a portfolio needs to see the work before deciding to open anything; thumbnails that hide the piece defeat the scan. Source: Nielsen Norman Group, 1997.
Decoration ahead of information. Eyetracking shows people skip decorative images and study informative ones, so a layout that led with styling rather than the work lost the attention it was built to hold. Source: Nielsen Norman Group, 2010.
After: what changed and why it works
One scroll takes it all in. The portfolio is laid out so a buyer sees the range of work in a single pass, which matches how the scanning research says people evaluate a page. Source: Nielsen Norman Group, 1997.
Readable before any click. Each piece is legible from the list, so opening a project is an informed choice rather than a gamble. Source: Nielsen Norman Group, 2010.
Recognised in milliseconds. The brain can identify an image in about 13 milliseconds. Putting the work itself in view lets that recognition sell before a word is read. Source: MIT, Potter et al., Attention, Perception and Psychophysics, 2014.
4. Can a store share a design system with the studio site?
Before: a storefront that looked visually detached from the studio site.
After: a storefront running on the same design system as the rest of the site.
UX and UI analysis, before against after
Before: what the design cost the visitor
A store that looked like another company. Visually detached from the studio site, it made a visitor moving between the two rebuild their trust, because the continuity that signals one organisation was missing. Source: Nielsen Norman Group, 2016.
Two sets of conventions. Different navigation, type and controls meant two interfaces to learn rather than one, the consistency failure the heuristics warn against. Source: Nielsen Norman Group, 2024.
Mismatched design quality. Visual design is the most cited credibility factor, so a store that looked less finished than the studio site undercut the studio's own claim to design skill. Source: Stanford Persuasive Technology Lab, Fogg et al., 2002.
After: what changed and why it works
One design system for studio and store. The same type, spacing, colour and controls run through both, so visitors carry their trust and their learned habits from one to the other. Source: Nielsen Norman Group, 2024.
Continuity as proof. A store that looks like the studio that built it is itself evidence of the studio's competence: the visual design credibility signal in action. Source: Stanford Persuasive Technology Lab, Fogg et al., 2002.
Nothing to relearn at checkout. Because the store follows the conventions the rest of the site already taught, the moment of purchase carries no new interface. Source: Nielsen Norman Group, 2017.
5. What should a contact page ask for first?
Before: a contact page opening with pleasantries and a bare form.
After: a contact page whose first field asks for the brief.
UX and UI analysis, before against after
Before: what the design cost the visitor
Small talk, then a bare form. A page that opens with pleasantries and an unlabelled form leaves the visitor to guess what to write. Unclear purpose is the leading cause of form abandonment in the usability guidance. Source: Nielsen Norman Group, 2018.
The important question last, or missing. The brief is what the studio needs and what the buyer has ready. Burying it wastes the one moment the visitor has decided to act. Source: Nielsen Norman Group, 2013.
No word on what happens after sending. Visibility of what comes next is a core heuristic, and a bare form offers none. Source: Nielsen Norman Group, 2024.
After: what changed and why it works
The brief is the first field. The page asks straight away for the thing that matters, so a visitor who arrived ready to describe a project can. Source: Nielsen Norman Group, 2018.
Fewer, clearer fields. A short form with a clear opening question cuts effort at the point of commitment, which the form research ties directly to completion. Source: Nielsen Norman Group, 2018.
What happens next, stated plainly. Telling the visitor what to expect after sending closes the loop the heuristics ask for. Source: Nielsen Norman Group, 2024.
Before against after, with the measured column
What | Before | After | Measured |
|---|---|---|---|
Routing | 1 blended route | 2 routes, services and store | Not measured |
Portfolio | Arranged for the studio | Skimmable in 1 scroll | Not measured |
Contact | Pleasantries, then a form | The brief asked first | Not measured |
Storefront | Visually detached | Same design system as the site | Not measured |
What was built?
Two separate routes, one for hiring the studio and one for buying from the store, each with a single action.
A portfolio that can be taken in on one scroll, with the work readable before any click.
A contact page whose first field asks for the brief, not its last.
A storefront on the same design system as the site, so both revenue lines read as one company.
The result
What changed, and what is not claimed?
A founder-led, full-scope engagement: strategy, design and development with the founders. Five page types shipped, each revenue line has its own route and its own single action, and no performance number is claimed.
The honest limitation
No analytics for this build have been verified, so this page makes no performance claim. What is known is the scope: strategy, design and development, run with the founders.
Other Projects
Want results like these for your brand?
Book a free call and we will map out what is possible for your project.
Book a call
Demand Designer®
Conversion-focused web design, ad creative and video editing for EOS®-run businesses in the United States.
© Demand Designer 2026. All rights reserved.
EOS® is a registered trademark of EOS Worldwide, LLC. Demand Designer is not affiliated with or endorsed by EOS Worldwide.