Studio by Miyagami
Studio by Miyagami
Studio by Miyagami
How redefining Studio by Miyagami turned a half-built website into a brand with conviction.
How redefining Studio by Miyagami turned a half-built website into a brand with conviction.
How redefining Studio by Miyagami turned a half-built website into a brand with conviction.
Role
Brand Designer & Web Designer
Year
2024
project type
UX/UI
Deliverable
Website
Final product
Role
Brand Designer & Web Designer
Year
2024
project type
UX/UI
Deliverable
Website
Final product
Role
Brand Designer & Web Designer
Year
2024
project type
UX/UI
Deliverable
Website
Final product
Overview
Studio by Miyagami was conceived as the creative arm of Miyagami, but when I joined, it felt unfinished. A logo and color palette existed, along with a half-built Webflow site, yet the brand lacked depth. My task was to help transform it into something with clarity and direction.
Challenge
The biggest risk was indistinction. Without a clear story or visual consistency, Studio blended into the landscape of Webflow outfits, technically capable but forgettable. The challenge wasn’t to polish the surface, but to establish a brand that stood apart
Approach
I reframed the project through a brand sprint, defining purpose, values, and long-term vision. These insights became the foundation for the identity, photography, sales decks, and website design. The goal was to align every touchpoint under one coherent system.
Role
I led the sprint, wrote the brand fundamentals, and translated strategy into design: typography systems, grid structures, team portraits, and client-facing materials. On top of that, I designed the website itself; shaping the homepage, component systems, and interaction patterns in Figma before collaborating with developers for the build.
Overview
Studio by Miyagami was conceived as the creative arm of Miyagami, but when I joined, it felt unfinished. A logo and color palette existed, along with a half-built Webflow site, yet the brand lacked depth. My task was to help transform it into something with clarity and direction.
Challenge
The biggest risk was indistinction. Without a clear story or visual consistency, Studio blended into the landscape of Webflow outfits, technically capable but forgettable. The challenge wasn’t to polish the surface, but to establish a brand that stood apart
Approach
I reframed the project through a brand sprint, defining purpose, values, and long-term vision. These insights became the foundation for the identity, photography, sales decks, and website design. The goal was to align every touchpoint under one coherent system.
Role
I led the sprint, wrote the brand fundamentals, and translated strategy into design: typography systems, grid structures, team portraits, and client-facing materials. On top of that, I designed the website itself; shaping the homepage, component systems, and interaction patterns in Figma before collaborating with developers for the build.
Overview
Studio by Miyagami was conceived as the creative arm of Miyagami, but when I joined, it felt unfinished. A logo and color palette existed, along with a half-built Webflow site, yet the brand lacked depth. My task was to help transform it into something with clarity and direction.
Challenge
The biggest risk was indistinction. Without a clear story or visual consistency, Studio blended into the landscape of Webflow outfits, technically capable but forgettable. The challenge wasn’t to polish the surface, but to establish a brand that stood apart
Approach
I reframed the project through a brand sprint, defining purpose, values, and long-term vision. These insights became the foundation for the identity, photography, sales decks, and website design. The goal was to align every touchpoint under one coherent system.
Role
I led the sprint, wrote the brand fundamentals, and translated strategy into design: typography systems, grid structures, team portraits, and client-facing materials. On top of that, I designed the website itself; shaping the homepage, component systems, and interaction patterns in Figma before collaborating with developers for the build.
Design process
Discovery pulse quick audits of the existing site, sales decks, and competitor studios; pulled recurring themes and gaps.
Brand sprint : defined purpose, values, 10-year horizon, audience clusters, personality traits; aligned language and priorities.
Fundamentals doc : turned the sprint into guardrails: narrative, tone, messaging pillars, and usage rules for consistency.
Identity expansion : refined type hierarchy, spacing scale, grid logic, icon approach; set rules for imagery and color in UI vs. marketing.
Art direction & shoot : planned team portraits with minimal sets and clean light; edited for a consistent, approachable look.
Web design system : built a component library in Figma: hero patterns, cards, list modules, case tiles, testimonial blocks, CTAs, and nav/footer.
Page design : designed homepage and key flows with editorial grids, clear hierarchy, and content that maps to the new narrative.
Motion & micro-interactions : subtle hover states, scroll reveals under 200ms, mindful easing; no ornamental motion.
Accessibility & performance : contrast targets, focus states, reduced-motion fallbacks, image compression, and content order checks.
Dev handoff & QA : spec’d tokens and components, reviewed Webflow structure and responsive behavior, resolved edge cases pre-launch.
Design tool
Figma, Jitter, Adobe Suite, Productive.io, ChatGPT, Claude
Key design decision
The defining choice was to position Studio as a creative partner. Every design move — from the editorial grids and confident type to the website’s interaction design and photographic style — reinforced that identity.
Design process
Discovery pulse quick audits of the existing site, sales decks, and competitor studios; pulled recurring themes and gaps.
Brand sprint : defined purpose, values, 10-year horizon, audience clusters, personality traits; aligned language and priorities.
Fundamentals doc : turned the sprint into guardrails: narrative, tone, messaging pillars, and usage rules for consistency.
Identity expansion : refined type hierarchy, spacing scale, grid logic, icon approach; set rules for imagery and color in UI vs. marketing.
Art direction & shoot : planned team portraits with minimal sets and clean light; edited for a consistent, approachable look.
Web design system : built a component library in Figma: hero patterns, cards, list modules, case tiles, testimonial blocks, CTAs, and nav/footer.
Page design : designed homepage and key flows with editorial grids, clear hierarchy, and content that maps to the new narrative.
Motion & micro-interactions : subtle hover states, scroll reveals under 200ms, mindful easing; no ornamental motion.
Accessibility & performance : contrast targets, focus states, reduced-motion fallbacks, image compression, and content order checks.
Dev handoff & QA : spec’d tokens and components, reviewed Webflow structure and responsive behavior, resolved edge cases pre-launch.
Design tool
Figma, Jitter, Adobe Suite, Productive.io, ChatGPT, Claude
Key design decision
The defining choice was to position Studio as a creative partner. Every design move — from the editorial grids and confident type to the website’s interaction design and photographic style — reinforced that identity.
Design process
Discovery pulse quick audits of the existing site, sales decks, and competitor studios; pulled recurring themes and gaps.
Brand sprint : defined purpose, values, 10-year horizon, audience clusters, personality traits; aligned language and priorities.
Fundamentals doc : turned the sprint into guardrails: narrative, tone, messaging pillars, and usage rules for consistency.
Identity expansion : refined type hierarchy, spacing scale, grid logic, icon approach; set rules for imagery and color in UI vs. marketing.
Art direction & shoot : planned team portraits with minimal sets and clean light; edited for a consistent, approachable look.
Web design system : built a component library in Figma: hero patterns, cards, list modules, case tiles, testimonial blocks, CTAs, and nav/footer.
Page design : designed homepage and key flows with editorial grids, clear hierarchy, and content that maps to the new narrative.
Motion & micro-interactions : subtle hover states, scroll reveals under 200ms, mindful easing; no ornamental motion.
Accessibility & performance : contrast targets, focus states, reduced-motion fallbacks, image compression, and content order checks.
Dev handoff & QA : spec’d tokens and components, reviewed Webflow structure and responsive behavior, resolved edge cases pre-launch.
Design tool
Figma, Jitter, Adobe Suite, Productive.io, ChatGPT, Claude
Key design decision
The defining choice was to position Studio as a creative partner. Every design move — from the editorial grids and confident type to the website’s interaction design and photographic style — reinforced that identity.
Result
The launch delivered both external and internal results. The new website earned an Awwwards Site of the Day, while the team gained alignment and confidence. Sales materials carried the identity consistently, and clients began to see Studio as a partner with its own distinctive voice.
Key learning
Design work has the most impact when strategy and craft reinforce each other. Clear principles informed the visual system, and the visual system gave strategy tangible expression.
Conclusion
Redefining Studio by Miyagami remains one of my proudest projects. It proved that asking harder questions and carrying them through into design, from brand foundations to the website itself, can transform how a studio is seen, both inside and out.
Result
The launch delivered both external and internal results. The new website earned an Awwwards Site of the Day, while the team gained alignment and confidence. Sales materials carried the identity consistently, and clients began to see Studio as a partner with its own distinctive voice.
Key learning
Design work has the most impact when strategy and craft reinforce each other. Clear principles informed the visual system, and the visual system gave strategy tangible expression.
Conclusion
Redefining Studio by Miyagami remains one of my proudest projects. It proved that asking harder questions and carrying them through into design, from brand foundations to the website itself, can transform how a studio is seen, both inside and out.
Result
The launch delivered both external and internal results. The new website earned an Awwwards Site of the Day, while the team gained alignment and confidence. Sales materials carried the identity consistently, and clients began to see Studio as a partner with its own distinctive voice.
Key learning
Design work has the most impact when strategy and craft reinforce each other. Clear principles informed the visual system, and the visual system gave strategy tangible expression.
Conclusion
Redefining Studio by Miyagami remains one of my proudest projects. It proved that asking harder questions and carrying them through into design, from brand foundations to the website itself, can transform how a studio is seen, both inside and out.
Credits
Assignment achieved through Miyagami.
Abigail Levy - Junior Designer
Barbara Mota - Webflow Developer
Credits
Assignment achieved through Miyagami.
Abigail Levy - Junior Designer
Barbara Mota - Webflow Developer
Credits
Assignment achieved through Miyagami.
Abigail Levy - Junior Designer
Barbara Mota - Webflow Developer
AVAILABLE FOR WORK
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
AVAILABLE FOR WORK
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
AVAILABLE FOR WORK
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
AVAILABLE FOR WORK
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
AVAILABLE FOR WORK
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO
LET'S TALK SO SAY HELLO