Rapid Prototyping: Sailor Moon Race
Project Brief
This is a mini project under SGUnited Skills - Associate UX/UI programme to assess our learning on rapid prototyping with AdobeXD on 8th & 9th October 2020.
The deliverables are:
-
Sign up form for a running event
-
Features required:
-
Home page - event title, event description, sign up button, socials
-
Form page - PDPA, race choice, personal details, indemnity, health declaration, payment
-
End page - sign up complete message and event socials
-
What I Did
-
Individual design process from quick and dirty prototype, low fidelity prototype to high fidelity prototype.
-
Branding principles were implied to differentiate the final end product.
-
Design Tools: AdobeXD & Adobe Photoshop
Outcome
-
A virtual run app was created to suit the current pandemic environment.
-
A virtual run that promotes female empowerment through a fun theme where women can come together and run for a cause.
Retrospective
-
A short time frame and rapid prototyping encourages me to think less and ideate faster.
-
I experienced reduced effort for the high fidelity prototype. Quick and dirty prototype help me to visualise what is required to deliver and the low fidelity prototype help me to focus on the layout.
Design Process
Time is critical as only 16 hours for work is available after taking into consideration the time needed for eat and sleep. Breaking down the project allows me to work effectively towards the goal.
Competitive Analysis & User Task Flow (60mins)
I was able to relate as a user having joined a few half marathons and 10km running races before. For competitive analysis, 42race and justrunlah were evaluated.
Insights from Competitive Analysis:
-
Races are virtual and across a period of time due to the Covid situation. Users can either submit their run timings or use the app as a tracker to track their runs.
-
Key information are the race period, pricing for the different race categories and race entitlement.
With the insights gathered so far, the following task flow was drafted.
Running race user task flow
Branding & Conceptualisation (30mins)
In order to set the race apart from others, there’s a need to communicate a unique selling proposition. The brand perception I wanted to convey was fun, engaging and empowering women.
Sailor moon is a childhood memory of many women. The anime characters are strong, independent fighters who thwart evil and are often associated with feminism and women’s empowerment in western culture. Colourpop, a famous cosmetics brand, had also recently launched a sailor moon makeup collection.
To make it attainable and encourage participation, there is to be 2 race categories of 5km and 10km.
To make it an engaging event, participants could form teams and run together in the sailor moon runner’s t-shirt.
Quick & Dirty Prototype (15mins)
With the task flow and brief in mind, the focus of the project is the sign up process. Below is the quick and dirty prototype which helps with visualisation.
Quick & dirty prototype for race sign up
Low-fidelity Prototype (2hours)
Using AdobeXD, the low-fidelity prototype was created to seek feedback and see if the requirements are being met. It also helps with the layout and concepts for later development.
Low-fidelity prototype for run event
Feedback from the facilitator:
-
Take note of visibility of system status
-
Take note of user control & freedom especially for the checkout process
Final Delivery: High-Fidelity Prototype (12hours)
Here's the final end product showing the task flow of the whole race sign up process!
