CrossPunch is a crossfit and boxing gym based on Matosinhos, Portugal.
The CrossPunch athletes can choose between crossfit and boxing. For each session they need to schedule the class with the coach, only 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 schedule with the CrossPunch owner, coaches and some athletes a brainstorming meeting 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 App we set two phases. A phase one with the main features about the classes history and a phase two with the classes payments.
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 element 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 is very versatile and it offers a full range of fonts weights with multiple possibilities of use.
Crosspunch already have an identity manual. The brand main colours are in yellow and black.
I kept the yellow as a spotlight by adding only grey tones to the general boards. Beside that I define two 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 define that any user image would be transformed into grayscale. Even when the users upload a profile or a cover color photo, the APP changes automatically it to grayscale. At same 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 visual and interaction are ready to be used.
Work in progress.
Soon more updates.
ui/ux Rui Parada
developers Frederico Junqueira e André Sousa