2022
4-5 Weeks
Product / UI design / UX collaboration
UI Designer
%201.png)
I was brought on to help redesign NxtUrban's website interface and develop a design system that would be adaptable, expandable and flexible as the platform grows and evolves.
Creating a simplistic and clean user interface while combining user experience best practices for e-commerce platforms.
UI Designer
Design system management
UX design. support
A visual identity, landing page, and initial prototype for beta-testing had already been created before I was brought onto the project. These elements served as jumping off points for the development of the design system.
The first step I took was to analyse the beta test results to find user interface and experience pain points that were currently encountered by users.
My next step was to conduct a visual study of brands similar to NxtUrban to identify industry trends on how color, typography and layout impacts complex UI systems
The IA and user flows were established before I was brought onto the project but had not been formally documented. I built a site map to help inform my decision making when designing each interface.
With a clear scope of the pain points and competitive landscape, I developed a design system that was visually calming and easy to use though the following practices:
01
Minimal, purposeful use of color
02
Typographic hierarchy and contrast make important information stand out
03
Similar component layouts that repeat throughout the product interface.
Rubik was chosen for its classy, elegant, simplistic qualities and it's legibility at small scales.
Using the timeless combination of black and white, I expanded the color hues to accommodate varying needs of contrast across the website.
I created and maintained the component library throughout the design and development process, which successfully served as the single source of truth for all team members and ensured visual consistency across the platform.
The final design aims to reduce the friction typically experienced when using e-commerce platforms. By leveraging on a best-practice checklist, the entire system was built into a scalable and functional design system engineered for ease.
Clutter free interface showing all collections and categories of products from the landing page.
.png)
Elegant & clean product listing and details page tailored to users to include sorting, filters and reviews.
Options like 'Add to Wishlist' and "Move to Bag' to facilitate future buying.
NxtUrban is set to launch in early 2023. After launching, the team plans to further iterate on the product's design, features, and functionality.
