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.
Identify-reduce pain points using existing product
Build trust and loyalty with customer base
Update the outdated look, content & context
Develop a scalable product & provide Wordpress CMS
Establish a new company-wide culture: bridging departments
Design with innovations & added interactivity. Priorities: Restructured employment section, vendor forms, new product pages
Interviews - User testing
Survey Monkey SUS
Proto-Personas / Empathy
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
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.
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.
"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.
"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.
"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.
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.
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.
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,