Back

FormOlé

Designing a mobile experience for soccer enthusiasts to help elevate their game on and off the field

Role

UI/UX Design intern

Timeline

6 Months

Tools

Figma, Notion, slack, miro

🌱 Introduction

During Summer 2022, I had the opportunity to work as a UX/UI Design Intern at FormOlé, a dynamic startup based in the Bay Area.

FormOlé is in its early stages of development with limited physical assets to scale its operations.

Another thing is that I was the only Designer on the team, so I recognized that I had a lot to learn and was pretty much starting from ground zero.

However, the beautiful thing was that I was excited to learn, ask questions, and roll up my sleeves and get to work!

Role

UI / UX Design Intern

Duration

April 2022 - September 2023

Tools

🌱 Introduction

During Summer 2022, I had the opportunity to work as a UX/UI Design Intern at FormOlé, a dynamic startup based in the Bay Area.

FormOlé is in its early stages of development with limited physical assets to scale its operations.

Another thing is that I was the only Designer on the team, so I recognized that I had a lot to learn and was pretty much starting from ground zero.

However, the beautiful thing was that I was excited to learn, ask questions, and roll up my sleeves and get to work!

Role

UI / UX Design Intern

Duration

April 2022 - September 2022

Tools

🌱 Introduction

👩🏻‍💻 My Role

As the only designer in the team, I took charge of the whole design journey.

From digging into user insights, brainstorming ideas, testing usability, to fine-tuning designs all with the goal of satisfying both users and business needs.

⭐️ My objective for this internship is to enhance the user experience of FormOlé's app by implementing filter buttons, thereby improving the app's organization and usability.

During Summer 2022, I had the opportunity to work as a UX/UI Design Intern at FormOlé, a dynamic startup based in the Bay Area.

FormOlé is in its early stages of development with limited physical assets to scale its operations.

Another thing is that I was the only Designer on the team, so I recognized that I had a lot to learn and was pretty much starting from ground zero.

However, the beautiful thing was that I was excited to learn, ask questions, and roll up my sleeves and get to work!

As the only designer in the team, I took charge of the whole design journey.

👩🏻‍💻 My Role

As the only designer in the team, I took charge of the whole design journey.

From digging into user insights, brainstorming ideas, testing usability, to fine-tuning designs all with the goal of satisfying both users and business needs.

⭐️ My objective for this internship is to enhance the user experience of FormOlé's app by implementing filter buttons, thereby improving the app's organization and usability.

🫣 Problem

No organization

Confusing UI

FormOlé is a soccer skill training app that offers various challenges:

Beat That
See the Stars
Freestyle

While the app provides an excellent platform for users to improve their soccer skills, the user experience can be improved.

The Home Screen contains all the challenges in one place, with no clear organization or structure, which can be overwhelming for users.

✨ Solution

No organization

Confusing UI

FormOlé is a soccer skill training app that offers various challenges:

Beat That
See the Stars
Freestyle

While the app provides an excellent platform for users to improve their soccer skills, the user experience can be improved.

The Home Screen contains all the challenges in one place, with no clear organization or structure, which can be overwhelming for users.

🫣 Problem

No organization

Confusing UI

FormOlé is a soccer skill training app that offers various challenges:

Beat That
See the Stars
Freestyle

While the app provides an excellent platform for users to improve their soccer skills, the user experience can be improved.

The Home Screen contains all the challenges in one place, with no clear organization or structure, which can be overwhelming for users.

✨ Solution

Enhanced navigation

Categorize challenges

Filter Buttons:

I designed filter buttons to allow users to toggle between different challenge categories.

This feature enables users to customize their experience by selecting challenges that align with their goals or preferences.

Descriptive Challenge Titles:

Descriptive titles help users make informed decisions about which challenges to take on based on their interests and skill levels.

✨ Solution

Enhanced navigation

Categorize challenges

Filter Buttons:

I designed filter buttons to allow users to toggle between different challenge categories.

This feature enables users to customize their experience by selecting challenges that align with their goals or preferences.

Descriptive Challenge Titles:

Descriptive titles help users make informed decisions about which challenges to take on based on their interests and skill levels.

🧪 Designing by Asking Users, Iterating by Listening

Research : Usability Testing

In contrast to formal usability testing, which follows predefined tasks and metrics, I embraced a more natural and casual approach by implementing guerilla usability testing.

This choice offered me an effective way to gather feedback, one that's flexible, approachable, and adaptable to our circumstances.

There is too much clutter on the main screen and I have to scroll all the way down if I want to view the different challenges. Also, every card looks the same

There is complex and confusing navigation. It’s hard to find specific features and the lack of clear labels made it challenging for me to understand the purpose of certain buttons or icons. The app’s responsiveness is also slow which caused some delays

🎇 Identifying touchpoints

Research : User Journeys

To gain a deeper understanding of the user experience within the FormOlé app, I conducted user journeys focused specifically on the Beat That and See the Stars Challenges, which are the main challenges within the app.

Here are my takeaways:

Opportunities:
- Users being able to connect with coaches and friends to help better their soccer skills
- Improve the organization and categorization of its cards
  - By doing so, users will be able to easily find and access the content that is most relevant to them, leading to a more streamlined and efficient user experience.
Pain points:
- Difficulties with kick recordings
- Inaccurate skills analysis
- Limited features and resources that users need to improve their soccer skills

