Customer Service App

01

Project Brief

Customer Service App for a Culinary School

Designed an inclusive customer service app to elevate student support and engagement for an online culinary school. The app combines eight powerful resolution tools (FAQs, Live Chat, Tutorials, Email Us, Community, Office Hour, Text Us, and Call Us) into one seamless experience, making it easier for students to find answers, connect, and get support anytime, anywhere.

Role:

Senior Product Designer and Frontend Developer

Contribution:

Team Lead, User Research, UI Design, Prototyping, Usability Testing, Design System, Frontend Engineering

Team:

Product Manager, Backend Developer, Users and Me

Timeline:

26 weeks

photo of the customer service app showing Narrator, an accessibility feature

02

Challenges

Identified Problems:

  1. High volume of repetitive queries.

  2. Limited real-time support options.

  3. Inefficient resolution processes.

Key Questions:

  1. How can we reduce the number of repetitive support queries?

  2. What real-time support options are most effective for users?

  3. How can we improve the efficiency of resolving complex issues?

03

Approach + Solution

Frequently Asked Questions

Approach

Research & Insights:

  1. Analyzed common support queries.

  2. Conducted user interviews to understand pain points.

Key Findings:

  1. Users need quick, self-service answers.

  2. Searchable and categorized FAQs are preferred.

  3. Frequently updated content is crucial.

photo of the user research pain points

Design & Prototyping:

  1. Developed wireframes for FAQ layout.

  2. Created a searchable database.

  3. Tested usability with target users.

Features Implemented:

  1. Search functionality.

  2. Categorized FAQs.

  3. User feedback mechanism.

photo of the user research pain points

Solution

FAQs Core Functionality:

  1. Easy access to common questions

  2. Quick search results.

  3. Regular updates and user feedback integration.

Impact:

  1. Reduced support queries by 30%.

  2. Increased user satisfaction.

  3. Streamlined support process.

photo of the FAQs

Live Chat

Approach

Research & Insights:

  1. Accessed user need for real-time support.

  2. Analyzed best practices in live chat implementation.

Key Findings:

  1. Users value instant responses.

  2. Automated responses for common issues are effective.

  3. Escalation to human agents is necessary for complex queries.

Primary Persona: Ha-Joon

photo of the user research primary persona

Design & Prototyping:

  1. Designed chat interfaces and flow.

  2. Developed prototypes for automated and human interactions.

  3. Conducted A/B testing.

Features Implemented:

  1. Real-time chat support.

  2. Automated responses.

  3. Human agent escalation.

photo of the Live Chat paper and digital wireframe and final design

Solution

Live Chat Core Functionality:

  1. Efficient query resolution.

  2. Instant support for urgent issues.

  3. Smooth transition from automated to human support.

Impact:

  1. Increases customer satisfaction by 25%.

  2. Improved resolution time for urgent queries.

  3. Enhanced support efficiency.

photo of Live Chat

Tutorials

Approach

Research & Insights:

  1. Identified areas where users needed detailed guidance.

  2. Analyzed preferences for tutorial formats.

Key Findings:

  1. Visual tutorials are preferred.

  2. Step-by-step guides enhance learning.

  3. Interactive elements improve engagement.

Secondary Persona: Kingsley

photo of the user research secondary persona

Design & Prototyping:

  1. Developed multimedia tutorials.

  2. Created interactive guides.

  3. Tested tutorial effectiveness with users.

Features Implemented:

  1. Video tutorials.

  2. Interactive step-by-step guides.

  3. Progress tracking.

photo of the Tutorials paper and digital wireframe and final design

Solution

Tutorials Core Functionality:

  1. Comprehensive learning resources.

  2. User-friendly interfaces.

  3. Personalized learning paths.

Impact:

  1. Improved user competence.

  2. Increased engagement with educational content.

  3. Reduced need for direct support.

photo of Tutorials

Email Us

Approach

Research & Insights:

  1. Surveyed user preferences for detailed support.

  2. Analyzed email support trends.

Key Findings:

  1. Users need a reliable way to get detailed responses.

  2. Email is preferred for complex issues.

  3. Timely responses are critical.

User Journey Map: Ha-Joon

photo of the user research primary persona user journey map

Design & Prototyping:

  1. Developed email support templates.

  2. Created a system for response tracking.

  3. Tested usability and response times.

Features Implemented:

  1. Easy-to-use email forms.

  2. Response tracking.

  3. Automated confirmation emails.

