Devicom
Turning Complexity Into Clarity
MY ROLE
UX/UI Designer — IA, Interaction Design, Design System, Visual Design
TEAM
PM, Front-end developer, Back-end developer
TIMELINE
Apr — Jun 2024
Overview
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.
Outcome
4X
New project inquiries grew 4x compared to the six months before launch
1
Client feedback
confirmed that Devicom’s services and capabilities are much easier to understand
2
•
The reorganized navigation made key service information easier to find
•
The website became a client-facing tool for sales conversations
•
The component-based system made content updates easier
User feedback
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 "
" I’m not sure where to find the service I’m looking for "
" I can’t quickly tell what services the company actually provides "
Stakeholder insights
•
Show 35 years of IT experience more clearly through a modernized design
•
Preserve the existing content and brand image
•
Highlight Web/Graphic design services to support new client inquiries
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
1
Unclear service value on the homepage
2
Scattered navigation structure
3
Inconsistent navigation behavior
4
Text-heavy content with weak hierarchy
5
Web/graphic services lacked a clear identity
Before & After
Before (Scroll↓ image)
The hero slider mainly highlighted the company’s years of experience, but the core services were not immediately clear from the first screen.
Service information was also spread across multiple sections further down the page.
After
Key services were featured in the slider to give users a quick preview of what Devicom offers.
A CTA was added for users who wanted to learn more, helping them understand the service direction and continue exploring from the first screen.
Simplifying navigation structure
Before
Service menu labels were unclear, and related services were spread across different groups. Users had to compare multiple menus before finding the information they needed.
After
The menu labels were replaced with clearer terms, and services were regrouped to simplify the navigation flow.
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.
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.
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.
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.
Final desgin
