Aphrodi: the website and client panel of a creative agency
Aphrodi is a creative agency: visual identity, interface design, video and copy. We built its website with a content back end and analytics of its own, and the panel where the agency's clients run their projects, payments and referrals.
The Aphrodi website
The dark, moody look of Aphrodi's design, carried into code without simplifying it: services, the agency, pricing with category pages, a blog, questions and contact.
Aphrodi
A pixel-perfect build of the design
Page transitions, scroll motion and the design's hover states on every element.Content from its own back end
Services, projects, questions, pricing and the blog read from the API, with a prerender serving ready HTML.In Polish and English
Every page in both languages, and every blog post with its own address, title and Google description in each.
One identity on the site and in the panel
The palette, typefaces and corner radii of Aphrodi's design are written into the code as one set of tokens. The site and the client panel carry the same values in their code, so every screen looks like the same brand.
Palette
- Background#1E1511
- Sections#2A1C14
- Cards#3A261A
- Borders#543826
- Text#FDFBF7
- Secondary text#D4C5B9
- Gold#D4AF37
- Gold on hover#F1D570
Typefaces
- Outfitheadings
- Interbody text
- JetBrains Monocodes, links and invoice numbers
Corner radii
- Buttons6 px
- Cards10 px
- Panels14 px
A blog and content without a developer
The Aphrodi team runs the blog, projects and services itself, in an admin panel behind a sign-in. The site reads everything from the back end's own API.
A post in the admin panel
One form for both language versions.
- Title, subtitle, excerpt and body in Polish and English
- A cover from files uploaded to the server
- Blog categories the team creates itself
A draft, then publication
A post waits as a draft until the team publishes it.
- A publication date set on the post
- Its own address in each language
- A Google title and description in each language
A ready page
The back end serves the content through its API and a prerender serves ready HTML.
- Services, projects, questions, pricing and the blog from one API
- A sitemap generated by the back end
- An llms.txt file and JSON versions of the pages for AI assistants
An offer laid out across its own pages
Each of Aphrodi's eight services has a page with its description and a list of what it covers, and the pricing has its own category of packages for it. All of it in both languages.
Visual identity
- A logo in primary, monochrome and negative versions
- A colour palette with RGB, CMYK and HEX codes
- A brand book in PDF and an editable file
Web design (UI/UX)
- Information architecture and a sitemap
- An interactive prototype in Figma
- A design system with reusable components
Print and merchandise
- DTP design ready for print
- Designs for posters, roll-ups and catalogues
- Designs for T-shirts, bags, mugs and packaging
Social media
- Post and story templates
- Ad creatives for campaigns
- Editable files in Canva or Figma
Graphics and illustrations
- Vector illustrations in the brand's style
- Infographics and campaign key visuals
- Characters and brand mascots
Video editing
- Reels in the 9:16 format
- Ad spots and product videos
- Colour grading, captions and sound
3D models
- Models of products and objects
- Photorealistic renders and packshots
- Models prepared for 3D printing
Copywriting
- Website copy
- Product and category descriptions
- Blog articles written for SEO
Analytics with no third-party scripts
The site records its traffic on our server, and the Aphrodi team reads the results in the admin panel for the last 7, 30 or 90 days.
What every page view records
- Page and language
The address of the page visited and its language version.
- Where the visitor came from
The website the visit came from.
- Referral code
A partner's code, when the visit began from a link with one.
- Scroll depth
How far down the page the visitor scrolled.
- Time
How long they stayed on the page.
- Session
The page views of one visit tied together.
What the team sees in the admin panel
- Traffic over time
Sessions and page views day by day on a chart.
- Most viewed pages
Each with its average scroll depth and time.
- Paths
The most common routes visitors take through the pages.
- FAQ questions
Clicks on each question, by section.
- Events
Site events counted by type and detail.
- The last 24 hours
Page views in five-minute slots and the latest events.
The Aphrodi client panel
An agency client signs in to a panel in Aphrodi's identity and finds everything about their work there: projects, payments, conversations with the team and news.
Overview
The wallet balance, active projects, unread replies and recent activity on one screen.
Projects
The budget and progress of every project, and inside it the details, schedule, reports, chat with the team and documents.
Billing
Invoices and transactions, a wallet topped up with an online payment and invoices paid from the wallet.
Support
Tickets with the conversation history, Markdown text, attachments and extra participants.
News
Announcements, the blog, a changelog and the roadmap, with an unread count in the menu.
The affiliate programme in the panel
Every Aphrodi client can refer the agency onwards. The panel runs the whole referral, from the link to the commission in the wallet.
A link with a code of one's own
The client copies the referral link from the panel and can change its code to one of their own.
A discount for the referred client
The referred client gets a percentage or fixed discount, and the referral stays valid for a set time or without a limit.
Commission from payments
The referred client's payments earn a commission, and the team can set a separate rule for a chosen person.
Wallet and history
The commission lands in the wallet the client pays invoices from, and the panel shows clicks, referred clients and the commission history.
The client's account and security
Clients manage their panel account themselves, and every sensitive change needs a password or a link from an email.
Account
- Sign-up
An account opened with an email address the client confirms with a link.
- Invoice details
Company name, tax number and address in the account settings.
- Notifications
For projects, tickets, billing and news the client chooses whether they arrive in the panel or by email.
- Account deletion
Confirmed with the password and a link from an email, with time to cancel.
Security
- Password reset
A link to the email address when a client forgets the password.
- Password change
Only with the current password, and the new one has at least 8 characters.
- Email change
Takes effect only after the link sent to the new address is clicked.
- Sign-in history
The latest sign-ins to the account, with the device and IP address.
Questions about this project
Read next
The other case studies and the services that draw on this work.