Here are my takeaways:

Opportunities:
- Users being able to connect with coaches and friends to help better their soccer skills
- Improve the organization and categorization of its cards
  - By doing so, users will be able to easily find and access the content that is most relevant to them, leading to a more streamlined and efficient user experience.
Pain points:
- Difficulties with kick recordings
- Inaccurate skills analysis
- Limited features and resources that users need to improve their soccer skills

🌊 Mapping out the steps

Research : User Flows

By mapping out the steps that users would take to achieve their goals, I was able to identify pain points and areas of improvement in the design.

This helped me to make informed decisions on how to streamline the user experience and simplify the navigation.

By mapping out the steps that users would take to achieve their goals, I was able to identify pain points and areas of improvement in the design.

This helped me to make informed decisions on how to streamline the user experience and simplify the navigation.

🚀 Involving the team

Research: User Testing & Research Synthesis

Some of the people within my team are soccer coaches themselves so I involved internal team members in my process to test the app, so they also become end users themselves.

As a whole, my team and I connected with others within our network who end up being great candidates for user research. Sharing research and testing results within the company gives me better context around design decisions that I make, and eventually influences the direction leadership takes the product in as well.

⚙️ Outlining the basic structure

Design : Lo-Fi Wireframes

Throughout our project, I took the lead in designing the low-fidelity wireframes, laying the groundwork for our design direction. In addition to spearheading the initial design phase, I played a critical role in facilitating the handoff to developers, offering essential guidance for the creation of high-fidelity wireframes.

It's worth mentioning that my focus remained on the low-fidelity aspect, while I ensured a smooth transition to the high-fidelity stage through my contributions.

📱 The Final Design

Design: Hi-Fi Wireframes

In crafting the final design, our team prioritized user enhancements in two key areas:

Filter buttons

Designed to streamline navigation, our filter buttons provide an intuitive and user-friendly way for individuals to interact seamlessly with the app

Challenge Cards

Meet business goals and encourages users to practice their skills

Through a thorough consideration of user needs and preferences, our team designed an engaging interface that facilitates effortless navigation and interaction. The improved organization of the app ensures intuitive structuring of information and features, empowering users to effortlessly access what they're looking for.

In crafting the final design, our team prioritized user enhancements in two key areas:

Filter buttons

Designed to streamline navigation, our filter buttons provide an intuitive and user-friendly way for individuals to interact seamlessly with the app

Challenge Cards

Meet business goals and encourages users to practice their skills

📈 Results

Our team's weekly meetings and standups provided valuable opportunities for collaboration and feedback, and my team was consistently impressed by the final outcome of the design.

Positive Stakeholder Feedback
Throughout the design process, we maintained open communication channels with stakeholders, soliciting their input and aligning our design decisions with project goals. This collaborative approach fostered a sense of ownership and trust, resulting in overwhelmingly positive feedback from stakeholders regarding the impact of our design solutions.

Enhanced User Engagement

Through iterative testing and feedback loops, we fine-tuned interactions, resulting in a seamless user experience that fostered deeper engagement and satisfaction

Enhanced User Engagement

Through iterative testing and feedback loops, we fine-tuned interactions, resulting in a seamless user experience that fostered deeper engagement and satisfaction

Reflecting on my experience

💪 It is okay to feel vulnerable

Being the only designer on the team was very nerve wracking and I felt lost multiple times. However, I learned that it is okay to ask questions and feel vulnerable. I had a great team that acknowledged the work I put in and they helped me grow as a designer. I learned how to become more vocal and express my rationale. Thanks to their guidance, I became more confident in my skills.

⚡️ Be Proactive

During my internship, I took the initiative to be proactive and seize every opportunity to contribute and learn.
I didn't just limit myself to the tasks assigned to me, I constantly sought out ways to improve myself.

I immersed myself in:

Practicing Figma which eventually became a regular part of my routine
Learning about design through books and connections
Staying up to date with the latest trends

By going beyond what was expected of me during my internship, I was able to bring fresh perspectives and innovative ideas to the table.

💪 It is okay to feel vulnerable

⚡️ Be Proactive

I immersed myself in:

Practicing Figma which eventually became a regular part of my routine
Learning about design through books and connections
Staying up to date with the latest trends

By going beyond what was expected of me during my internship, I was able to bring fresh perspectives and innovative ideas to the table.

💪 It is okay to feel vulnerable

⚡️ Be Proactive

During my internship, I took the initiative to be proactive and seize every opportunity to contribute and learn.
I didn't just limit myself to the tasks assigned to me, I constantly sought out ways to improve myself.

I immersed myself in:

Practicing Figma which eventually became a regular part of my routine
Learning about design through books and connections
Staying up to date with the latest trends

By going beyond what was expected of me during my internship, I was able to bring fresh perspectives and innovative ideas to the table.

💌

I feel incredibly fortunate to have had the opportunity to grow and learn alongside an exceptionally supportive team.

This internship was my very first step to becoming a UX designer. I thank my team's guidance and encouragement that have played a pivotal role in my personal and professional development.

I feel incredibly fortunate to have had the opportunity to grow and learn alongside an exceptionally supportive team.

This internship was my very first step to becoming a UX designer. I thank my team's guidance and encouragement that have played a pivotal role in my personal and professional development.