ABLE STUDIO's
Website
ABLE STUDIO's
Website
ABLE STUDIO's
Website
Spearheaded the design of Able Studio’s website, earning an Honorable Mention on Awwwards
Spearheaded the design of Able Studio’s website, earning an Honorable Mention on Awwwards
ABLE STUDIO's Website
ABLE STUDIO's Website
ABLE STUDIO's Website
ABLE STUDIO's Website
ABLE STUDIO's Website
ABLE STUDIO's Website
ABLE STUDIO's Website
ABLE STUDIO's Website
Context
Context
Context
Industry
Industry
Design Agency
Design Agency
Design Agency
Role
Role
Product Designer
Product Designer
Product Designer
Timeline
Timeline
Feb, 2023 ~ Sep, 2023
Feb, 2023 ~ Sep, 2023
Feb, 2023 ~ Sep, 2023
More Clients
More Clients
More Clients
More Clients
More Clients
More Clients
Team
Team
Product Designer x1 (Me)
Brand Designer x1
Full-Stack Developer x1 (Jude Wang)
Product Designer x1 (Me)
Brand Designer x1
Full-Stack Developer x1 (Jude Wang)
Product Designer x1 (Me)
Brand Designer x1
Full-Stack Developer x1 (Jude Wang)
Problem Statement
Problem Statement
Able Studio rebranded and aimed to attract more potential clients by leveraging its new identity. To support this, the website needed to better showcase its work, team, and services.
The previous site lacked a clear visual narrative, modern design, and structured content to effectively communicate the studio’s capabilities
Able Studio rebranded and aimed to attract more potential clients by leveraging its new identity. To support this, the website needed to better showcase its work, team, and services.
The previous site lacked a clear visual narrative, modern design, and structured content to effectively communicate the studio’s capabilities
Able Studio rebranded and aimed to attract more potential clients by leveraging its new identity. To support this, the website needed to better showcase its work, team, and services.
The previous site lacked a clear visual narrative, modern design, and structured content to effectively communicate the studio’s capabilities
Task
Task
Task
The task was to revamp the site using the new visual identity to better highlight completed projects, introduce the team, and clearly articulate the values Able Studio provides to its clients.
The task was to revamp the site using the new visual identity to better highlight completed projects, introduce the team, and clearly articulate the values Able Studio provides to its clients.
The task was to revamp the site using the new visual identity to better highlight completed projects, introduce the team, and clearly articulate the values Able Studio provides to its clients.
Business Goals
Business Goals
Increase brand visibility
Increase brand visibility
Increase brand visibility
Attract new client leads by showcasing studio capabilities
Attract new client leads by showcasing studio capabilities
Attract new client leads by showcasing studio capabilities
Highlight the expertise and personality of the team
Highlight the expertise and personality of the team
Highlight the expertise and personality of the team
Clearly communicate services and the studio’s unique value proposition
Clearly communicate services and the studio’s unique value proposition
Clearly communicate services and the studio’s unique value proposition
Impact
Impact
The new website led to a 20% increase in inquiries, strengthened the studio’s brand credibility, and helped attract new client leads.
The new website led to a 20% increase in inquiries, strengthened the studio’s brand credibility, and helped attract new client leads.
The new website led to a 20% increase in inquiries, strengthened the studio’s brand credibility, and helped attract new client leads.
The website received an Awwwards recognition, highlighting its balance of creativity, performance, and user experience.
The website received an Awwwards recognition, highlighting its balance of creativity, performance, and user experience.
The website received an Awwwards recognition, highlighting its balance of creativity, performance, and user experience.
Enhanced Brand Visibility: By planning the homepage and information architecture, you contributed to a design that effectively showcases Able Studio’s capabilities, aligning with the goal to increase brand visibility.
Enhanced Brand Visibility: By planning the homepage and information architecture, you contributed to a design that effectively showcases Able Studio’s capabilities, aligning with the goal to increase brand visibility.
Enhanced Brand Visibility: By planning the homepage and information architecture, you contributed to a design that effectively showcases Able Studio’s capabilities, aligning with the goal to increase brand visibility.
Action
Action
Action
Planning - Homepage
Planning - Homepage
First, we planned the key information to be featured on the homepage, including Able’s advantages, design highlights, full project portfolio, awards, and team introduction
First, we planned the key information to be featured on the homepage, including Able’s advantages, design highlights, full project portfolio, awards, and team introduction
Team
Team
Team
Blurb of Able Studio
Blurb of Able Studio
Blurb of Able Studio
Awards
Awards
Awards
Project Categories
Project Categories
Project Categories
Design Process
Design Process
Design Process
Design Regulation
Design Regulation
Design Regulation
Able’s Advantages
Able’s Advantages
Able’s Advantages
Design Spotlight
Design Spotlight
Design Spotlight
Grid System
Grid System
Grid System
UI Components
UI Components
UI Components
Colour Palette & Typography
Colour Palette & Typography
Colour Palette & Typography
Responsive Design
Responsive Design
Responsive Design
Information Architecture
Information Architecture
Information Architecture
User Flow
User Flow
User Flow
Planning - Information Architecture
Develop
Develop
Homepage
Case Study
Eye catching elements
Key Advantages:
1.You might miss the best practices?
- Enhances design usability
- Improves development efficiency
- Increases digital influence.
Awards received by Able Studio
A showcase of projects previously designed by the studio
This section highlights the talented individuals behind Able Studio.
2.Try focusing on the “Engineering design”
3.You’ve got to create “digital branding”
First Impression
Explore
Achievements
Work
Team Member
What’s Next for You?
Let’s explore how we can help you bring your vision to life
Homepage
Case Study
Eye catching elements
Key Advantages:
1.You might miss the best practices?
- Enhances design usability
- Improves development efficiency
- Increases digital influence.
Awards received by Able Studio
A showcase of projects previously designed by the studio
This section highlights the talented individuals behind Able Studio.
2.Try focusing on the “Engineering design”
3.You’ve got to create “digital branding”
First Impression
Explore
Achievements
Work
Team Member
What’s Next for You?
Let’s explore how we can help you bring your vision to life
Homepage
Case Study
Eye catching elements
Key Advantages:
- Enhances design usability
- Increases digital influence.
A showcase of projects previously designed by the studio
2.Try focusing on the “design engineering”
3.You’ve got to create “digital branding”
First Impression
Explore
Achievements
Work
Team Member
What’s Next for You?
1.You might miss the best practices?
This section highlights the talented individuals behind Able Studio
- Improves development efficiency
Awards received by Able Studio
Let’s explore how we can help you bring your vision to life
9:41
Contact
En
Steven Yeh
Chairman & CEO
20+ years experience on project management, 10+ years digital marketing and integration experience
Bright Su
CDO, Partner
15+ years experience on project management, 15+ years digital integration and more than 10 years system framework planning
Even Wu
Creative Director
20+ years digital design experience, had taken part in national leadership campaign website, done digital branding for listed company in the U.S
Ash Kao
Technical Director
20+ years technical development and management experience, had been taken part in government sectors, enterprises, international publishers on digital technical integration and application
Jude Wang
Frontend Master
20+ years Front-end engineering experience, had profiled front-end development projects for international bank, government sectors and start-ups
Vincent Tseng
Back-End Developer
15+ years Back-end engineering experience, co-worked with listed company in the U.S and start-ups
Jason Yang
UI/UX Designer
5+ years UI/UX design experience, had involved in design system for start-ups, retail and healthcare
Mila Zhao
UI/UX Designer
3+ years UI/UX design experience, had illustrated projects for government sectors, retail and system design
Pei-Ying Chen
Project Manager
3+ years experience on project management, had involved in operational planning in the publishing industry and government collaboration projects.
We’d love to hear from you
Full name
Please enter full Name
Please enter email address
Company name
Please enter company name
Project Wishes
Please enter project wishes
Send
Medium
2023 ALL RIGHTS RESERVED
Terms of Service
9:41
Contact
En
Website HighLights
Website HighLights
Hero Section
Hero Section
Hero Section
Key Advantages
Key Advantages
Key Advantages
Achievements to Contact
Achievements to Contact
Achievements to Contact
Case Study
Case Study
Case Study
Fast, Efficient, and Optimized
Fast, Efficient, and Optimized
Fast, Efficient, and Optimized
This website achieved high scores on Google PageSpeed Insights, confirming strong performance across loading speed, accessibility, and best practices
This website achieved high scores on Google PageSpeed Insights, confirming strong performance across loading speed, accessibility, and best practices
Learning
Learning
Learning
Transitions Are a Superpower
Thoughtfully designed transitions can do more than just add polish, they guide the viewer’s attention, create a sense of flow, and make the experience feel immersive.
Recognition Builds Confidence
Receiving an award for this project was a huge milestone. It reinforced my confidence not only in my UI design skills, but also in my ability to design thoughtful, user-centered experiences that resonate with both users and design communities.
Clear Notes Improve Teamwork
I learned that adding clear notes to my designs helps developers understand how things should work and makes it easier for the whole team to stay on the same page.
