Shaping the
UX Design
and visuals

afc

corp

Embracing current trends and emphasizing corporate strengths through consistent planning and innovations.

Role & Visuals Provided

– Brand Research & Project Strategy
– Brand Voice & Content Strategy

– UX/UI & CX 

– Visuals / Graphics / Content

– Interactive Design

OVERVIEW

AFC, Corp. is a world renowned leader in the Asian food service industry with over 30 years of industry experience. They have decades of immense business growth, however their online presence was loosing traction with users, had many issues with functionality, user interaction and was in need of a major aesthetics overhaul.

PROBLEM STATEMENT

Many of AFC's customers, clients and business partnerships didn't have efficient and clear interactions with AFC's business in a 'digital-world'. The old website was frustrating to navigate (emblematic of a much larger problem),  it wasn't modern, it felt clunky and outdated, and didn't provide the proper structure needed for online CMS marketing and content strategy. Users had expressed frustrations such as:

 

" ...very confusion navigation and unclear website"

 

  "...distracting and unappealing visually".  

 

Most of the complaints and pain points had a repeating theme: the users couldn't find products, store locations, had difficulties filling out forms, and they were getting lost on the website.'  

KEY OBJECTIVES

• Identify and reduce user pain points - frictions
• Develop a scalable product & provide CMS / Marketing: MVP
• Build trust and loyalty with customer base: increase the adoption of our product
• Establish a new company-wide culture: bridging departments
• Update the outdated look, content & context
• Design with innovations & added interactivity

• Improve the experience for the user of our product

• Acquire more organic traffic and give useful information to users

GUIDING PRINCIPLES

Impactful and innovative decisions are highlighted by curiosity, thoughtful design decisions and empathy design throughout the process. The project's outcome will be most effective when staying focused on the business objectives and requirements as well as speaking to usability and user needs. 

 

Seamless functionality, ease-of-use and quality, visual aesthetics should be the primary objective for the MVP.

THE WHYS

Understand: UX Research to uncover competitive advantages, pain points, and evaluate user experiences.

SCOPE & CONSTRAINTS


Having an responsive framework along with a CMS was a primary constraint. Other considerations were: flexible and functional Lead Gathering forms, interactive Employment Submission section, as well as, adhering to AFC's specific requirements; scope pertained to the legalities of food items and corporate franchising.

 

Areas of main UX focus using Waterfall Workflow: User research, ideations, customer journey mapping, wireframing, mockups and rapid-protoyping.

DISCOVERY

Since most of the research was on 'why' the site was not easy to use, my focus was directed to asking questions and observing participants in task-based scenarios. Later applying the 'How' and 'Where' we can make the most significant and innovative designs for the product. 

My discoveries highlighted the need of redesigning the experience for simple tasks, straight forward navigations, as well as  conventions helping the user get things done faster, with ease and efficiency.  

Identify & Define the problem:
UX Research to uncover 'what was happening' and
'why it was happening'.

TYPES OF RESEARCH & FINDINGS

(Quantitative, Qualitative, Naturalistic, Heuristic Benchmarks) 

  1. Competitive Audit - Comparative Analysis

  2. Measured Analytics - Google-Heat Map-Metrics

  3. In-person, user interviews and Observations. (users facing common,
    task-based challenges)

  4. Questionnaire - Surveys (SUS) 
  5. Usability Tests
  6. Tree Tests - Card Sorts

Documented User responses during tests and observations:

"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 and I just left the website".

"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 - it's a no-brainer". 

Synthesis and where user empathy

benefits in the UX Design project.

Build Baseline and Identify Opportunities: Ideation, integration and unity for AFC's Experience Design.
Affinity Map distillation, designing proto-personas, and Scenarios.

The SUS survey provided me with actionable data to improve the look and functionality and further inspect using Heuristic Evaluation.

 

When asked, 'Do you find this site cumbersome to use '19 out of 20 answered 'Strongly Agreed'.  

 

