🟠 LAUNCHING 2027
An Cường Library
An Cường Library
An Cường Library
An Cường has made wood-working materials in Vietnam since 1994: melamine, laminate, acrylic and veneer surfaces for furniture and interiors. Its app, An Cường Library, held the whole product range, but it worked like a printed catalogue. People could browse it, then hit a dead end.
During my internship at xolve, a senior designer and I took the app from audit to clickable prototype between June and September 2026: research into the old app, a new structure, two design directions, a design system, user flows, wireframes and the final screens. The new app is expected to launch in early 2027.
An Cường has made wood-working materials in Vietnam since 1994: melamine, laminate, acrylic and veneer surfaces for furniture and interiors. Its app, An Cường Library, held the whole product range, but it worked like a printed catalogue. People could browse it, then hit a dead end.
During my internship at xolve, a senior designer and I took the app from audit to clickable prototype between June and September 2026: research into the old app, a new structure, two design directions, a design system, user flows, wireframes and the final screens. The new app is expected to launch in early 2027.
Client
Client
An Cường, Hồ Chí Minh City, Vietnam
An Cường, Hồ Chí Minh City, Vietnam
Year
Year
2026 · Launching early 2027
2026 · Launching early 2027
Project type
Project type
UX Audit, Information Architecture, Design Direction, Design System, UI Design, Prototyping
UX Audit, Information Architecture, Design Direction, Design System, UI Design, Prototyping
Credits
Credits
UX strategy and app design by xolve. Product images © An Cường.
UX strategy and app design by xolve. Product images © An Cường.
My role
My role
Brand Designer (Intern) at xolve, working with a senior designer on every stage: the audit, both design directions, the font round, design system, user flows, wireframes, final screens and clickable prototype.
Brand Designer (Intern) at xolve, working with a senior designer on every stage: the audit, both design directions, the font round, design system, user flows, wireframes, final screens and clickable prototype.
The Challenge
The Challenge
A catalogue that never helped anyone decide.
A catalogue that never helped anyone decide.
The old app could show what An Cường sells, but it couldn’t help anyone choose. Product data, documents, showrooms, samples and support all lived in different places, and saved items had nowhere to go. Seven very different groups use the app, from architects and project owners to homeowners, An Cường’s own staff and overseas buyers.
The old app could show what An Cường sells, but it couldn’t help anyone choose. Product data, documents, showrooms, samples and support all lived in different places, and saved items had nowhere to go. Seven very different groups use the app, from architects and project owners to homeowners, An Cường’s own staff and overseas buyers.
The Solution
The Solution
From a product library to a decision tool.
From a product library to a decision tool.
We rebuilt the app around how people actually choose materials: find, shortlist, check, request, then come back after the sale. Search and QR scan get people to the right product fast, product pages lead with specs and documents, and saved materials turn into sample orders.
We rebuilt the app around how people actually choose materials: find, shortlist, check, request, then come back after the sale. Search and QR scan get people to the right product fast, product pages lead with specs and documents, and saved materials turn into sample orders.
Research
Research
Seven users, one library
Seven users, one library
We started from the existing app and conversations with An Cường’s team. The audit mapped who opens the app and why: designers and builders who need answers fast, architects preparing client presentations, project owners checking certificates, homeowners picturing a surface in a real room, An Cường’s staff answering requests, franchise showrooms and overseas buyers.
Lining their needs up against the old app showed the same gap at every stage: people could find a product, but nothing helped them compare it, check it or ask for it.
We started from the existing app and conversations with An Cường’s team. The audit mapped who opens the app and why: designers and builders who need answers fast, architects preparing client presentations, project owners checking certificates, homeowners picturing a surface in a real room, An Cường’s staff answering requests, franchise showrooms and overseas buyers.
Lining their needs up against the old app showed the same gap at every stage: people could find a product, but nothing helped them compare it, check it or ask for it.
The seven user groups from the UX audit deck. All audit slides are translated from Vietnamese.
The seven user groups from the UX audit deck. All audit slides are translated from Vietnamese.
Direction summary: the main problem at each stage and what we proposed.
Direction summary: the main problem at each stage and what we proposed.
Journey map
Journey map
Where people got stuck
Where people got stuck
We mapped one shared journey for all seven groups: search and discover, compare and shortlist, check and verify, request information, quote or purchase, and after-sales care. For each stage we set out what people need, the role the app should play and what it should leave them with.
We mapped one shared journey for all seven groups: search and discover, compare and shortlist, check and verify, request information, quote or purchase, and after-sales care. For each stage we set out what people need, the role the app should play and what it should leave them with.
The overall journey map: needs, the app’s role and the output at each stage.
The overall journey map: needs, the app’s role and the output at each stage.
Information architecture
Information architecture
A clearer map for the app
A clearer map for the app
The old app was organized like a marketing site: a bottom bar of Products, Home, News, Contact and Log in, with product details several taps deep. The audit proposed five clear areas instead: Explore, Projects, Requests, Resources and Account.
In the final design, decisions with the client and our internal team simplified the tabs again, to Home, Products, QR scan, Favorites and Profile.
The old app was organized like a marketing site: a bottom bar of Products, Home, News, Contact and Log in, with product details several taps deep. The audit proposed five clear areas instead: Explore, Projects, Requests, Resources and Account.
In the final design, decisions with the client and our internal team simplified the tabs again, to Home, Products, QR scan, Favorites and Profile.
Before: the old app’s navigation, in Vietnamese. After: the five areas proposed in the audit.
Before: the old app’s navigation, in Vietnamese. After: the five areas proposed in the audit.
Design direction
Design direction
Two directions, then a dark interface
Two directions, then a dark interface
In June we explored two directions: a smart material library built for fast lookup, and a project workspace for saving, grouping and comparing materials. The smart library became the foundation.
We first recommended a light interface for reading dense specs. After revisions, the client chose a dark interface that matches An Cường’s website, so products and wood grain carry the color. A font round on June 26 tested type on real screens, and Hanken Grotesk carried through to the final design.
In June we explored two directions: a smart material library built for fast lookup, and a project workspace for saving, grouping and comparing materials. The smart library became the foundation.
We first recommended a light interface for reading dense specs. After revisions, the client chose a dark interface that matches An Cường’s website, so products and wood grain carry the color. A font round on June 26 tested type on real screens, and Hanken Grotesk carried through to the final design.
The two directions explored in June.
The two directions explored in June.
From the June 26 font round: the dark interface, with its key features called out.
From the June 26 font round: the dark interface, with its key features called out.
Design system
Design system
Strict by design
Strict by design
We turned the dark direction into a small, strict system: color variables for backgrounds, surfaces, borders, text, icons and status; a type scale from Display 32 down to Caption 11; a spacing scale from 4 to 64 px; and a set of corner radii.
One rule kept every screen consistent: product images and wood grain are the only things allowed to use rich color.
We turned the dark direction into a small, strict system: color variables for backgrounds, surfaces, borders, text, icons and status; a type scale from Display 32 down to Caption 11; a spacing scale from 4 to 64 px; and a set of corner radii.
One rule kept every screen consistent: product images and wood grain are the only things allowed to use rich color.
Foundations for the dark interface: color, type, spacing, radius and usage rules.
Foundations for the dark interface: color, type, spacing, radius and usage rules.
Flows and wireframes
Flows and wireframes
Every tap mapped first
Every tap mapped first
Before any final screen, we mapped each stage of the app as a user flow, with numbered actions, states and the pages they lead to, then built wireframes for every page and state.
The flows also marked what was out of scope, so the client and the team agreed on exactly what this phase would build.
Before any final screen, we mapped each stage of the app as a user flow, with numbered actions, states and the pages they lead to, then built wireframes for every page and state.
The flows also marked what was out of scope, so the client and the team agreed on exactly what this phase would build.
Stage 1 flow: search and QR scan, from Home to product detail.
Stage 1 flow: search and QR scan, from Home to product detail.
Stage 1 wireframes: Home, QR scan, the product list and the filter sheet.
Stage 1 wireframes: Home, QR scan, the product list and the filter sheet.
Final screens
Final screens
Quiet screens, loud products
Quiet screens, loud products
The final screens put the product first. Search and QR scan sit at the top of Home, product pages lead with specs and technical documents, and saved materials turn into sample orders in a few taps.
Some screens stay blurred until the app launches in 2027.
The final screens put the product first. Search and QR scan sit at the top of Home, product pages lead with specs and technical documents, and saved materials turn into sample orders in a few taps.
Some screens stay blurred until the app launches in 2027.
Home, product list and product detail.
Home, product list and product detail.
Saved materials with sample orders, the showroom finder and QR scan. These unlock after launch.
Saved materials with sample orders, the showroom finder and QR scan. These unlock after launch.
What’s next
What’s next
Room to grow
Room to grow
Quote and warranty requests were outside this phase’s budget, so the flows mark them as out of scope. The structure already leaves room for them, ready for a future phase after launch.
Quote and warranty requests were outside this phase’s budget, so the flows mark them as out of scope. The structure already leaves room for them, ready for a future phase after launch.
