NATION CONFECTIONERY INC.

Designing a responsive website for a candy and toy manufacturing company.

OVERVIEW

During the 1990s, Nation was one of the first manufacturing companies to offer high-quality candies and toys at affordable prices in the Philippines. Seeing the demand for more local options, they worked towards making these products accessible to Filipinos.

Nation continues to supply both wholesale and distribution businesses throughout the country. However, as an offline brand, they find it difficult to engage customers and reach a wider audience.

This mobile-friendly website inspires confidence in Nation as a business and building customer trust. It serves as an online catalog and allows users to easily request quotations for different products.

MY ROLE

I served as the only designer on this project during this four-week design sprint in January 2023. I was in-charge of all design-related tasks, including user research, user experience design, interface design, prototyping, testing and more.

TOOLS USED

Figma
Notion
Zoom
GoodNotes

OVERVIEW

Nation continues to supply both wholesale and distribution businesses throughout the country. However, as an offline brand, they find it difficult to engage customers and reach a wider audience.

MY ROLE

TOOLS USED

Figma
Notion
Zoom
GoodNotes

Explore Prototype

View Final Design

MY PROCESS

PROJECT KICKOFF

Getting To know Nation

I used the time to ask lots of questions, determined to get to know the business and how I could be of help as a designer. They even gave me a tour of the factory, which was pretty exciting!

PROJECT KICKOFF

Getting To know Nation

Before my work began, I visited the client's main office to meet with their team. It was a way for me to make sure that we were all on the same page. Together, we outlined the project’s purpose, goals and plan. I used the time to ask lots of questions, determined to get to know the business and how I could be of help as a designer. They even gave me a tour of the factory, which was pretty exciting!

I used the time to ask lots of questions, determined to get to know the business and how I could be of help as a designer. They even gave me a tour of the factory, which was pretty exciting!

PROBLEM

Lack of brand visibility and awareness

This well-established brand has had difficulty keeping up with the times and moving their business online. They have neglected to invest in marketing and build a strong online presence, which has resulted in the decline of sales and conversions.

Customers are less likely to discover the brand and engage with the business because information about Nation's products and services is not readily available,

“There was one time a new customer called to inquire about our products and services. I asked how she found out about Nation. She said that, during her time at the wet market, she saw someone delivering cartons to a store with the company’s logo printed on them. When she got home, she Googled it but all she could find was our office number and address.”

Belle, Nation’s Secretary

GOAL

Start building an online presence

The client’s team and I agreed that having a company website that provides customers with all the necessary information was a good first step in building Nation’s online presence. This would provide a better experience than being directed to an online directory, such as one shown below, that barely displayed any relevant information.

The client’s team and I agreed that having a company website that provides customers with all the necessary information was a good first step in building Nation’s online presence.

This would provide a better experience than being directed to an online directory, such as one shown below, that barely displayed any relevant information.

RESEARCH & EMPATHIZE

PRELIMINARY RESEARCH

Data can help personalize our Customers’ Experience

Initially, I discussed my research plan with the client as I was preparing to do the work. He expressed concern about the costs and felt that we could skip this step.

I emphasized that research is a long-term investment that pays off greatly. By understanding the market and our target audience, we would be able to make better design and marketing decisions.

To ease his concerns, I explained that there were ways to reduce costs. I shared some ideas, such as:

Use free or low-cost online tools like Google Trends and social media platforms to learn more about the market and competition.

Tap into Nation’s existing customer base and conduct interviews. Be creative with incentives.

Visit trade shows to meet people from the same industry.

Having convinced the client of its value, we were able to move forward with our research plan.

RESEARCH & EMPATHIZE

MARKET RESEARCH

What are the Current Trends in the candy and Toy Industry?

Novelty candies are becoming more popular. Consumers seem to enjoy candies that are presented in a unique, fun way - like ‘surprise-inside’ candies.

There’s also a rise in ‘kidults’ over the recent years. These adults love candies and toys that remind them of nostalgic memories from their childhood.

Consumers, especially parents, are looking for healthy, high-quality ingredients.

GOAL

COMPETITIVE ANALYSIS

Discovering competitors: Candy & toy manufacturing Companies

I looked into Nation’s competitors based nationally and internationally. The task proved challenging as most of them had limited online visibility. It was quite difficult for me to gather the information I need.

I learned that most local competitors solely rely on third-party sites like Facebook or Instagram to connect with their customers. However, I was able to find five competitors that use business websites. Upon exploring these sites, I noticed that they only offer basic features.

GOAL

USER INTERVIEWS

Understanding The Customer Journey

I was given the opportunity to meet with Nation’s customers via Zoom. During the interviews, I asked the three participants to describe their experience performing purchasing duties and generally doing business with Nation.

Sammy

person_outline

Purchaser, 36

“Getting a quote takes a while.”

He frequently calls to ask for an updated price-list because he needs to know which products are available for purchase and if there are changes in pricing.

Henry

person_outline

Distribution Manager, 52

“I wish there were easier ways to learn about their products.”

He wants to discover new products but he finds it such a hassle to inquire via call or email nd wait for someone to respond.

Michael

person_outline

Purchaser, 41

“I call every week. They already know my usual orders.”

