drag
drag
drag

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

Product

Website

Role

UI/UX Designer

Timeline

Feb, 2023 ~ Sep, 2023

Team

Ui/UX Designer x1 (My Role), Brand Designer x1, Full-Stack Developer x1

Why the website needed a redesign

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

More Clients

More Clients

More Clients

More Clients

More Clients

More Clients

My 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.

Business Goals

  1. Increased brand visibility

  1. Increased brand visibility

  1. Attracted new client leads by showcasing studio capabilities

  1. Attracted new client leads by showcasing studio capabilities

  1. Highlighted the expertise and personality of the team

  1. Highlighted the expertise and personality of the team

  1. Clearly communicate services and the studio’s unique value proposition

  1. Clearly communicate services and the studio’s unique value proposition

Results

Results

Results

Impact

  1. Increase Inquiries and Client Leads:

    The new website led to a 20% increase in inquiries, strengthened the studio’s brand credibility, and helped attract new client leads.

  1. Increase Inquiries and Client Leads:

    The new website led to a 20% increase in inquiries, strengthened the studio’s brand credibility, and helped attract new client leads.

  1. Increase Inquiries and Client Leads:

    The new website led to a 20% increase in inquiries, strengthened the studio’s brand credibility, and helped attract new client leads.

  1. Awwwards Recognition for Creativity and UX:

    The website received an Awwwards recognition, highlighting its balance of creativity, performance, and user experience.

  1. Awwwards Recognition for Creativity and UX:

    The website received an Awwwards recognition, highlighting its balance of creativity, performance, and user experience.

  1. Awwwards Recognition for Creativity and UX:

    The website received an Awwwards recognition, highlighting its balance of creativity, performance, and user experience.

  1. Improve Brand Visibility Through Strategic IA: 
    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.

  1. Improve Brand Visibility Through Strategic IA: 
    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.

  1. Improve Brand Visibility Through Strategic IA: 
    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.

Links
Links

Current Website

Award Highlights

Process

Process

Process

Planning - Stakeholder and Client interviews

Conducted interviews with stakeholders and clients to understand their needs and expectations for the website redesign. Key insights included:

  • Desire to showcase the studio’s capabilities

  • Interest in viewing past work and case studies

  • Importance of introducing team members and their backgrounds

  • Stakeholders emphasized highlighting awards and achievements

Planning - Sitemap

I planned the key information to be featured on the homepage, including Able’s advantages, design highlights, full project portfolio, awards, and team introduction

I planned the key information to be featured on the homepage, including Able’s advantages, design highlights, full project portfolio, awards, and team introduction

I 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

Content Planning & UI Design

Mapped the content and messaging goals for each homepage and case study section, then designed the UI to clearly support and reflect those objectives.

Homepage

Case Study

UX Strategy
UI Design

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

UX Strategy
UI Design

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

UX Strategy
UI Design

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

Email

Please enter email address

Company name

Please enter company name

Project Wishes

Please enter project wishes

Send

Instagram

Facebook

Linkedin

Medium

2023 ALL RIGHTS RESERVED

Terms of Service

9:41

Contact

En

Website HighLights
Hero Section
Key Advantages
Achievements to Contact
Case Study
Fast, Efficient, and Optimized

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.