Floop
Floop
I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user interviews, the business goal, and the heuristic evaluation of the original Floop software. We came back to the sketches throughout the entire design process to make sure that we don’t lose sight of our primary goals and ideas.
Using Figma, I translated my first sketches into low-fidelity wireframes. Then, I improved them by adding a few relevant stock images and copies provided by the marketing team. At this stage, the wireframes were defined enough for some user testing. Based on 4 tests, I’ve made a few alternations and moved on to creating high-fidelity prototypes.
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the organization’s values and show off a unique and understandable interface. I analyzed several web applications that served as inspiration that would fit out approach.
I followed a minimalist, yet highly funcitonal. Inspired from Linear.app
ShadCN serves as the styleguide
This platform is designed to be adaptable and used in mobile, tablet, and desktop.
The final design reflects the needs for users to have an easy to use interface where they can organize their students, classes, and assignments concisely.