Since he is a longtime customer of Nation, he is used to the order process already. He thinks that calling to place his order is more convenient than filling out an order form each time.

KEY INSIGHT

Customers Want effective and efficient communication

I learned Nation’s customers struggle to find the information they need to make purchasing decisions. They also expressed their frustration with regards to the business having limited communication channels. Customers could only reach them via phone call, text message or email and it usually takes a while to get a response.

Based on my findings, I created a persona that represents Nation’s typical customer. Mapping out Nathan’s journey helped me develop a deeper understanding of our target users’ needs, goals and pain points.

GOAL

KEY INSIGHT

Customers Want effective and efficient communication

Having someone like Nathan in mind, this begs the question:

How might we make it easier for Nation’s customers to find the information they need to make purchasing decisions?

IDEATE & DESIGN

IDEATION

Thinking of ways to Keep Customers informed and Engaged

I adopted solutions from Nation’s direct and indirect competitors. I explored the idea of having customers easily request for quote or order product samples, hoping to streamline these processes.

Since the client emphasized his preference for a basic website, I made sure to stick to essential features. It was important to remember that these features should not only serve users' needs, but also the business' goals.

IDEATE & DESIGN

IDEATION

Thinking of ways to Keep Customers informed and Engaged

I adopted solutions from Nation’s direct and indirect competitors. I explored the idea of having customers easily request for quote or order product samples, hoping to streamline these processes.

IDEATE & DESIGN

Having presented these wireframes, the client was generally satisfied with the proposed solutions. He did, however, note that given how unstable food prices are, showing product pricing on the website would pose as a problem. Another issue was allowing customers to purchase in small quantities, which may not be profitable for the business.

For this reason, we considered removing the ‘buy a sample’ feature, but decided to conduct user testing first. We thought would be best to see how users respond to this feature before taking action.

INFORMATION ARCHITECTURE

Making sure Users find what they need

Before I create a high-fidelity prototype for testing, I planned and organized the site’s contents through this sitemap. The ‘quote order’ and ‘buy a sample’ feature were the ones that set Nation apart from its competitors. I expanded on these ideas with the help of the client’s team and other designers I spoke to.

Users could either request a quote for a single product or multiple products. They could also order samples of these products, in case they would like to experience them firsthand.

IDEATE & DESIGN

INFORMATION ARCHITECTURE

Making sure Users find what they need

Users could either request a quote for a single product or multiple products. They could also order samples of these products, in case they would like to experience them firsthand.

UI DESIGN

Designing a visual system

Prior to this project, Nation did not have a set of brand guidelines. I only had their logo to work with, so I did my research to gain a clear understanding of the brand’s identity. I interviewed the client and reviewed the business’ existing materials, such as brochures and product packagings.

During this time, I was also trying to build Nation’s social media page via Facebook. I received a message from a former customer, asking about some products that were already phased out. I was then inspired by the packaging’s visuals. My goal was to revive the look and feel that Nation was known for in the 1990s to early 2000s, while giving it a modern and professional touch.

IDEATE & DESIGN

UI DESIGN

Designing a visual system

VIEW ENTIRE UI KIT

PROTOTYPE & TEST

FORMAL USABILITY TESTING

Observing users complete core tasks

I identified core tasks that help users achieve their goals, as demonstrated by these flows. This allowed me to focus usability testing efforts on the most important areas of the site. I conducted moderated tests with six participants, a mix of customers and non-customers of Nation.

ANALYZE & ITERATE

FINDINGS AND ITERATIONS

Issues that were identified and prioritized

I used a spreadsheet to track the issues that users encountered, how frequently they occurred, and how much of an impact they had on the participants’ ability to complete tasks. This information helped me prioritize and focus on fixing the problems that were most likely to affect users.

VIEW SPREADSHEET

ANALYZE & ITERATE

FINDINGS AND ITERATIONS

Issues that were identified and prioritized

VIEW SPREADSHEET

FINDINGS AND ITERATIONS

Rethinking the site’s information architecture

Although the "buy a sample" feature received positive feedback, the client decided to remove it for the reasons mentioned earlier. To avoid giving users the impression that they could order products from the site, we changed the label from "cart" to "quotation list."

PROTOTYPE & TEST

FINDINGS AND ITERATIONS

Rethinking the site’s information architecture

FINAL DESIGN

DESKTOP VIEW

REQUESTING A QOUTE FOR A SINGLE PRODUCT

MOBILE VIEW

ADDING PRODUCTS TO QUOTATION LIST

Explore Prototype

VIEW ALL WIREFRAMES

REFLECTION

What’s next for Nation?

For the next phase of this project, Nation could explore the idea of using a wholesale online ordering system. This could help to organize and streamline their order management process, as well as improve customer service.

The business could also continue to build their social media pages in addition its website. These pages can aid in increasing traffic to their website, converting those users into customers, and increase brand recognition.

Managing and working on the project

To be honest, I was nervous to work on my first UX project as a solo designer. The work was challenging, but I enjoyed the journey. Through the project, I learned that it is important to have a solid project plan and to make sure that the client feels involved in the process.

REFLECTION

Managing and working on the project

SEE MORE OF MY WORK

View Case Study :

AI Figma Feature

View Case Study :

Solid Seven App

MY PROCESS