01 /

PROJECT

02 /

ABOUT

03 /

CV

MTL

18:37

Devicom

Devicom

Devicom

Turning complexity into clarity

Devicom is a 35-year-old IT company whose previous website had a scattered service structure, making it difficult for users to quickly understand its core offerings. This full website redesign focused on reorganizing the site structure and content layouts so users could find the information they needed more easily.

My role

Lead UX/UI Designer – UX/UI, Interaction, IA, Design System, Digital Design

Type

Responsive Website

Team

PM, Front-end developer, Back-end developer

Timeline

Apr - Nov 2024

Live website

Live website

1.

1.

Outcome

Outcome

4X

New project inquiries grew 4x compared to the six months before launch

New project inquiries grew 4x compared to the six months before launch

Client feedback

Confirmed that company's services and capabilities are much easier to understand

Confirmed that company's services and capabilities are much easier to understand

•

The reorganized navigation made key service information easier to find

The reorganized navigation made key service information easier to find

•

The website became a client-facing tool for sales conversations

The website became a client-facing tool for sales conversations

•

The component-based system made content updates easier

The component-based system made content updates easier

2.

2.

User feedback

User feedback

To understand the main usability issues, I collected feedback from potential users and internal stakeholders during the early stage of the project

To understand the main usability issues, I collected feedback from potential users and internal stakeholders during the early stage of the project

" There is a lot of information, but I don’t know what to look at first "

" There is a lot of information, but I don’t know what to look at first "

" I’m not sure where to find the service I’m looking for "

" I’m not sure where to find the service I’m looking for "

" I can’t quickly tell what services the company actually provides "

" I can’t quickly tell what services the company actually provides "

3.

3.

Stakeholder insights

Stakeholder insights

•

Show 35 years of IT experience more clearly through a modernized design

Show 35 years of IT experience more clearly through a modernized design

•

Preserve the existing content and brand image

Preserve the existing content and brand image

•

Highlight Web/Graphic design services to support new client inquiries

Highlight Web/Graphic design services to support new client inquiries

4.

4.

Key Problem

Key Problem

The main issue was not only the outdated visual design, but also the lack of a clear path to understand services, find relevant information, and take the next step

The main issue was not only the outdated visual design, but also the lack of a clear path to understand services, find relevant information, and take the next step

1

Unclear service value on the homepage

Unclear service value on the homepage

2

Scattered navigation structure

Scattered navigation structure

3

Inconsistent navigation behavior

Inconsistent navigation behavior

4

Text-heavy content with weak hierarchy

Text-heavy content with weak hierarchy

5

Web/graphic services lacked a clear identity

Web/graphic services lacked a clear identity

5.

Before & After

Improving First Impression

Improving First Impression

Before

The hero section emphasized the company's experience and history, but it didn't clearly communicate what services Devicom provided. Service information was also scattered across multiple sections, making it difficult for users to quickly understand the company's offerings.

The hero section emphasized the company's experience and history, but it didn't clearly communicate what services Devicom provided. Service information was also scattered across multiple sections, making it difficult for users to quickly understand the company's offerings.

After

The hero section was redesigned to showcase Devicom's core services from the first screen, giving users an immediate understanding of what the company offers. A clear call-to-action was also introduced, encouraging users to explore relevant services and continue their journey seamlessly.

The hero section was redesigned to showcase Devicom's core services from the first screen, giving users an immediate understanding of what the company offers. A clear call-to-action was also introduced, encouraging users to explore relevant services and continue their journey seamlessly.

Simplifying Service Navigation

Simplifying Service Navigation

Before

Service labels lacked clarity, and related services were scattered across multiple navigation groups. Users had to explore several menus before locating the information they needed.

Service labels lacked clarity, and related services were scattered across multiple navigation groups. Users had to explore several menus before locating the information they needed.

After

The menu labels were replaced with clearer terms, and services were regrouped to simplify the navigation flow. This helped users reach the right information more quickly.

The menu labels were replaced with clearer terms, and services were regrouped to simplify the navigation flow. This helped users reach the right information more quickly.

Creating a consistent navigation experience

Creating a consistent navigation experience

Before

The submenu in the navigation did not match the tab menu shown on the page.

Tab behavior was also inconsistent. Some tabs opened new pages, while others linked to sections or external websites, making navigation harder to predict.

After

The navigation and tab structure were aligned to create a clearer relationship between pages and service categories. Tab behavior was standardized so users could navigate more predictably. Breadcrumbs were also added to improve location awareness.

Improving content hierarchy for better scanning

Before

The pages relied heavily on text and had weak visual hierarchy, so key information did not stand out clearly. The CTA flow was also weak, and technical descriptions made the value of each service hard to understand.

The pages relied heavily on text and had weak visual hierarchy, so key information did not stand out clearly. The CTA flow was also weak, and technical descriptions made the value of each service hard to understand.

After

The visual hierarchy was improved so users could scan key information more quickly. CTAs were placed along the user flow, and the content was structured from a service summary to a detailed page, allowing users to explore information step by step.

The visual hierarchy was improved so users could scan key information more quickly. CTAs were placed along the user flow, and the content was structured from a service summary to a detailed page, allowing users to explore information step by step.

Creating a stronger identity for web/graphic service

Creating a stronger identity for web/graphic service

Before

The web/graphic department was not clearly presented as a dedicated service area, so it was easy for users to overlook its role and expertise. The portfolio also linked directly to external websites without explaining the project.

The web/graphic department was not clearly presented as a dedicated service area, so it was easy for users to overlook its role and expertise. The portfolio also linked directly to external websites without explaining the project.

After

The page was redesigned to feel like a dedicated agency-style service. Interaction and visual design were used to make the service feel more engaging and distinct.

When users clicked on a project, a popup showed the project background and outcomes, helping them understand the actual scope and capabilities of the work.

The page was redesigned to feel like a dedicated agency-style service. Interaction and visual design were used to make the service feel more engaging and distinct.

When users clicked on a project, a popup showed the project background and outcomes, helping them understand the actual scope and capabilities of the work.

The page was redesigned to feel like a dedicated agency-style service. Interaction and visual design were used to make the service feel more engaging and distinct.

When users clicked on a project, a popup showed the project background and outcomes, helping them understand the actual scope and capabilities of the work.

6.

Final desgin

Explore Design File

7.

Branding