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
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.
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.'
• 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
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.
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.
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)
Competitive Audit - Comparative Analysis
Measured Analytics - Google-Heat Map-Metrics
In-person, user interviews and Observations. (users facing common,
Questionnaire - Surveys (SUS)
- 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.
"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.
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.
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.
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' ,