Groweva

Building a distinct digital presence for a creative studio

Groweva is a creative studio bringing together brand identity, web design, search essentials, and ongoing creative support. I designed its website to introduce the studio, present its work, and give potential clients a clear way to explore its services.

The project brought together visual direction, content structure, interface design, responsive refinement, Figma design, and WordPress implementation with Elementor. A working browser prototype helped evaluate the layout and interactions throughout the process.

Project: Creative studio website Role: Web designer and Elementor developer Responsibilities: Visual direction, content hierarchy, interface refinement, responsive layouts, and implementation Design and build: Figma · WordPress · Elementor Supporting tools: HTML · CSS · JavaScript · Lottie Website: groweva.com

The business goal

Groweva needed a digital home that could communicate its services and establish a recognizable visual identity. The website had to introduce the studio in a way that felt approachable, while giving enough detail for someone considering a branding or website project.

I wanted visitors to understand the offer, see the quality and range of the work, and know where to start. That meant treating the homepage as a sequence of useful decisions: what to read first, where to explore further, and when to take action.

The central goal was to make the studio feel distinctive and easy to understand.

The design challenge

Creative studio websites need to show personality, but expressive layouts can make the practical information harder to find. Groweva needed both: a memorable first impression and a clear explanation of its services.

The main challenges were balancing large typography with readable supporting content, keeping a layered hero composition organized, and carrying the same visual quality across desktop, tablet, and mobile.

I also wanted the identity to feel specific to Groweva. References helped establish an initial direction, but the final colors, composition, and details needed to form a coherent identity of their own.

Defining the visitor journey

I designed around small business owners and founders considering support with their brand or website. The page structure responds to four practical questions:

• What does Groweva do?
• Does the work fit the business?
• What would working together involve?
• How do I take the next step?

The hero introduces the positioning and gives visitors two routes: start a project or explore the work. The studio introduction adds context, selected work demonstrates the visual range, and the service section explains the offer in more detail.

Process and FAQ sections then address the working relationship and common practical questions. Studio notes add depth before the final contact panel invites a conversation.

Establishing the visual identity

The visual direction combines generous typography, warm backgrounds, layered imagery, and small graphic details. The aim was to give Groweva an approachable personality with enough structure to support a professional service website.

An early purple palette felt too close to the initial reference. I moved the identity toward warm ivory, deep teal, and burnt orange, with sage and sand supporting the softer sections and decorative elements.

The lighter sections give the copy room to breathe. The dark work section creates a deliberate change of pace and brings attention to the project artwork. Repeated star motifs, arrows, and rounded shapes connect the different parts of the page.

Designing the first impression

The headline, “Your next chapter looks good,” introduces growth in language that feels personal and direct. Supporting copy explains the services without asking visitors to interpret the headline on its own.

Alongside the text, the hero combines photography with a growth chart, a small plant image, a purpose statement, and a circular note. These elements give the studio a visual personality while reinforcing the idea of thoughtful progress.

The first arrangement used tilted cards. I straightened the cards around the photograph after reviewing the composition. This made the small text easier to read and reduced visual tension, while the overlaps retained the layered character of the design.

Creating a consistent type hierarchy

Typography became an important part of the refinement process. The main headlines already had presence, but some paragraphs, labels, and footer details were too small relative to them.

I reviewed text according to its purpose across the page. Body copy was standardized at 16 px with comfortable line spacing. Navigation increased to 18 px. Numbered section labels use matching 18 px numbers and titles, while card headings and their related numbers follow the same scale.

I also enlarged the notebook links, contact eyebrow, and footer text so these remained visible parts of the experience.

The result was a more balanced hierarchy. Visitors can move from the headline to the explanation and then to an action without encountering a sudden drop in readability.

Presenting the work

The selected-work section introduces three projects:

• Morrow: skincare brand identity and packaging, with a quiet visual direction built around a slower daily ritual.
• Forma: an architecture website focused on space, imagery, and restrained typography.
• Good Day: coffee branding and packaging with a warmer, more energetic personality.

Each project has its own character, while a consistent relationship between artwork, title, and supporting information holds the section together.

The cards also open short project stories, giving visitors more context than a standalone image. This makes the work section useful both for a quick visual review and for a closer look at the design direction.

Translating the direction into Figma

Figma provided the visual reference for carrying the design into Elementor. The important decisions to preserve were the type hierarchy, color relationships, section composition, and responsive priorities.

I treated the interface as a connected system. Buttons needed related treatments throughout the page. Numbered labels needed consistent visual weight. Project cards could vary in composition while keeping a recognizable structure.

The browser prototype complemented this reference by showing how the page behaved: the hero entrance, accordion changes, project dialogs, and the movement from a two-column layout into a stacked mobile composition.

This made the transition into the build about preserving the design’s relationships as well as its appearance.

Building in WordPress and Elementor

I recreated the design in WordPress using Elementor, carrying across the content structure, visual hierarchy, and responsive layout decisions.

The main implementation challenge was balancing structured content with expressive artwork. Text sections needed a predictable reading order, while the hero needed controlled overlaps. Keeping the collage within a dedicated composition area helped manage those different requirements.

Consistent styling remained a priority during the build: related button treatments, repeatable section spacing, a clear type scale, and defined behavior when columns stack.

The page also needed to work outside the desktop editor. Responsive review focused on line wrapping, the relationship between text and imagery, navigation, and the space available for supporting details.

Adding motion and interaction

Motion gives the page a sense of progression and provides feedback during interaction. The hero introduces its text and artwork in sequence, sections reveal as they enter the viewport, and accordions expand to show more detailed content.

Three original Lottie animations were created for the browser prototype: a rising growth chart, a drawn arrow, and a gently turning studio star. Matching their colors and shapes to the identity helped them feel like part of the page.

The prototype plays its main reveals once, pauses motion when it is offscreen or the tab is hidden, and provides still artwork for visitors who prefer reduced motion. These behaviors provided the interaction reference for the rebuilt experience.

Reviewing across devices

Responsive refinement involved adapting the composition to the available space. On smaller screens, the hero text and artwork stack, navigation becomes a compact menu, and project cards and process steps move into a single-column reading order.

Browser checks at desktop, tablet, and phone widths helped identify spacing, wrapping, and overflow issues in the prototype. An iPad review also revealed a platform-specific detail: the text-based star symbols were appearing as green emoji.

I replaced them with SVG artwork throughout the interface, including the logo, labels, project graphics, and article popup. The icons now retain their intended shape and color across platforms.

This reinforced the importance of checking small interface details as carefully as the larger layout.

The outcome

Groweva now has a defined visual identity and a complete website experience that introduces the studio, explains its services, presents selected work, and guides visitors toward the next step.

The project brings together visual direction, Figma design, an interactive browser prototype, and an Elementor implementation. Its strongest improvements came through focused refinement: a more independent palette, clearer typography, a calmer hero composition, and consistent artwork across devices.

Groweva demonstrates how I connect design decisions with implementation. It shows the reasoning behind the interface alongside the finished result.

What I would carry into the next project

The design became stronger as its underlying rules became more consistent. Enlarging supporting text, matching labels and numbers, and straightening the hero cards improved the experience without adding more visual elements.

Working across Figma, a browser prototype, and Elementor also reinforced the value of a clear handoff. Typography, spacing, artwork behavior, and responsive priorities need to remain coherent as a design moves between tools.

I would bring those lessons into future work by defining the content hierarchy early, documenting responsive decisions alongside the desktop design, and reviewing the rendered interface throughout the build.