6 Months in 2017/8
Re-design in 2024
UX Design, UX Research, Visual Design, Interaction Design, A-B User Testing
Figma, Invision, Adobe Photoshop, Adobe Illustrator, Adobe InDesign, Adobe AfterEffects, Adobe Premiere Pro, Miro, Slack
TapTab is a mobile messaging app designed to simplify and enhance communication between users and local businesses. The goal was to create a platform where users can easily place orders, schedule appointments, and send inquiries, while businesses gain valuable insights and streamline their operations.
Secondary Research
According to studies conducted by Hubspot and SuperOffice, around 60% to 75% of customer inquiries on social media channels remain unanswered by businesses.
Research from the National Small Business Association (NSBA) suggests that small businesses, in particular, may struggle to keep up with communication demands due to limited time and resources.
There's evidence to suggest that younger generations, such as millennials and Gen Z, exhibit higher levels of phone anxiety compared to older generations, due to increased familiarity with text messaging platforms.
Research by J.D. Power found that customer satisfaction is significantly higher among customers with businesses through live chat compared to those who use other communication channels due to convenience, speed, and personalised assistance offered by live chat.
Messaging platforms, despite their initial setup costs, can ultimately lead to cost savings for businesses. Research by Aberdeen Group found that companies with live chat support experience a 50% reduction in customer service costs and a 48% increase in operational efficiency.
In today's business landscape, offering online chat support can serve as a differentiator that sets a business apart from their competitors. According to a survey by E-consultancy, around 80% of businesses agree that a live chat offering has positively impacted their sales.
User Interviews
Utilising insights gleaned from secondary research on user demographics, I conducted UX research interviews with four individuals, familiar with making enquiries and bookings with local restaurants, shops and service providers. This approach provided invaluable insights into users' distinct behaviours and challenges when interacting with businesses. Building upon the findings of the secondary research, I subsequently conducted additional interviews from the perspective of business owners. This dual approach ensured that the app under development would cater to the needs of both businesses and consumers, fostering mutual benefit and usability. This established 4 key themes (2 for users, and 2 for businesses), with behaviours, goals and pain points.
More Personal Interactions
(Business)
"Sometimes it's a shame to feel somewhat disconnected from customers, it can lead to decreased customer satisfaction and it's a missed opportunity to build great community connections."
"Putting myself back at the forefront of the business would be brilliant for myself, and the company."
"I get a little upset when people treat the business like a machine, at the end of the day, I miss the interaction with people!"
Streamlined Channel of Enquiry
(Business)
"Balancing emails, calls and online chats is tough, and it takes a big chunk of time and resource from myself and my team."
"I would be so grateful to have some of this burden streamlined through an app, if emails and online messages could all filter into the app it would be perfect."
"It's a real money and time sink to have to answer calls, emails and chats all day on different devices."
A Local Directory
(User)
"I spend a long time chatting with friends and family to get some good local recommendations, as other apps don't focus on local perspectives as much."
"It would be great to see other local user's reviews, comments and opinions on businesses - from a purely positive perspective!"
"I don't like to be pushed towards chain restaurants and large shopping franchises all the time due to lack of local knowledge."
Increased Convenience of Conversation (User)
"I will have to set aside a good chunk of time from my day to make bookings and message businesses for returns."
"I want to be able to start and stop the conversation when it's convenient for me, to fit into my daily routine easily."
"I get so frustrated spending hours on hold, or waiting for an email response."
User Persona
Developing a user persona helps to further understand and add context to my user's behaviours, goals and pain points, and aids in unifying common themes from the user research for TapTab App.
How might we make it easier for customers to communicate with local businesses, ensuring quick responses and personalised interactions that enhance overall satisfaction and loyalty?
Experience Mapping
An experience map for Oliver, a TapTab user, highlights his journey from searching for video shoot locations to securing bookings, showcasing pain points and opportunities for streamlined communication and efficiency.
Design Opportunities
Personalised business suggestions based on consumer preferences and past interactions, making it easier for users to discover and connect with relevant local businesses.
Combining countless contact methods into one sleek application, allowing consumers to quickly inquire about services, availability, and details, enhancing convenience and reducing response times.
One-click booking systems that allow consumers to schedule appointments or reserve services with a single click, simplifying the process and saving time.
User Flows
In the TapTab UX design process, understanding the key interactions between users and the app was crucial. This section presents two primary user flows, the first of which shows a consumer reaching out to an already-known business to enquire about business services using the chat function.
The second user flow (below) shows a consumer searching through the TapTab business directory to discover a local business, using filtering options to create bespoke search results and using local reviews to inform decision making.
Initial Sketches
In the wireframing stage for TapTab, the focus was on creating a clear and intuitive layout that facilitates easy communication between users and businesses. These initial designs laid the groundwork for user-friendly interfaces and efficient navigation, ensuring a seamless experience for both parties.
Wireframing
In the wireframing stage for TapTab, the focus was on creating a clear and intuitive layout that facilitates easy communication between users and businesses. These initial designs laid the groundwork for user-friendly interfaces and efficient navigation, ensuring a seamless experience for both parties.
User Testing
After several iterations of the initial wireframe and low-fidelity prototype design, I tested the app with a diverse group of users, including those with lower technical skills and accessibility challenges. This user-informed approach ensured an equitable design. The testing confirmed that the app met many consumer needs, whilst also highlighting some opportunities for further design development.
High Fidelity Prototype
After refining the wireframes and incorporating feedback from user testing, I developed the high-fidelity prototype for TapTab. This stage brings the app's design to life with detailed visuals, interactive elements, and polished UI components. The high-fidelity prototype demonstrates the final look and feel of the app, showcasing its seamless user experience and intuitive functionality.
Explore key moments of the TapTab app through a series of short Figma animations below. These animations highlight essential user interactions, including searching the business directory, using map mode, and starting a business chat.
Landing Page Experience
Upon opening the TapTab app, users are greeted with a clean and intuitive landing page offering two main pathways: Business Search and Discovery. The Business Search pathway allows users to quickly find and connect with specific businesses, while the Discovery pathway lets users explore new and recommended local businesses based on their interests and preferences. This dual-option approach ensures a tailored experience, catering to both targeted searches and spontaneous exploration.
Intuitive Search Function
The TapTab app features a robust search function that allows users to easily find businesses by name, category, or keywords. Once a business is selected, detailed information about the business, including services, hours, and location, is displayed. Users can then effortlessly begin a chat with the business to make inquiries or bookings. Conversations can be saved for future reference, ensuring seamless and convenient communication.
Customisable User Profile Page
The TapTab app offers a customisable user profile page for social interaction. Users can share favourite business lists, follow others for recommendations, and add reviews, photos, and notes. This enhances community engagement and personalises the user experience.
Map View and Route Planner
TapTab's map view enhances business search and profile exploration. Users can locate businesses easily and view detailed profiles directly on the map. With integrated direction capabilities and a route planner, users can find the best routes and navigate seamlessly to their chosen destinations.
UI Library
The TapTab UI Library offers a cohesive set of design elements, ensuring a consistent and intuitive user experience. It includes buttons, icons, typography, and colour schemes, all crafted for seamless interaction. This library simplifies the design process and maintains visual harmony across the app.
Multi-Platform Exploration
This dedicated website allows businesses to manage their profiles, update information, and efficiently respond to customer inquiries. It provides tools for tracking interactions, managing appointments, and analysing customer feedback to enhance service delivery.
