Category:
Native Mobile app, Responsive Web Design
Client:
KFC U.S.
Duration:
6 Months
(PRODUCT & PROCESS)
KFC Rewards:
KFC Rewards is a loyalty program meticulously crafted to recognize and reward KFC's most dedicated customers. Users can accumulate points with each purchase, unlocking exclusive rewards, offers, challenges, and various perks. The foundational loyalty program ensures users quick access to redeemable rewards, exclusive offers, and engaging challenges.
My role:
As the leader of the UX design team, I collaborated closely with business analysts and the product team to infuse creativity into the project. Joining during the pre-production phase, my focus was on creative grooming and refinement, maintaining up-to-date user stories, and ensuring the successful implementation of our designs.
Business problems addressed:
Our efforts aimed at resolving key business challenges, including boosting customer loyalty, increasing visit frequency, enhancing customer engagement, gathering valuable customer data and insights, and establishing a competitive advantage.
Design process:
Our design process commenced with a comprehensive review of existing Figma designs and user flows and identifying gaps during the grooming phase. Collaborating closely with business analysts, developers, the client product team, and UX and marketing teams, we gathered requirements through user stories, addressed pain points and also had brainstorming sessions for effective solutions.
The creation of wireframes involved presenting to stakeholders, with iterative enhancements based on their feedback. Our primary objective was to ensure consistency and accessibility, adhering to WCAG 2.1 AA standards across all applications. To achieve this, we relied on the KFC Design System and style guides, rigorously testing development work for high-quality design implementation and incorporating ADA feedback received from the client.
(FEATURES)
Loyalty program opt in
Loyalty program onboarding
Secret recipe vault
Challenges
Challenges
How it works
Badges
Rewards history
Cart update
(DESIGN SOLUTIONS)
Information Architucture revisit
Reasons: developed the information architecture (IA) by aligning it with our evolving comprehension of the app. Consistently refining it as our understanding deepened.
Design solution; toast message placement
Reasons: the existing floating icon overlapped with the toast message, causing difficulty for users to close it. To address this issue, we suggested relocating the icon to the top of the screen.
Grooming design revisions: rewards history
Reasons:
Images for rewards were not provided by the API.
The API lacked a connection between challenges and badges.
The API did not allow for the display of collectively earned rewards within each challenge.
The client's decision was to exclusively showcase dates and offers.
Grooming design revisions; badges
Reasons: the decision was made to showcase only the badges earned by users, excluding the locked badges from view.
Feedback log
Kept a detailed record of all modifications and decisions established in our collaborative creative discussions with the client. This record acts as a valuable resource, allowing us to revisit the history of changes and the reasoning behind each decision, even months into the project.
ADA log
Kept a thorough record of all comments and modifications pertaining to accessibility.
Accessibility review: color contrast
Comments regarding ADA: 1&2. #CC7300 text on #F8F7F5 background fails to meet the 4.5:1 minimum contrast requirement for standard text. We provided a different color from the Style guide. 3. Green text #579942 on white background fails to meet the 4.5:1 minimum color contrast ratio for standard text. The style guide does not include a green shade that meets ADA requirements, prompting us to request the client to supply a suitable green color.
Accessibility review: action carousel
Reasons: don't base the content carousel interaction exclusively around the swipe gesture. Provide users also an alternative, single-press interaction mechanism like visible Next/Prev buttons. Provide visible controls (Next/Prev) to navigate the content slider. If the the slider features an auto-advancing motion provide visible Pause/Play controls. We provided this design solution to overcome the accessibility problem.
Collaborate with developers
Performed UI/UX testing on the developers' work prior to each weekly client demo to ensure design accuracy. Engaged in daily discussions with the development team to address their concerns.
Challenges:
Given our lack of involvement in the initial app design and limited information about its flow, understanding the features and their functionality posed a significant challenge. Changes to requirements were necessitated by API limitations and business decisions, and adapting to these new requirements within a constrained timeframe was challenging. Timely preparation of all deliverables for the development team before they commenced their work was crucial. Effective communication and alignment among the QA, DEV, and BA teams presented additional challenges. Prioritizing the maintenance of up-to-date user stories was essential, and while assuming that the designs were ADA approved, we received ADA-related comments. To meet the launch timeline, many user stories had to be backlogged for the initial feature launch.
Measuring success:
Hosting weekly demo sessions proved to be invaluable for collecting insights from stakeholders.
Key takeaways:
This experience has equipped me with effective collaboration skills with stakeholders, thorough testing of developers' work, implementation of research findings, and the ability to prioritize tasks while remaining on track with assigned user stories in each sprint. Additionally, it has fostered the contribution of ideas for process improvement and proposing designs for missing components to enhance the overall design system.
Looking back:
Streamlining the organization of the Design System file and championing the importance of usability testing.