PROBLEM STATEMENT

​

Many of AFC's customers, clients and business partnerships didn't have easy and clear interactions with AFC's business in a 'digital-world'. 
The old website was frustrating to navigate, it wasn't modern, it felt clunky and outdated, and didn't provide the proper structure needed for online marketing. Our team had to start from scratch. A complete reDesign was needed for a polished and professional presence, and
user-centered design as an essential component of product strategy.

​

Constraints: As part of the business needs, AFC provided strict legal requirements to be implemented throughout the website and mobile experience. 

Project goals

1

Identify-reduce pain points using existing product

3

Build trust and loyalty with customer base

5

Update the outdated look, content & context

2

Develop a scalable product & provide Wordpress CMS

4

Establish a new company-wide culture: bridging departments

6

Design with innovations & added interactivity. Priorities: Restructured employment section, vendor forms, new product pages  

Research methods

Analytics-measure

Interviews - User testing

Survey Monkey SUS

Tree tests

Competitive Audit

Proto-Personas / Empathy

Information Architecture-Sorting

Prototypes

From this measured data and user insight, we wanted to learn why

and where users were having the most pains and frustrations, and if there were common threads from the persistent customer complaints documented by AFC's service calls, as well as, the obvious red flags from analytics and metrics. Research Methods:

​

• Survey Monkey - SUS

• Naturalistic, In-person interviews and Observations

• Task-based tests, and 5-second test

• Best practices, Heuristics and Inspection Methods

KEY FINDINGS
During usability inspection, I gave task-based tests while observing behaviors to identified user frustrations and dissatisfaction. As a quiet apprentice, I recorded direct quotes, behaviors and user goals:

"The site navigation is very confusing and disorganized."

"This website feels so outdated and boring."

"I wanted to add a product to the cart, but got lost and gave up."

"A lot pictures and captions are unclear; the overall quality is poor."

"This item doesn't even belong on this page, why is it here?"

​

"When I browse other websites, I usually find things quickly, but on this site, I found myself wondering why so many simple things are so confusing; when redesigning this site, I would start with the navigation."

Discovery & Analysis

The data gathered from competitive audit, additional research and insights from various card-sort tests helped maximize product relevance and build a foundation for the next insight level: experience map, personas, empathy maps and customer journey.

Discovery takeaways

After synthesizing these findings, I documented pain point priorities with goals, milestones and steps; including feature ideas, developing a clear sitemap structure, as well as, strategies for content. This process helped the team flesh-out our top priorities for business-user needs, goals and requirements.

Keeping the user's needs at the nucleus of the project was essential for our teams' unifying vision as well as collaborative communications during design iterations.

User Mindset

The Techie

"This navigation is too vague and doesn't make sense to me"

The Techie expects professionalism and modern aesthetics. They want to quickly get to key information and navigate through the process without much fuss. 

The Adventurer

"I tried to place the sushi kit item in a shopping cart, but it was too complex so I just gave up"

The adventurer was more likely to engage when they knew they had clear options, a way to recover and an organized navigation system. 

The Foodie

​

"I love AFC's asian foods, I just wish I could find items easier on the website"

The Foodies want to feel like they have learned something from the experience, and the information they seek is useful and engaging.

They will sacrifice time and effort for a unique and enjoyable website experience as well as finding local AFC locations.

Opportunities for innovation

• Organize a clear, useful & functional navigation system. 

• Create quality, modern graphics along with consistency & UI conventions.

• Develop systems to make the content shine and create a unique user experience.  

• Develop an adaptable product across multi-devices.

• Take pressure off of AFC's departmental systems and give more control with: CMS, SEO, social media marketing and metrics tracking.

Ideation & visual design solutions

STYLE GUIDE & VISION BOARD

Prototyping & iterative design

I set and organized content flow in lo-fi wireframes, mockups & prototypes using Photoshop, Sketch and InVision, helping aid in discussions for

MVP and provide usability insights.

LOW-FI PROTOTYPES - ITERATIONS

VENDOR & EMPLOYMENT FORMS / MOCKUP DESIGNS

Complete design solutions

HIGH FIDELITY MOCKUPS

Adhering to rapid-iterative-prototyping and Lean workflows, I created the final production artwork. I passed assets to the Developers throughout each iterative stage. This helped keep our project moving forward towards usability tests as well as further iterations.

BEFORE

AFTER

• Confusing navigation & naming

• Outdated look & conventions

• Low quality content & visual noise

• No Platform for CMS/SEO

• Easy to follow navigation-wayfinding

• Modern, polished, consistent, focused & useful

• Functional, responsive & scalable for CMS/SEO

• UI Conventions and enjoyable experience design

Visual designs & graphics

ILLUSTRATIONS, ICONS, SYMBOLS & AFC HISTORY TIMELINE

Results & impact

The final reDesign resulted in a refreshed, interactive experience and translated into tangible outcomes. The site was more credible, clear, useful and valuable to both AFC and their clientele. Also, the site was now modular, mobile, responsive in design and easily updatable through a CMS/SEO framework.

There were countless, positive impressions from the existing users and new clientele, and statements validating our initial hypothesis: "now easy to use", "way more modern looking", "navigation is clear",  "this helps all departments", "visuals are polished".

​

We estimated that the revised experience would renew excitement for AFC customers, keep users on the site longer, reduce customers leaving after a few clicks, lift amount of new users, and ease the frustrations while users navigated for information about the company and products.

Learnings

DEVELOP A CONSISTENT FEEDBACK LOOP EARLY

​

Despite our close collaborations with our offsite developers, 
we missed some of our marks and issues began to arise quickly regarding under-developed features and content requirements not being defined properly.  Clear and consistent conversations held early on would have helped uncover and solve these issues quicker, when defining for a MVP. 

Also, diving deeper with my functional prototypes would aid in the iterative discussions and transparent team collaborations.  

Reflections

Taking a step back, the site would look less busy as 'visual noise'  if we had decluttered the UI and eliminated superfluous copy.

 
As a designer, I understand I play a key role in helping influence others by educating them with key UX-UI examples:  

 
i.e. Ch. 5 ' Omit needless words' , Don't Make Me Think,
Steve Krug

​