Bookee App - Mobile and Desktop UI/UX Design
Project Objective
The main objective of this project is to develop a system of two integrated apps for an existing profession or life situation. The app will function slightly differently on each device where it runs, but it is only required to run on two platforms (phone and tablet, tablet and desktop, or desktop and phone). This project explores how people use technology to work together and how to design interface systems that can be useful and meaningful in our daily life.
Research - Defining the Application
To start this project, brainstorming ideas for apps that could fit the definitions of this project. I started with a list of 15 possible applications and then I narrowed down the list to 3 finalists based on concept strength and feasibility.
By analyzing the different finalist ideas, the Application chosen for the development of this project was:
Appointment Booking App
This idea fulfill all the necessary characteristics for the complete development of this project, meeting all the requirements and guidelines for the development of the different interfaces that this project will have.
The Problem
In our daily life we usually have different appointments that we have to schedule using different platforms and communication medias. For some appointments we have to call, other we have to schedule online, others we have to wait in line. These can create confusion, different learning curves and an unnecessary waist of user/customer time.
The Proposed Solution
This project aims to offer a simple, integrated and well designed solution for appointments booking. Where the user can find all the available options inside a specific area. Allowing them to easily search, find and book an appointment with a variety of businesses and services. The businesses owners will be able to register their business and set up all the basic details in order to help the users (customers) to find and book appointments with their business or services.
====================================================================
Personas
First Audience Personas (Customers)
The first audience targeted for this purpose are the users who use the client side of the application, who will use the application with the main purpose of finding different businesses which offer online scheduling via the application.
This audience covers a vast category of different people with the most varied characteristics.
The main characteristics that can be highlighted for this group are:
Age: 21 - 60 Years Old
Gender: Male and Female
Interests: Food, Shopping, Outdoor and Indoor Activities, Community and Public Services
Second Audience Personas (Business Owners)
The Second Audience for this project would be the business owners that will use the App with the objective to create and define their availability and schedule. They will use the app in order to set up their business account and post important information about different aspects of the business, as business hours, services, prices and availability, allowing the users to schedule appointments directly by the platform.
These Audience has a mix of demographic characteristics but one main interest among them is certainly about technology, having their business with a strong digital presence and systems that integrates/communicate within themselves.
Having this platform as a core element connecting businesses with customers. And helping them to promote and boost their brand inside the digital world.
====================================================================
Scenarios
The App will be developed for IOS platforms.
1. Find a nearby restaurant and access opening hours information.
2. Make a table reservation for 3 people on Fresco Kitchen Restaurant.
3. Check all the bookings appointments that you have.
Business Owner Users
1. Enter key details about your business: Hours and days of operation.
2. Include photos of your business for customers.
3. Check the appointments that you have scheduled for today.
Sketches
User Test #01 - Mobile
Analyzing the usability tests carried out with this preliminary version of the interfaces to be developed showed important points of improvement that can be implemented. Some important take aways from the initial user testing:
- Initially some buttons do not seem to be clear to the user.
- The scheduling flow can be improved and simplified in order to become clearer to the user.
- It was clear that the service selection is understandable, as on all screens the user knew how to select the desired service and proceed with the scheduling.
With greater detail in the graphical elements of these interfaces, the next tests will probably have better user engagement and more in-depth information regarding usability.
User Test #02 - Desktop
The usability tests carried out on the desktop version showed that the general flow of set up of the business details seems simple and understandable, greater detail in the interface will help the user to provide better details regarding usability.
- Design elements that clearly show to the user how to add images for the business.
- The side menu was understood, it is important to use elements typical of desktop interfaces in order to prevent the user from getting confused with actions that would be used in mobile versions.
- Include options do add specific details about the limit capacity of the business (for example, 100 guests max for a restaurant)
Wireframes
Wireframes in web design are visual representations or blueprints that outline the structure, layout, and functionality of a website or application. They serve as a skeletal framework, focusing on the arrangement of elements, such as content blocks, navigation menus, and interactive features, without getting into specific design details.
User Test #03 - Wireframes
Usability tests using wireframes demonstrated that the design structure has important elements that make it clear to the user how to interact correctly with the application. Below you can see some of the main results from the Wireframes User Testing:
Brand Identity
Prototyping - Design System
A design system is a comprehensive set of guidelines, components, and standards that define the visual and functional aspects of a user interface. It serves as a centralized resource for designers and developers to maintain consistency and coherence across a product or brand.
A design system typically includes various elements such as typography, color palette, iconography, spacing, grid systems, and interaction patterns. It provides a shared language and framework for creating and implementing UI elements, ensuring a unified and seamless user experience.
Design systems promote efficiency by enabling designers to reuse components, streamline workflows, and maintain a consistent look and feel across different platforms and devices. They also facilitate collaboration and communication between design and development teams, fostering a cohesive and scalable design ecosystem.
Prototyping
Prototyping in UI/UX design is the process of creating interactive, functional representations of a digital product or application before it is fully developed. Prototypes allow designers to explore and test various design ideas, interactions, and user flows in a realistic and tangible manner.
Prototyping helps uncover design flaws, gather user feedback, and validate design decisions early in the design process, reducing the risk of costly mistakes or rework. It enables designers to iterate and refine their designs based on user insights, improving usability and enhancing the overall user experience.
Prototypes also serve as a communication tool, allowing stakeholders and development teams to visualize and understand the intended design, fostering collaboration and alignment throughout the design and development phases.
User Test #04 - Prototypes
The final tests using the developed prototypes showed very satisfactory results regarding the user experience, in general, all scenarios were successfully completed in a satisfactory manner and demonstrating a well-defined, simple and user-friendly flow.
There are points that need to be improved especially in the Desktop version in order to present other interfaces related to this structure, but in a basic way, the requirements for navigation and service to the scenarios were successfully designed.
Mockup
Mobile Application - Final Prototype
https://www.figma.com/proto/DAx5Wfzz9CSUAhvsrLsp0G/Bookee-App---Capstone-BYUI-2023?type=design&node-id=401-1154&t=HHLtW0tzNooPYlb6-1&scaling=scale-down&page-id=8%3A2&starting-point-node-id=401%3A1154&mode=design
Desktop Application - Final Prototype
https://www.figma.com/proto/3ZuOw4v3Poc7i522tUkRfK/Profession-App---Desktop-Version?kind=&node-id=1-14&page-id=0%3A1&scaling=scale-down&starting-point-node-id=1%3A14&mode=design&t=tPMNt1WNJW7cX8l2-1
Conclusion
This was a very interesting project that helped me to implement, in a satisfactory and planned way, a lot of knowledge that I studied and sought to acquire during my studies at BYUI.
Understanding the user's needs is a basic element for any type of business, and especially when it comes to Interface Design, this is the initial and most important step in the whole process, understanding the user's needs and designing effective solutions.
I was able to learn a lot from this project and I plan to continue working on improving this interface which makes a great case study and presentation for future opportunities.