photo of the Email Us paper and digital wireframe and final design

Solution

Email Us Core Functionality:

  1. Detailed query submission.

  2. Transparent response tracking.

  3. Prompt and thorough replies.

Impact:

  1. Enhanced user satisfaction.

  2. Improved resolution of complex issues.

  3. Increased trust in support services.

photo of Email Us

Community

Approach

Research & Insights:

  1. Investigated user interest in peer support.

  2. Analyzed community engagement trends.

Key Findings:

  1. Users value peer-to-peer interaction.

  2. Community support reduces direct support burden.

  3. Active moderation is necessary.

photo of the Competitive Audit

Design & Prototyping:

  1. Developed community forum.

  2. Created user profile features.

  3. Tested engagement and moderation tools.

Features Implemented:

  1. Discussion boards.

  2. User profiles.

  3. Moderation tools.

photo of the Community paper and digital wireframe and final design

Solution

Community Core Functionality:

  1. Peer-to-peer support.

  2. User interaction and engagement.

  3. Community-driven knowledge base.

Impact:

  1. Increased user engagement.

  2. Reduced support staff workload.

  3. Fostered a sense of community.

photo of Community

Office Hour

Approach

Research & Insights:

  1. Assessed need for direct expert interaction.

  2. Analyzed scheduling preferences.

Key Findings:

  1. Users want personalized support.

  2. Scheduled sessions increase satisfaction.

  3. Notifications improve attendance.

photo of the Big Picture Storyboard

Design & Prototyping:

  1. Created a booking system.

  2. Developed notification features.

  3. Tested scheduling and reminders.

Features Implemented:

  1. Scheduling tool.

  2. Notifications.

  3. Expert availability management.

photo of the Office Hour paper and digital wireframe and final design

Solution

Office Hour Core Functionality:

  1. Personalized expert support.

  2. Easy booking and scheduling.

  3. Timely reminders.

Impact:

  1. Improved user satisfaction.

  2. Increased attendance for support sessions.

  3. Enhanced personalized support.

photo of Community

Text Us

Approach

Research & Insights:

  1. Evaluated user preference for mobile communication.

  2. Analyzed effectiveness of SMS support.

Key Findings:

  1. Users prefer quick text-based support.

  2. SMS is effective for on-the-go queries.

  3. Automation improves response time.

photo of the Close-up Storyboard

Design & Prototyping:

  1. Developed SMS support system.

  2. Created automated response flows.

  3. Tested response times and user satisfaction.

Features Implemented:

  1. SMS support.

  2. Automated responses.

  3. Escalation options.

photo of the Text Us paper and digital wireframe and final design

Solution

Text Us Core Functionality:

  1. Convenient mobile support.

  2. Quick automated responses.

  3. Smooth escalation process.

Impact:

  1. Increased user convenience.

  2. Faster response times.

  3. Improved overall support experience.

photo of Text Us

Call Us

Approach

Research & Insights:

  1. Assessed need for voice support.

  2. Analyzed user preferences for call support.

Key Findings:

  1. Users need direct voice communication.

  2. Calls are preferred for complex issues.

  3. Callback options enhance experience.

Userflow: Call Us

photo of the User Flow

Design & Prototyping:

  1. Developed call support system.

  2. Created callback scheduling.

  3. Tested call quality and satisfaction.

Features Implemented:

  1. Voice support.

  2. Callback options.

  3. Escalation protocols.

photo of the Call Us paper and digital wireframe and final design

Solution

Call Us Core Functionality:

  1. Direct voice communication.

  2. Scheduled callbacks.

  3. Efficient issue escalation.

Impact:

  1. Increased resolution rates.

  2. Enhanced user trust.

photo of Call Us

04

Result

Outcome:

  1. The customer service app successfully addressed the initial challenges and significantly improved the overall experience for both students and staff.

  2. The app's intuitive design and robust functionality led to higher satisfaction and better management of inquiries.

Reflection:

  1. Working on this project reinforced the importance of user-centered design and continuous iteration.

  2. The positive impact on the culinary school's operations and user satisfaction was immensely rewarding.

photo of the customer service app showing Narrator, an accessibility feature

05

Process

Behind the Scenes:

  1. This project involved extensive user research, iterative design, and rigorous testing.

  2. Throughout the design process, from initial sketches to final implementation, every step was tailored to address user needs, align with business goals, and enhance the overall experience.

For more detailed insights and the complete design process, feel free to contact me directly.

Next: No-code Website Builder