loader image

Apparel 21 Website

Web UI

2018

Client Overview

During my time at Apparel 21, I worked on rebuilding and redesigning the company’s main website, as well as a blog-style site for their weekly news updates and product release changelogs. Apparel 21 is a software company that develops point-of-sale (POS) systems for retail stores, particularly in the fashion industry. I worked on these projects as part of the marketing team, using WordPress to build the websites.

Project Details

To ensure that the website could be updated daily with new product releases, I needed to use a dynamic content management system (CMS). I chose WordPress and used Advanced Custom Fields (ACF) to create forms that would allow data to be easily inputted and displayed on the templates I had built.

I made sure to adhere to Apparel 21’s existing style guide in terms of color scheme and fonts and applied these consistently throughout the entire website.

Client:

Apparel 21 (employed)

Role:

Design & Development

Skills:

UI/UX, CSS, Wordpress, Elementor, Dynamic Content, Template Build, Sketch Prototyping

Services Provided:

Strategy, User Interface Design, User Experience Design

Timeframe:

2 years
#d7ccb4
#404040
rgb(85,85,85)
Built-in Wordpresss using dynamic custom fields

I created high-definition mockups using Sketch and used them to build the main framework templates in Elementor. Then, I applied the conditional logic for the custom fields using Advanced Custom Fields (ACF) within the Elementor templates. This allowed me to create dynamic fields based on the approved designs.

I also revamped the backend by adding custom fields using ACF. Before this, the content for each template page and post had to be entered manually, which resulted in inconsistent pages. By linking the Elementor templates to dynamic fields using ACF, I was able to create a more efficient system for updating the site.

I chose to go with a two-grid box design, as seen in the examples below. One advantage of this design is that it stacks well on smaller devices, ensuring that the data is easy to manage and view across all devices.

In terms of design, the site features prominent hero images and large typography elements. Sliders are used to display news and other calls to action (CTA) that are dynamically updated from the WordPress dashboard. The site also uses dynamic elements, such as sliders, to help convey its message effectively.

brochure, print
Fabric Design