When asked, 'I thought the site was easy to use', results showed  '18 out of 20 people 'Strongly Disagreed'.  

I found many ideas to synthesize when I described the usability problems to the participants. When asking them to rank the severity (on a scale of 1–10) of the navigational structure and how this prevented them from performing simplest tasks: like finding a specific food product, an overwhelming amount of the testers upvoted to 9s and 10s.  I asked them how they could try to solve these issues and the outcome of ideas led me to new discoveries for the Sitemap system and focus on use case scenarios. 

From interviews and observations, I recorded users frustrations and patterns where they had difficulty completing tasks. The unnecessary thinking when trying to navigate the site, was a big red flag. Designing a clear site map and content structure would help drill down to the essentials for the project.

 

Users were finding it very hard to navigate when given a verb-based tasks.  During interviews, I used 'why-laddering' to help uncover more of the user's high level goals.

 

Participants stated:

"I am not sure how to find AFC's new products; I see multiple forms of navigation - however none of these seem to match."  

My interview response: 
"Why is that most important to you?" , "why did you choose one form of navigation over the other?"

Issues with naming and users finding content. Consistency and Conventions will be a top focus for the UI Design stage and will help in formulating a concrete plan. 

 

Some participants complained about the naming of products and links, they expressed their frustrations:

 

" that's an odd naming for a link - wouldn't it be better if it was named...."

 

"this caption doesn't exactly match the image- that is very strange and confusing".  

 

The data gathered helped me uncover more user and empathy specific plans and actionable steps to design a  more efficient experience, clear navigations and a consistent visual hierarchy. 

Define: Analysis & Understanding the customer -
who are we designing for?

What users did,  what they said, how they acted-reacted.

PROTO-PERSONAS

From my internal interviews, tests and findings, I uncovered common themes relating to AFC's customers and users.
I discovered the 'whys' and 'how' users struggled and how they often abandoned tasks.  To validate, I used my gatherings and analysis to help structure  
'
AFC Users Mind Set' as well as the creation of several Proto-Personas and Mental Models to use
as guides for all my UX Paradigms. 

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.

 

ADDTL' USER MIND SETS

THE TECHIE
 
"This navigation is too vague and doesn't make sense to me, Even with my advanced technical skills, I feel there are so many constraints while navigating the website". 
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, It was very challenging to navigate back to the starting point".
 
The adventurer was more likely to engage when they knew they had clear options, a way to recover and an organized navigation system. 

THE WHATS

The impact from research helped gain deeper understanding of the
UX process and how it can be applied to the overall product development

Needs and Requirement Gatherings: Areas of improvement, innovation, ideation and strategy. 

BETTER UNDERSTANDING OF STRATEGIES AND REQUIREMENTS

Exploratory Card Sorts-trigger words, Classifications, Tree Tests, Affinity Map, Content Structure

​AREAS OF GREATEST IMPORTANCE
  • Distill  content needs to a deep level.
  • Find efficient means to tell brand story, design a site structure that helps user get things done quickly and efficiently
  • Card sort & Reverse Card sort to uncover the most effective and clear navigation system for the user
  • Discover why the older system was not working and how we could implement positive user experiences into each phase of the project

LOGICAL & NON-OVERWHELMING NAVIGATION

Audits, Site Maps, Content Modality, User Flow, Concept Models

​AREAS TO ADD INNOVATION: MVP
  • Organize a clear, useful & functional navigation system.
  • 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.

USER REQUIREMENTS & IMPACT GOALS

Taxonomies, Defined Methodology, Project Strategy, Do-Go Map

​AREAS FOR OPTIMAL UX&D: MVP
  • Give users a fun and easy interface experience/functionality
  • Quality content with pleasing visuals 
  • Ability to navigate seamlessly and recover from any issue quickly
  • Find product and information fast 
  • Business contacts and vendors are able to interact with departments
  • Uncover efficient roadmaps, links, navigation and Red Routes for a optimal experience

THE HOWS

Develop: Style Guides and visual exploration with
focus on the experience strategy. 

