SPIRAL 9
Brand company official web design
Overview
As a freelance designer, I supported Spiral 9 in rapidly shaping their new website by conducting competitive research and defining the site’s structure and visual direction. Targeting a young audience, I analyzed market trends and industry benchmarks to propose a minimalistic, dynamic, and user-focused design. The project is currently in the pre-launch phase.
Location
London, UK
Client
Spiral 9
Role
UI Designer
Structure Builder
Design team
Shaoxiong Guo
Kaycee Liu
Jenny Deng
Jianan Li
Duration
11.2024 - 01.2025 (2 months)
#
2A0095
#
7E52FF
#
907CFF
#
A799FF
#
EEEBFF
#
F0F4FF
#
B8FF00
#
E0FF8F
#
F4FFD6
#
FBFFF2
#
252736
#
061C3D
#
42526B
#
DADBDF
#
F3F3F3
Poppins
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Aa
Regular
Aa
Medium
Aa
Semi-Bold
Aa
Bold
Margin: 60px
Gutter: 24px
Width: 88px
Desktop grid
Counts: 12 column, Margin: 60px, Gutter: 24px, Width: 88px
Tablet grid
Counts: 8 column, Margin: 56px,
Gutter: 30px, Width: 64px
Margin: 56px
Gutter: 30px
Width: 64px
Mobile grid
Counts: 6 column, Margin: 48px,
Gutter: 16px, Width: 36px
Margin: 48px
Margin: 48px
Width: 36px
Gutter: 16px
Spiral
9
Spiral
9
Spiral
9
Spiral
9
SPIRAL UP YOUR BRAND WITH POWERFUL DIGITAL MARKETING
SPIRAL UP YOUR BRAND WITH POWERFUL DIGITAL MARKETING
SPIRAL UP YOUR BRAND WITH POWERFUL DIGITAL MARKETING
PROJECT PROCESS
Iterate
Decision strategy
Competitive analysis
Figure out
design purpose
Structure design
Visual design
Developer
check
Prototype
Polished version
Add Feature
CHALLENGE
TO DO LIST
Tight timeline & Insufficient user data
Differentiate oneself from the competition
Select the quickest and resource-efficient research method
Without brand
Collect data on competitors
Only use the provided templates
Establish a fundamental brand system
Design work on colours, background images, and icons.
WHY COMPETITIVE ANALYSIS
A comparison of all research methods through AI tools resulted in the selection of competitive analysis as the most time and resource efficient main research method.
Collect data on the structure of the home pages of similar branded company websites and analyse the storytelling logic of the home pages in this industry.
Bou
Air Social
Propeller
CB Website Design
Section
Basic Section
✅
✅
✅
—
✅
✅
—
—
—
—
—
✅
✅
✅
✅
✅
✅
✅
✅
—
✅
—
—
—
✅
✅
✅
✅
—
—
✅
✅
✅
✅
—
—
—
✅
✅
✅
✅
✅
—
✅
—
—
✅
✅
✅
✅
✅
✅
Hero Section
Navigation / Header
Intro / Value Proposition
About / Team Section
Services Overview
Clients / Logo Banner
Case Studies / Results
Testimonials / Social Proof
Unique Selling Points (What Makes Us Different)
Process / Workflow Section
Blog / Insights
Call to Action / Contact Form
Footer
Retain Section
Build a wireframe based on the basic storytelling logic of the competitive analysis and add a unique section.
Navigation
Fixed at the top of the page for convenient navigation to any son pages.
Value Proposition
Inform users what the brand is doing.
Clients Logo
1st. Hero
Occupying the foremost visual position, it immediately implants the brand impression.
2nd. Case Studies
Case library display. Allows users to find cases they want to emulate.
Other Services
Other services are likewise provided and needs can be taken care of in a one-stop shop.
3rd. Testimonials
Comments from former employers give new employers the confidence to work with us.
4th. Unique Service
Promote differentiated and unique services. And tell users what it can do for them.
Contact Us
Increase our chances of being contacted after the user has seen the entire home page.
Footer
Recreate the navigation so that the user has once can go to any page after reading that page.
Social Media
Web Design
Email Marketing
Design Pro Package
Paid Ads
Home
About
Careers
Case 1
Case 2
Case 3
More work
London
Studio 304 Clerkenwell Workshop
27-31 Clerkenwell Close
London
EC1R 0AT
LOGO
We have a newsletter
Our research shows that people just aren't getting enough emails.
Your email
Submit
Company
Work
Service
Caught your attention?
Let's see how we can partner to drive results for your business.
Contact us
AI-Powered Website Builder
At the forefront of innovation, we’ve developed an AI website builder designed to revolutionize the way you manage your digital presence. With the power of AI, users can:
Continuously Improve & Optimize their website’s design and functionality.
Enhance User Experience dynamically based on AI-driven insights.
Streamline Updates effortlessly, saving time and resources.
Whenever we need a fresh new perspective for branding Helsinki internationally
Brand name
People name (wrote the feedback)
Position Title
LOGO
Flip Button
Because it simply makes so much
Because it simply makes so much
Because it simply makes so much
LOGO
LOGO
LOGO
LOGO
LOGO
LOGO
LOGO
Spira9art delivers user-centric, AI-driven digital solutions, blending creative design and cutting-edge technology to elevate online presence.
Work
Client
Service
About
Contact
LOGO
User-Centric Designs
We design with your audience in mind, enhancing engagement and satisfaction.
Brand Identity First
Every visual element reflects your unique story and values.
Cutting-Edge Development
Fast, secure, and scalable websites built with the latest technology.
We build brands across marketing, design, communications & PR, and web development.
Because it simply makes so much sense to offer them all in one. Less proposal requests and project management for you,
Social Media
Email Marketing
Design Pro Package
Paid Ads(Google/Social Media)