Keeping in mind the user stories of the persona, I developed a user flow . The task of the user was to get started with the app, make a profile and find interesting online workouts to exercise.
I then considered other functionalities that the app would require and I designed the sitemap.
I started the process of wireframing with a mobile first design approach and taking into consideration that the app will be responsive - and will accommodate a tablet and desktop version.
I first sketched low fidelity wireframes for the user flow - on paper and after I was satisfied with the overall direction of the screens interface I translated them into high fidelity wireframes in figma.
The design refining stage started with picking the most accurate words to describe Fit daily: modern, simple, engaging, dynamic, powerful and impactful.
With these in mind, I assembled a moodboard following an online research and went further to develop the Design system that would accommodate all the main UI elements and directions, with general elements and also specific to each type of display used.
The final mobile design is simple and impactful, using bold typography, contrast and color accents to create a strong visual impact. At the same time, all the elements are well organized following the design principles, for a smooth and engaging user experience.
This is the final mobile prototype:
Next, I designed the different responsive layouts for tablet and desktop, starting with specific grids that have incrementally larger margins and gutters so that the overall proportions of the design will be perceived similarly throughout the different screen sizes. I also used specific typography dimensions and icons resized to suit each layout. After designing everything using figma’s auto layout tool, I used the Breakpoints plugin to test the results and make any adjustments.
This project was a good exercise to practice my UX/UI skills, with an emphasis on the user interface development and the responsive design process. I focused more on the visual design for this app, rather than the user research methodologies, to strengthen my technical skills.
I started with a mobile first approach to make sure that the most simple layout provides all the key functionalities and maintains a good usability. The larger screens offer the possibility to include more content in one page, and I translated this opportunity into both functional and aesthetical elements, adding a cover image for a bigger visual impact and keeping the content well organized to get an uncrowded, clear user experience.