Sports4ALL Mobile Application
Description: As part of my interface design course, I had the opportunity to work on a project that involved designing an app from scratch without actual implementation. The main objective of the project was to choose a specific domain and create an app with a user-friendly interface that could provide users with a seamless experience.
UX/UI Design: Ideation, Grayscale Wireframes(User Flow), High Fidelity Mockups, Interactive Prototype, Revision, Figma, Protopie.
User Persona
Name: Caleb Garcia
Sex: Male
Age: 29 y.o
Caleb Garcia is a young millennial that just moved to Vancouver from Toronto for a well paying job. He used to be on a college basketball team as a power-forward and still enjoys playing ball solo. However, sometimes he wishes that he could play with someone to experience team play again and accompany him during his workouts. Since Caleb is new in town, he doesn’t know many people and therefore it is even harder to find like-minded basketball enthusiasts. The following sections will explain why our application would be a decent solution for Caleb.
Project Description
Sports4ALL is a dynamic and innovative sports social media platform that connects sports enthusiasts from around the world and provides them with a unique opportunity to shift from solo to group interactions. This app is designed specifically for individuals who are passionate about sports and are looking for a way to connect with like-minded people who share their love for physical activity. By providing a platform for sports enthusiasts to connect, plan fitness activities, and join a community dedicated to their favorite sports, Sports4ALL has quickly become a go-to app for anyone looking to stay active, meet new people, and have fun. So, whether you're a seasoned athlete or just starting, Sports4ALL is the perfect app for anyone looking to connect, socialize, and stay active with other sports enthusiasts.
User Flow
The user flow shown here is a prototypical estimation of what would be the primary paths followed by users. From my standpoint the key purpose of user flows is to answer such questions as: What is the user trying to accomplish? What keeps them motivated to continue using the application? What are the user's basic needs? What content should be displayed? Ultimately, user flow is the last milestone to be done before starting with medium and high fidelity mockups.
Team Work
During the app design project, our team worked collaboratively to create a visually appealing and user-friendly app. The majority of our work was done using Figma and Protopie, which allowed us to create and test interactive prototypes, refine our designs, and iterate quickly. We also utilized remote meetings to discuss our progress, provide feedback, and ensure that we were on the same page throughout the design process. Through effective communication, collaborative teamwork, and a commitment to excellence, we were able to create an app that was not only visually appealing but also highly functional and user-friendly.
Style Guide
Our style guide for the app design project is a critical component of ensuring consistency and cohesiveness in the overall design. We chose a light blue color as a secondary color to indicate all interactable elements and important information throughout the app. This color was chosen because it stands out well against our primary color, which is a darker blue. Additionally, we opted to use the Roboto font throughout the design, as it gives a modern feel that aligns well with the overall aesthetic of the app. This font was also chosen for its readability and versatility, which are crucial factors in ensuring that users can easily read and interact with the app's content. Overall, our style guide serves as a blueprint for the design process, ensuring that all elements of the app are consistent, aesthetically pleasing, and easy to use.
Design Iterations
Through the course of our work process we faced and tackled multiple issues at different stages related to layout designs, accessibility, functionality and efficiency of our product. From my personal standpoint, it is the best practice to design with iterations and develop different ways to achieve certain goals, taking into account a number of impactful aspects.
Search Page
Originally, we expected the Search page to allow users to filter by distance radius and show individual users and/or communities. Eventually, my decision was made in favour of design on the right, since it is way more efficient to explore the entire community, rather than directly messaging multiple users. It not only saves time for the user who’s looking for a fitness partner, but also prevents the users on the opposite end from receiving unwanted messages.
Schedule Page
The grayscale design represents our initial My Schedule page layout, which later was completely transformed into calendar view. Initial design left users with only two options to organize their “events”: the ones in the future and the ones already attended. The calendar feature allows users to view their schedules in more detail and provides an opportunity to review any date and time.
Community Page
After conducting the usability testing, I discovered that many users found it confusing and annoying when posts that had registration features mixed with other secondary, irrelevant posts(someone selling their “almost new” sneakers, or asking general questions). Ultimately, the primary goal of Sports4ALL is to help users to arrange, schedule and finally attend the event and therefore such posts must be our priority. So, I decided to stick with the initial design that allowed separating attendable events from all news.
Final Design
Working on this app design project has been a valuable learning experience that has significantly improved my UX/UI design, prototyping, and team communication skills. Through this project, I gained valuable experience in using Figma and Protopie to design and prototype an app, which helped me understand the importance of creating a user-friendly and visually appealing product. Additionally, working collaboratively with my team members taught me the importance of effective communication, collaboration, and leveraging each other's strengths to achieve a common goal. Overall, this project has helped me grow as a designer and has given me the confidence to take on future design challenges with ease.
