Embedded Files
ROLE
ROLE
UI/UX Designer (Web public)
CLIENT
CLIENT
Apps Cyclone
TEAM SIZE
TEAM SIZE
4 members
TIMELINE
TIMELINE
12/04/2023 - 26/04/2023
About project
About project
AC3RACE Running Platform includes Web public and CMS. While CMS enables organizations and entities to host their own online running events, Web Public allows runners can be registered to join a running event quickly and easily. With a user-friendly interface and intuitive design, event organizers can easily set up and customize event pages, while participants can register, track progress, and share achievements. The project focuses on creating a responsive design for optimal user experience across devices. Data security and privacy are prioritized. AC3RACE Running Platform empowers users to create and manage engaging virtual running events efficiently.
Problem Statement
Problem Statement
Nowadays, many people love running, but there are two problems that organizers and runners face. Firstly, many companies or event organizers want to arrange running tournaments for their staff or anyone who loves running. However, most of them announce these events on their business pages, which can cause some people to miss the information. Additionally, runners often do not know how many tournaments are taking place or how to quickly and conveniently sign up.
Possible Solution
Possible Solution
AC3RACE Running Platform: CMS and Web Public will help people solve these two problems. First of all, CMS help the organizers register their programs or tournaments easily. In addition, Web Public help runner know when the running events take place and sign in quickly.
Design Process
Design Process
Discover Phase
Discover Phase
Read Brief
Read Brief
When my team received a brief of ACE3RACE, firstly, we sat together and analyzed the brief carefully. In particular, we read and found some weird point that we did not understand, then, every member explained their understanding about these points. In reading progress, sometimes, we did not understand clearly and could not identify any features, we would contact with client and communicate to define those features. After we understood entire brief, we begin conduct competitor analyze.
Competitor Analysis
Competitor Analysis
Based on requirement of client, we chose 4 websites to analysis their color and style. Besides, the client wanted us to referent a website named iRace.vn.
Analysis
Analysis
Corner Radius = 0, create a strong feeling (button)
Color: Orange, Red, Cyan Blue, provide a young, enthusiasm, strong feeling => so we chose Cyan Blue , this color meet the client's need, simultaneously, it closely resembles their brand color.
Image: Sport, Marathon
For reference website (iRace.vn): we based on its layout and UX to design
Define Phase
Define Phase
User Personas
User Personas
Two persona above help me understand their motivations, goals and specially, their pain point. From their personas, I figure out more about their worries and what they need.
Empathy Mapping
Empathy Mapping
These empathy maps are created and synthesised through my interview and observation when I interviewed them including their postures, body language, emotions, facial expressions, …
Ideate Phase
Ideate Phase
User Personas
User Personas
Userflows
Userflows
Design Phase
Design Phase
Wireframe
Wireframe
Style Guides
Style Guides
A style guide is used to define the rules, standards, and design guidelines to ensure consistency and uniformity in the interface, content, and user experience of a project. It helps ensure that all members of the design and development team adhere to common design principles, from the use of colors and imagery to typography, spacing, and user interactions. A style guide helps achieve consistency, enhance aesthetics, and improve the effectiveness of a design project.
UI Design
UI Design
Responsive
Responsive
Challenges
Challenges
This is the first time I made the running website or the field of running/sport and my real project so I encountered certain difficulties:
Firstly, when I received the brief, I and three members had to read carefully and analyzed. At that time, I did not understand clearly about all page of this website.
-> Solution: I try to ask client and understand clearly the brief, also, I research more about a running website that the client gave me to referent.
Secondly, a page which is very vital with a running website is leaderboard. However, I really did not know this information so I found it difficulty when I design the leaderboard.
-> Solution: I designed many page with many different styles, beside, I find more in Dribbble to have ideas for this.
Finally, after I gave the file Figma for client, they did not like homepage so my group had to design multiple versions.
My Lessons
My Lessons
Thank to this project, I learn some lessons that are useful for me:
I know a process design from step: receiving brief to step: design
How to design a leaderboard that is so important in running website
Knowledge about running website and how to runner register
How to create a style guide and choose color
Page updated
Google Sites
Report abuse