UI & Experience Design
Redesigned Website experience connecting customers and clientele as well as B2B relationships.
– Brand Research & Project Strategy
– Visuals, Graphics and Content Strategy
User Research, ideation and visual design to recapture AFC's brand voice and online digital presence
Adhering to AFC's specific business requirements pertaining to the legalities of food items and corporate franchising.
Work with development team located in a different country with varied time differences.
Responsive Design and MVP including a CMS structure.
AFC, Corp. is a world renowned leader in the Asian food service industry. They have decades of immense business growth, however their online presence is loosing traction with users and has many issues with functionality and user interaction. Moreover, the brand presence is in need of a major redesign and aesthetics overhaul.
Many of AFC's customers, clients and business partnerships did not have efficient nor clear interactions with AFC's business relations in a 'digital-world'. Their current website was frustrating to navigate (emblematic of a much larger problem), it wasn't modern looking, it felt clunky and outdated, and didn't provide the proper structure needed for online CMS and content- marketing strategies.
• Identify and reduce user pain points - frictions - frustrations
• Develop a scalable product and provide CMS / Marketing for MVP
• Build trust and loyalty with customer base: increase the adoption of product
• Establish a new company-wide culture bridging departments
• Update the outdated website look, content & context
• Design with innovations and added interactivity
• Improved experience design for the user
• Acquire more organic traffic and give useful information to users
Over the course of three weeks, I did research interviews and usability tests with over five participants as well as surveyed more than 20 people to understand how target users viewed the website experience and I documenting these observations.
GOAL: To evaluated the sites appeal, navigation and overall usability
TYPES OF RESEARCH CONDUCTED
Google Heat Map and Metrics
Naturalistic-F2F, user interviews and observations
Questionnaire and Surveys
Tree Tests and Card Sorts
As part of the testing, I performed the '5-Second Tests' with Participants to understand gut reactions to the website homepage and draw out their first impressions. Some responses included:
"This website looks very outdated, cluttered and boring."
"The overall look is loud and not appealing visually."
"I don't that homepage - the layout was overwhelming."
During verb-based usability tests, I captured direct user quotes.These findings were essential for qualitative analysis as well as uncover unseen and unmet friction points and user frustrations.
Sample Task: Navigate to AFC's products page and find the sushi kit, then add this item to a shopping cart:
Example Raw Answers from participants:
"The site navigation is very confusing and disorganized."
"I wanted to add the Sushi Kit product to the cart, but got lost and gave up and I just left the website".
"A lot pictures and captions are unclear but and I didn't locate the item and the overall image quality is poor."
"The Sushi Kit item doesn't even belong on the page I found, why is it even there?"
"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. I would start redesigning the navigation first".
My Questionnaires provided qualitative data for the next phase of aggregating the issues and defining potential solutions.
From this gathered data, I mapped UX experience problems, organized ideation sessions, and planned actionable goals for immediate solutions.
SAMPLE QUESTIONS: I asking participants to rank the severity of the navigational structure from 1 to 5 (1 being the poorest) based on their first impressions.
When asked multiple choice: When searching for AFC food products, how would you describe your experience following the website's navigation?
A.) Easy to navigate
B.) Somewhat easy to navigate
C.) Difficult to navigate
D.) Very difficult to navigate
17 out of 20 answered 'Very difficult to navigate' while the remaining answered 'Difficult'.
When asked if the website had appropriate content placement and clear naming structure.
Results showed: 17 out of 20 people Strongly Disagreed that the website had content with clear structure and naming.
ANALYZED RESULTS: 96% of the participants agreed the navigation was unclear and difficult to navigate.
During my face-to-face tests with at least 5 participants, I discovered
friction areas and gathered raw qualitative data to structure my research findings
During testing observations, I documented users frustrations and places where they had difficulty completing the straight forward task of finding the Sushi Kit. (Timing each participant for a quantitative metric). 3 out of the 5 testers stopped looking after 45+ seconds).
Users were finding it very difficult to locate the item and place into a shopping cart.
"I am not sure how to find AFC's new Sushi Kit. Some places I am seeing multiple forms of navigation and items - however none of these seem to match what I am looking for."
"Why do you feel the navigation format is most important to you in this task, what could be done differently?"
"I wanted to feel like I was in control, even if it's locating simple items but I am annoyed by constantly wondering where I am located on the website."
"I am not sure if I am even on the home page."
"I couldn't even find the specific product and was shown too many unrelated choices - I would definitely rename some of the navigation items with clear names."
During these test, the results showed many issues with navigation naming conventions and users complaints about confusing content.
I documented common participant complaints:
" that's an odd naming for a product link - wouldn't it be better if it was named as a structured product guide or list."
"this caption doesn't exactly match the images - that is very confusing when searching for the Sushi Kit - this is not normally how I see items on other websites."
The impact of this research helped me uncover more user-empathy pain points and actionable steps to design solution with added efficiency and effective user experience. Highlighting clear navigation and consistent visual hierarchy.
HIGH-LEVEL RESEARCH RESULTS
I was enlightened by the issues found and translated into the real world for our project. Analytics revealed customers were frustrated with the site's navigation system, the overall look and the site's content. After some thinking, it became clearer where we needed to focus our immediate attention and create actionable steps to move forward. The research highlighted a pattern of usability issues and 3 key themes continually emerged:
- The navigation had major naming issues and unclear structure
- The site's content structure was chaotic and disorganized
- The Website had poor visual appeal and haphazard layout continuity
From gathered research data, I was able to better understand the users pain points. The findings aided in the development of a Persona voice for my empathy-based designs.
To validate my research findings, I distilled the data into project goals and strategies and Proto-Persona with a User Mindset for empathy design.
'AFC Users Mind Set' for benchmarking designs and creating a single point of truth to carry through each stage of the project.
Anna Marie, our Persona is an avid Foodie, loves Asian foods and she is very tech-savvy.
ANNA MARIE - THE FOODIE
The Foodies wants to feel like they have learned something from their experience and the information they seek was useful and important in their daily lives.
Anna Marie will sacrifice time and effort for a unique and enjoyable website experience as well as finding local AFC locations.
Some things Anna Marie expressed: "I love AFC's asian foods and love AFC as a company. When on AFC's current website, I wasn't able to quickly locate specific items" and "The website's navigation was very confusing and the content in the product area didn't make sense to me".
SAMPLES QUOTES FROM ANNA MARIE
"This navigation was too vague, I feel there are so many places where I felt stuck and frustrated - I had a difficult time searching for just locating one item".
"I tried to place the sushi kit product in a shopping cart, but the steps we lengthy, so I just stopped my task."
"When searching I didn't find a personalized shopping cart area."
During my early research I uncovered that
ANNA MARIE was more likely to engage when she could easily and clearly navigate the website while searching for her item information and purchases. She would feel more happy when her needs are shopping needs have been met and she recovers from friction areas quickly.
Anna Marie expects professionalism, modern aesthetics and easy navigation on the websites she visits daily.
As part of my research, I conducted 4 card sort workshops with my participants to uncover where and why site structure had navigation issues. These tests gathered key metrics for website architecture and UX strategies.
EXPLORATION METHODS AND TASKS
Mapping - Architecture
Distill content-user needs to a deep level.
Find efficient means to tell brand story and design a site structure that helps user get things done quickly and efficiently
Card Sorting & Reverse Card sort to uncover the most effective and clear navigation system for the user
Discover why the older system was not working and how we could implement positive user experiences into each phase of the project
AREAS FOR OPTIMAL USER EXPERIENCE & MVP
Give users a fun and easy interface experience/functionality
Quality content with engaging visuals
Ability to navigate seamlessly and recover from any friction points quickly
Find product information quickly
Business contacts and vendors have efficiently interaction with AFC
Uncover efficient roadmaps, links and navigation for a optimal experience
PRIORITIZING AREAS FOR MVP INNOVATIONS
Organize a clear, useful & functional navigation system
Develop UI systems to make the content shine and create a unique user experience
Design an adaptable product across mobile devices
Take pressure off of AFC's business system and give them more control using CMS, SEO, social media marketing and metrics tracking
After analyzing and defining the users, I began the ideation stage for adding content, features, navigation and UI Designs
While focusing on Anna Marie's core needs and goals, I began brainstorming and sketching potential solutions and how to implement these for the navigation and content issues. I designed several versions of prototypes to validate and test the updated navigation.
In tandem, I designed the overlook and feel for UI, content, visuals and consistency. My Goal was to better understand the updated and new navigation architecture for the website. My visualization methods included:
- Use Cases Scenarios
- Core Journey Maps
- Red Route Analysis
- Do Go Map for consistency of user interactions and navigation
- Iterative Wireframes, mockups, and Prototyping
- Style Guide
Using empathy-centric design, I prototyped four UI concept versions for the restructured navigation architecture. These updates allowed users to quickly navigate their way through the website. To meet user needs and expectations, I designed the Interfaces with common UI conventions and consistency. including breadcrumbs for the user.
With three months of design to development, I rapidly iterated sketches, wireframes, mockups, and prototypes for a Minimum Viable Product for User Testing as well as future launch dates.
Early test with Low-Fi designs for navigation and content
High-Fidelity Design iterations
for testing of navigation and content design
Comparative heuristic evaluation of prior website
to the newly, reDesigned website. Validating the refined navigation & content experience
SOLUTIONS, OUTCOME & RESULTS
The final reDesign resulted in a refreshed, easy to navigate and fully interactive user experience. The outcome translated into an engaging and usable product design.
FOUR HIGH-LEVEL SOLUTIONS AND GOALS ACCOMPLISHED
Showcased a new, modular website functionality and updatable CMS/SEO framework
Navigation was now clear, credible, organized and useful
Recaptured the essence of the AFC's brand voice
Warm and inviting visual experience with contemporary design aesthetics
TANGIBLE USABILITY TEST AND MEASURABLE EVALUATION
AFC Google metrics revealed the new experience kept users on the website longer; lessened dropout and click-through rates
Increased positive engagement and users were able to get tasks done quicker
Lifted the amount of new interactions with website
Increased revenues through online product orders
Inquiry forms increased business lead gathering by 47%
HR Management and Marketing had a more efficient means of interaction and seamless integrations with the new CMS
DEVELOPING A CONSISTENT FEEDBACK LOOP EARLY
Despite our close collaborations with our offsite developers, we missed some of our marks from the UI designs to development. Issues began to arise quickly regarding underdeveloped content features.
I've learned that, when developing the MVP, clear and consistent conversations held early on would have helped uncover and solve some of these issues quicker. Careful planning, specific strategy discussions and the ability to have on-site support would be an ideal scenarios for consistent feedback loops and collaborations with the product developers.
LESSONS LEARNED & APPLIED
When I took a step back and examined my process, we discovered some issues with superfluous text pertaining to the brand voice.
As a designer, I play a key role in helping influence others by educating them with essential UX tools and solutions, as well as methods to measure and validate these metrics.
During the course of this project, I uncovered optimal solutions to balance the business needs with UX conventions and I reapplying what I learned in the revisions. Our team corrected these areas of lengthy text.
My reference guide while on this journey:
Don't Make Me Think by Steve Krug
Chapter 5 : Omit needless words