Pattern Libraries, Style Tiles, Sketches, Specifications, Journey Maps, Look&Feel

Implement: Design a useful, enjoyable, functional and
easy 
to navigate, product experience.

Recapture the UX 'Essence' of the project through ideation, rapid-iteration, visual design,

optimizations, fluid interactions and refined usability testing.

Our goal for the project was to recapture the essence of AFC's Brand and build excitement around the customer experience. Warm and non-offensive colors were used, along with engaging and contemporary visuals. My roles included: Content structure, strategy, ideations for product, wireframe mockups, Lo to Hi Fidelity Prototypes and interaction functionalities.  

High Level Goals: Consistent UI, Make it fast and easy to use, no conflict, low cognitive load,
give users control over their time, 
innovative and deeper user engagement.

Wireframe3-02.jpg
Employment-Inquiry1.jpg

UX-UI Project Introspection

GOAL: to guiding the users through a series of tasks. 

 

To evaluate a new and improved customer-client inquiry contact form,
I used the user research and discoveries throughout this phase; designing with UX-UI consistency and conventions. The requirements and user goals helped me design for users expectations, functionality and the curated, lead gathering forms. The 
user-centric process helped give credibility to my empathy designs and a centralized focus for the various forms and individualize functionalities. This opened up the framework for users to seamless recovery from errors and eliminating confusion on the input and entry fields.

 

Modal (modality) Screens were designed to aid the user in completing tasks, and prevents them from doing other things until they competed the tasks or should they chose to dismiss the message.


With each iteration and A/B test, I uncovered new solutions to common issues and successfully met the business and user requirements.

Key takeaways: Chunking of data, the use of radio buttons instead of dropdown list
(in cases with less than three options), use of descriptive labels to enhance usability, 
avoiding the use of empty states and reduce the number of actions.

Solutions & Outcome: Successfully achieving User and Business Requirements
Ideation sessions and iterations, building Hi-Fidelity 'MVP' Art for Developers and Testing, 
then applying feedback to all iterative designs.

Results and Success: LOOK + FEEL + USABILITY
Design-thinking and consistent user-empathy helped change a 'dated'  website and user experience to an impactful, functional and living-breathing final product. I was always surprise by the issues I found and uncovering clear solutions; revealing optimal opportunities for empathy-design paradigms.

Emphasis on UX Design Process & Results


The final reDesign resulted in a refreshed, interactive experience and translated into an exciting and useful product. Tangible attributes were:  digital-web credibility, as well as, clear, useful and valuable
functionality to both AFC and their clientele.

 

Two of the biggest accomplishments:

1.) the product's solutions showcased
a new, modular functionality  2.) easily updatable CMS/SEO framework.

TANGIBLE AND MEASURABLE AFTER PROJECT:

  • AFC metrics revealed the new experience keep users on site longer

  • Lessened click-through rates

  • A positive engagement for users: Get things done faster with more enjoyment

  • Lifted the amount of new interactions

  • Increased revenues through online orders

  • Inquiry forms increased Lead Gathering by 37%

  • HR Management and relate departments had more efficient means of interaction and seamless integrations

Valuable Reflections & Lessons Learned

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.  I've learned that, when developing the MVP,  Clear and consistent conversations held early on would have helped uncover and solve these issues quicker.  Careful planning, discussions and on-site Developers would be an ideal scenarios for consistent Feedback loops.

WHAT I'VE LEARNED

Taking a step back, the site would have less 'visual noise'  if we had eliminated superfluous text/copy.

 
As a designer,  I play a key role in helping influence others by educating them with essential UX solutions and ways to validate each.

 

During the course of this project, I uncovered optimal solutions to balance business needs with UX Conventions and reapplying what I've learned.

Great reference while on journey from Steve Krug's book:  

Don't Make Me Think 

Ch. 5 ' Omit needless words' ,

LI-In-Bug.png

Copyright © 2020 Rick Makoul All Rights Reserved