Naprico inc. Website Design and Build

A clear and fast site for the Naprico venture design studio. Easy to update, simple to read, and easy to contact | www.naprico.com

Role
Product design and front end
Timeline
June to August 2025
Tools
Next.js, Tailwind, Framer Motion
Infra
Vercel, Resend, GoDaddy DNS

Project overview

Challenge

Naprico needed a website that explained who they are, what they do, and how to reach them. They also wanted a stable base that could grow without a full rebuild.

Goal
  • Simple pages that tell a clear story
  • Fast load times on all devices
  • Accessible components and readable type
  • Reliable contact form that sends to email
Naprico home page hero
A simple structure that moves from brand story to services to proof and contact

Understanding the objective

Context

The team relied on a slide deck for one on one meetings. They wanted a site that could reach new clients, support outreach, and present a credible face to the market.

Success looked like
  • Clear brand message on the first screen
  • Services that are easy to skim
  • A founder section that adds trust
  • A contact form that works every time
Original materials used for discovery
Source content from the team shaped the first version of the site
reference 2
Source content continued

Starting the design

Approach

I began in Figma. We refined the content together and set a flow that supports conversion. Hero and call to action first, then about, services, proof, and contact.

Why clients on the page

Client logos build trust. They show real work and reduce doubt for first time visitors.

Early wireframes

Quick hand sketches to confirm flow and priorities before any polish.

Wireframe one
Wireframe two
Wireframe three

Digital mockups

A focus on clear hierarchy and calm reading. The structure came first.

Mockup one
Mockup two

Refining the design

Look and feel

We shifted to a dark blue base with white and red accents. It felt confident and distinct. Motion made the site feel alive but did not get in the way.

Content moves
  • A founder section that adds a personal touch
  • A real contact form with checks and a simple captcha
  • Service cards that expand for detail
  • A smooth client logo carousel for social proof
Final landing layout
Contact page
Founder section
Contact page

Development and build

Next.js

Fast, reliable, and friendly to search engines. It made it easy to keep content clear and crawlable.

Tailwind CSS

Quick to build and easy to keep consistent. It matched the Figma layouts with little friction.

Framer Motion

Light motion for a site that feels alive. Sections fade in, cards expand, and the client carousel scrolls smoothly.

Vercel

Smooth deploys and fast delivery across regions. Built in analytics gave simple insight after launch.

Resend

A secure way to send messages from the form without exposing email addresses.

Mobile menu

A simple full screen menu on phones with smooth scroll to sections.

Client carousel
Service cards
Mobile navigation

Outcomes

Clarity
Visitors understand services in fewer clicks
Speed
Optimised media and light components improve load
Contact
Form sends reliably and is easy to find
Search and domain

Google Search Console set up and a clean domain on GoDaddy.

Analytics

Vercel Analytics in place to watch visits and common exits.

Next steps

Case studies, simple search engine work, and a small shared component library.

Reflection and next steps

The final website gave Naprico a professional and credible online presence that went far beyond what they had before. Instead of a static slide deck, they now have a living site that introduces their brand, explains their services, highlights their clients and founder, and offers a reliable way to connect. For me, this project reinforced the value of pairing simple structure with details. A dark colour palette, subtle motion, and expandable sections were small choices that made the experience feel engaging.

At the same time, the build stayed light and flexible, which made it easy to deploy and easy for the client to maintain. Looking back, I am proud of how the design thinking process guided the work: starting from problem framing, moving through sketches and feedback, and ending with a site that directly met the client’s goals. It showed me that even a fairly straightforward website can be an opportunity to create something that feels both functional and human. Going forward, I see room to extend this work with deeper analytics, case studies, and SEO improvements, but as a foundation, the site represents a strong step for Naprico and a rewarding project for me as a designer and builder.