AFC Required a reBrand for Website & Interactive Products

Client

Project Type

My Role

Date

Software

Site URL

Advanced Fresh Concepts, Inc.

Website & Mobile  |  Responsive Design

UX.UI Design & Visual Design, Project Management

2017-2018

Photoshop, Illustrator, Sketch, InVision

http://afcsushi.com/

Project Summary

Problem

What does a company do when they've outgrown their current, online brand presence, their customers are having a frustrating experience while browsing their website and the digital products have an out-dated look?

 

AFC, Inc. 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 and it needed a major aesthetics overhaul.

Sadly, the users were expressing their site visits as: 'confusion, distracting, inefficient and not appealing.' Most of the complaints had a repeating theme: the users couldn't find products, store locations, and they were getting lost on the website.'  

 

AFC needed to put-out as many fires as possible while easing the pains

of its key users and develop a fully functional, online presence for future business goals.

Prior Website Screen

Objectives

Get more people to the website, give users useful information, get suctomers to buy more products, and create a fun, easy and useful experience for AFC's customers. Our team was tasked with building a set of websites along with responsive mobile designs to meet business goals and needs. We would need to implement conventions, consistency, clarity and design innovations into the process. We planned to measure KPI success by tracking metrics, usability tests and by-ins from Stakeholders.

Brief

After the Stakeholder's Kick-off meeting, I began with a Summary document including all the know issues, business goals, requirement ideas, and technical constraints, as well as, valuable key inquiries regarding our game plan moving forward.

The developers were involved from the first meeting and collaborations were a great way to hash-out our plan, as well as, address our initial concerns. We held weekly meetings with the Dev. team to ensure that we all remained on course.  Also, I meet daily with managers to recap, show iterations and develop our milestones.

UX Design Process

Discovery

Research Methods

I developed a research plan to explore the problem and better understand the relationship users have with the online experience. I conducted 3 different types of Guerrilla research:

  • Survey Monkey - SUS

  • Naturalistic, In-person interviews and Observations

  • Task-based tests, and 5-second test

  • Best practices, Heuristics and Inspection Methods

I gathered participants from different departments & job specialities.  i.e. skill levels, expertise, demographics. I set the participants on a verb-focused Scavenger hunt;

while they used the prior website/screens for the test.

Take Away

During the sessions, I identified enough pain-points and frustrations from people muddling through the site and as well as the SUS questionnaire.  Listed are a few answers from the research: 

A: " I am unsure how to navigate to the products page" and 

"This is very confusing, I'm not sure what to do next- are you sure it's in here?"

A: "I'm stuck, not sure know how to add the item to a cart."
A: "Why do these images not match description-the text seems too small?" 

  • The SUS survey provided actionable data.  Many people expressed their concerns regarding the overall usability issues.  Most of the responses were not favorable. When asked, 'Do you find this site cumbersome to use'  19 out of 20 answered 'Strongly Agreed';  and when asked, 'I thought the site was easy to use', results showed  18 out of 20 people 'Strongly Disagreed'.  

  • Poor navigation and content structure. Users were finding it very hard to navigate when given a verb-based task and they complained that images and content were poorly organized. One participant 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."  From these observations, I recorded users frustrations and patterns, their unnecessary thinking for given tasks,  as well as their uncertainties while making these choices. 

  

  • Consistency and Conventions will help us formulate a plan. Some participants complained about the naming of products and links, they expressed their frustrations with quotes like, " that's an odd naming for a link - wouldn't it be better if it was named...." or "this caption doesn't exactly match the image".   The information gathered helped us to understand more efficient methods for conventions, clear navigations and a consistent visual hierarchy. 

We aggregated this research to help us understand the users and develop a Lean UX plan to move forward. As a priority, we want users to be able to quickly find the items they are looking for and eliminate confusion, and help them understand the full range of our website and steer them in proper directions. From the data gathered, we synthesized a baseline strategy to ease the cognitive load and content overhead.  I listed the users main pain points: 

Uncovered Pain Points from Interviews

  • The Sitemap and Architecture is confusing and unclear.

  • Users often got lost during navigate and didn't have ways to recover from these errors. 

  • Users either gave up or called Corporate Hotlines. 

  • Users would leave site quickly and would often click-thru or wayfind by chance.

  • Social Media and Customer-to-Company Communication needed restructuring.

  • Corporate needs & requirements were not being met to the fullest potential.

  • Website had an out-dated look including its functionality. 

  • Marketing & brand-goals were not being meet compared to industry competition.

Competitive / Comparative Research

To understand where AFC stood with their Brand, I decided to studied 4 main competitors, as well, as intermediate Asian Food Companies. During my research, I assessed criteria guided by our Goals & Scope.  Also, I measured key usability Heuristics for design; adding this later to my synthesis.

Result
I discovered several areas where AFC was lacking and compared these in the Analysis Map.  i.e. esthetics, navigation, catering to specific target groups, easy to understand structures, organized functionality, as well as, giving customers an enjoyable interactive experience.  

 

AFC's top competitor (SnowFox) had the most useful and aesthetically pleasing online business presence.


I showed AFC Stakeholders how their competition was excelling and possible ways AFC was falling behind. I created an actionable plan to meet these challenges and how we would proceeded with the next steps. 

Competative A.jpg
Needs-1.jpg

Aggregated Priority of Needs for MVP.  

Define

Requirements analysis

With data developed and gathered from each meeting and the user research,
we identified our main requirements to guide content, context and functionality:

Business Requirements

  • Legal structure that adheres to marketing and Corp. criteria

  • Easy navigation and clear method for users to order products

  • Quick method for users to find store locations and search for employment-submissions.

  • AFC ability to update CMS in-house, quickly 

  • Seamless system & great looking website with interactivity

  • Express quality, freshness and value to customers

User Requirements

  • Easily connect with AFC's Business offices

  • Find Information & Products quickly

  • Get updates on new products & promotions/discounts

  • Easily find Stores in their area, while traveling

  • Value from interactions on the website

Card Sort & Sitemap Design

From the research and requirements analysis, we had proper data to address the navigation issues. Our team met over the next days to organize the structure. I recruited several employees for card sort testing (some of these people also  get calls from the unhappy AFC customers). I used in-person research with Open, Closed and Reversed sort methods.

Sort Result

My initial assumptions were continually tested during these sorts. I learned participants had very insightful and thoughtful perspective for the navigation order and links. From these tests, we discovered multiple variations around 'catching the scent' and a clear plan for Top Levels, Links, Labeling, Groupings.  Approvals were made and we were now able to form the final Information Architecture and Strategy for Content.

SITEMAP 1.0

Multiple Stages of the Card Sort and Mapping

IMG_0999.jpg
Cart Sort1.jpg

FINAL SITEMAP 2.0

SitemapFinal-v2.jpg

Development

Interative Designs

Research data gave us actionable data to start concepting the initial designs, functionality and interactivity. I drafted iterations for Wireframes, Design Systems, and made Paper Prototypes for validity. Each design phase included quick tests, discussions and approvals. e.g. initial concepts, iterations, design-thinking, revisions, and lite-testing.

There were key areas where I used my planning, creative and organization skills to create complex graphics and interactions.  Listed are areas of importance:

  • Multiple Product Pages

  • Interactive AFC History Timeline

  • Interactive AFC News Section

  • Employment Application Forms

  • Store Locator

  • FAQs & Galleries 

  • Custom Graphics

Style Sheet

I was tasked to create a guide for the site styles. I based my design research on modern colors, typography, as well as clear conventions and consistencies.  The guide was used to inform subsequent Style Sheet versions.

Style Sheet.jpg

Design Iterations 1.0

I started with sketches and wireframes as my initial design method. During the design process, I iterated and delivered multiple revisions for approvals which gave our project a more concrete and polished look.  Our team wanted to 'fail fast' and iterate quickly to come up with the most useful and functional solutions; creating a better design prototype with each iteration and zeroing-in on our targets. We aimed to understanding the design-space and addressing user needs, and accessing the designs with inspection methods.

Timeline1.jpg
Consumer-StoreLocator_v2.jpg
AFCWebsite-landingPage1.jpg

Delivery

Final Designs 2.0

After several rounds of design iterations and revision, the designs were approved and I was able to move forward with the design mockups and final assets for the Dev. team.

Management and Stakeholders felt the final design were a win because the content and context were a innovative mixed of contemporary design styles and informative
storytelling of their products. 

Consumer-About Us1.jpg
website 4.jpg

Stylized Graphics

AFC-Yellow-Icons2.png

Custom Symbols

website 2.png

Illustrated Graphics for FAQs

Interactive Design & Planning

As a part the requirements, I also designed an interactive/employment submission section for the HR Department. I completely re-structured this area using a UX&D process. Since AFC didn't have a clear system in place, this was a huge priority for them and a unique task for my skills. As part of my role, I created individualize, user-centric submission forms and worked with the Development team to give structure and context to be coded in the backend CMS. 

 

My design accomplishments met all of the business requirements and the results were said to be,  "night and day" and "an amazing improvement" by Human Resources and Management.

AFC Applicant Form-TEMP CHEF_Template.jp
AFC Applicant Form.jpg
Consumer-ContactUs_v8.jpg
AFC Applicant Form-TEMP CHEF_v2.jpg

Conclusion

After the project's release, an increase was shown in the amount of people remaining on the AFC websites; rather than clicking away, the new design helped reduce bounce rates.

 

After the site went live, I sent out a survey regarding the validity of the new product. The responses were very positive and feedback stated: 'the site was now simple to use and the navigation is clear, our teams are able to easily find AFC products, and the new site design helped users find products in an efficient manner.'

What went well

With reflection, We felt each element engaged user interaction with consistent colors, icons, graphics, images and copy-text, as well as, ux methods to inform the final functionality and usability. I successfully communicated the business goals and client needs for the product launch. The site and it's content were now findable, easily accessible, and usable.

Room for Improvements

  • Being a design team of one (1), I discovered many roadblocks and there never seemed to be enough time to incorporate every single ux process, however I did find ways to overcome these obstacles.  Since this was an iterative process, I developed a system where we could develop the most essential areas for the initial release and shelve low priority solutions for the next release cycle. 

 

  • At times, we had a few rough patches and dev/code inconsistencies with our final deliveries. And I found it imperative to maintain close involvement and have transparent communications with everyone on the core team, including Managers, and of course, our Developers.  This commitment to communications helped us catch many of the issues quicker and find valuable solutions earlier. 

Retrospectives

 

My favorite part of this project was being able to explore the UX&D process and connect with users on all different levels. Making connections with people and understand where they come from was what inspired my user-centric designs.
I enjoyed this challenging project and rewarded with the creative journey.

 

Looking back over the project, the initial usability research helped me to empathize with AFC's target customers and create an easy to use and a more enjoyable product. While remaining flexible and open to feedback, I was able to use the most essential methods to successfully deliver the project requirements.