UX.UI / INTERACTIVE DESIGN
AFC Required a reBrand for Website & Interactive Products
Advanced Fresh Concepts, Inc.
Website & Mobile | Responsive Design
UX.UI Design & Visual Design, Project Management
Photoshop, Illustrator, Sketch, InVision
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
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.
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
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.
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.
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.
Aggregated Priority of Needs for MVP.
With data developed and gathered from each meeting and the user research,
we identified our main requirements to guide content, context and functionality:
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
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.
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.
Multiple Stages of the Card Sort and Mapping
FINAL SITEMAP 2.0
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
FAQs & Galleries
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.
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.
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.
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.
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.
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.