© All RIGHTS RESERVED
F1 Mobile app for football community
2021
Product Overview
F1 is a platform of one of the biggest football communities. The app's main goal is to involve users in the community, deliver member's last-checked insights covered with opinions of influencers, through video and audio podcasts and short posts, and give them an opportunity to submit content.
Tools:
Figma, FigJam, Adobe Photoshop, ProtoPie, Jitter
F1 is a platform of one of the biggest football communities. The app's main goal is to involve users in the community, deliver member's last-checked insights covered with opinions of influencers, through video and audio podcasts and short posts, and give them an opportunity to submit content.
Tools:
Figma, FigJam, Adobe Photoshop, ProtoPie, Jitter
Tasks & Responsibilities
Design a product in early stages, based on UX researches insight to be delivered for launching:
Design a product in early stages, based on UX researches insight to be delivered for launching:
- Tasks & Responsibilities
- Design a product in early stages, based on UX researches insight to be delivered for launching:
- Conducted a UX survey of some count participants
- Generated user persona and its empathy map
- Created user journey map for clear understanding and future resolving
- Designed information architecture and User Flow map
- Executed brainstorming to generate ideation
- Took usability tests from target users
- Some content below is anonymised or changed.
Design Process
In the early stages of the product launch process, when there was a lack of time, various basic phases and approaches were used to obtain the most suitable solution.
Survey:
We had limited time and budget, so a survey is the quickest way to gain data.
Some of the results:
User Persona & Empathy Map
We created a user persona with their motivations, problems, and ambitions by combining the results of the survey and interview.
When solving problems and building the product, we must keep this user in mind. Choosing a representative of product users can assist us in making better decisions.
To create a more accurate user persona, we need an empathy map. The empathy map helps us understand what they need, think, feel, see, hear, and do. Finally, We found their pains and gains to care about those areas and make them easier and simpler.
In the early stages of the product launch process, when there was a lack of time, various basic phases and approaches were used to obtain the most suitable solution.
Survey:
We had limited time and budget, so a survey is the quickest way to gain data.
Some of the results:
- 40% of the members were 19 to 45 years old
- 80% are men
- Most interesting content for them is made by trusted users or influencers
- Short time to read and audio format of the content is were the most priority
- 90% conduct with the community and portable content via mobile through the mobile app
- etc.
User Persona & Empathy Map
We created a user persona with their motivations, problems, and ambitions by combining the results of the survey and interview.
When solving problems and building the product, we must keep this user in mind. Choosing a representative of product users can assist us in making better decisions.
To create a more accurate user persona, we need an empathy map. The empathy map helps us understand what they need, think, feel, see, hear, and do. Finally, We found their pains and gains to care about those areas and make them easier and simpler.
Information Architecture
An optimized and organized structure of business requirements and user needs helps the users navigate easily between screens. So preparing an IA by the data that we obtained in the previous research method will reach a more accurate flow chart in the next step.
Flow Chart
After we reach a simple IA and fit it with stakeholders, we can go ahead with a detailed flow chart to ensure nothing missed.
An optimized and organized structure of business requirements and user needs helps the users navigate easily between screens. So preparing an IA by the data that we obtained in the previous research method will reach a more accurate flow chart in the next step.
Flow Chart
After we reach a simple IA and fit it with stakeholders, we can go ahead with a detailed flow chart to ensure nothing missed.
LoFi Wireframing
We created LoFi prototypes to validate our hypotheses to be sure of the next steps.
After we choose the best concept we started creating a design system.
We created LoFi prototypes to validate our hypotheses to be sure of the next steps.
After we choose the best concept we started creating a design system.
Design System
This atomic design system was created to make the next process easier and faster.
This atomic design system was created to make the next process easier and faster.
UI. Hi-fi prototype
There are some screens based on previous steps and ready for interactive prototyping.
There are some screens based on previous steps and ready for interactive prototyping.
Next steps
After we validate all needed screens all will be ready to create interactive flows in ProtoPie. It will give the opportunity to make usability testing close to real experience.
After we validate all needed screens all will be ready to create interactive flows in ProtoPie. It will give the opportunity to make usability testing close to real experience.
