CrossPunch is a crossfit and boxing gym based in Matosinhos, Portugal.
The CrossPunch athletes can choose between crossfit and boxing. For each session they need to schedule the class with the coach, on the CrossPunch facebook group. The common complaint about this method is the lack of organization about the classes history and registration.
As part of the briefing process I scheduled a brainstorming meeting with the CrossPunch owner, coaches and some athletes to discuss the main issues and the desirable features of our product. We set a list of features by phases and different products. For this product, the App, we set two phases: a phase one with the main features about the classes history and a phase two with classpayments.
As part of the research phase, I created a snapshot view of the target audience. The user goals and pain points helped us to gain a better understanding of the problem we were solving.
User Task Flow
My next challenge was to examine and simplify the number of steps needed for each user to complete their key tasks within the product.
I drew numerous sketches, to define the UI details and the interaction between the components and the boards. This process allowed me to try out a multitude of ideas and iterate them before settling on one.
Wireframes & Wireflows
Based on my initial sketches, I created a set of mid-fidelity wireframes. In doing this I was able to map out the bare-bones of the app, including some of the more subtle aspects such as theelement of spacing/dimensions, identifying reusable patterns and setting the typographic scale. I also created the wireflows to document the micro-interactions behind the app's dynamic content.
The next step was to define the visual details.
The look and feel, the presentation and interactivity of the product.
I used Montserrat family typeface because it is very versatile and it offers a full range of font weights with multiple possibilities of use.
Crosspunch already hasan identity manual. The brand main colours are yellow and black. I kept the yellow as a spotlight by adding only grey tones to the general boards.
Besidesthat I definedtwo extra colours only for the notifications about the users balance. Green for the users with positive balance and a red color for the negative balance.
We set a rule: only work with grayscale images.
With the development team, we definedthat any user image would be transformed into grayscale. Even when the users upload a profile or a cover colourphoto, the Appchanges it automatically to grayscale. At thesame time we set the profile photo to 100% opacity and the cover photo with a 70% black opacity filter.
After some tests with the athletes and coaches, we considered the first phase of our product finished.
The App visuals and interaction are ready to be used.
Work in progress.
Soon more updates.
ui/ux Rui Parada
development Frederico Junqueira e André Sousa