Doggy App

Once I read the requirements multiple times, I started sketching on paper and defining all the sections and components I would have needed to design the app. Once I reached a point where things made sense, I created a draft of the app map, taking into consideration the sections I needed to evolve. You can see the result in the FigJam file down below.

With the user personas defined and the action that they have to take somehow cleared, I started to sketch on paper to see all the components and the steps needed from the user. To create this I looked at already existing apps to see how they handled the flow and double-checked if what I was making made sense, and there weren’t any illogical steps.

Usually, after I sketch on paper, I move everything on Figma and create a wireframe prototype that I would test with real users to see if what was made actually made sense. But since this was a sprint and I hadn’t any real user I was able to test it only when I finished the whole design with my mother and brother, which are not actual users.

Once I knew how to structure the app, I started working on a brand and the basic styling to dress the UI and create the components. I made a Figma page with the different styles. Two with the color palettes for both the light and dark theme of the app. One for the font family I have chosen and one for the type scaling I decided to use for the app.

For the color I have chosen, I tested the accessibility of all of them, both the dark and light theme so to achieve all AAA results on the WCAG. Once everything was set, I saved the fonts and the colors in the Figma styles so that I could easily reuse them later and swap them everywhere needed by just editing the style in the list.

Since the styles were defined and on the paper sketching, I saw more or less the components I would have needed. I started to create the components on a Figma page. For the time being, I made three buttons types with all their states and variants (primary, secondary, and text buttons). I also created a navigation component and a tab component.

For the icons, I used font-awesome, which has doesn’t always work in the icon pixel grid, so I had to download all the SVG and make them fit in a 14/16/18px grid. Many other components like the tags and icon buttons should be implemented, but they took time which I hadn’t during the sprint.

When all components and styles were finalized, I started to replicate the Ui, which I sketched on paper, on Figma. During the process, I had to edit some components, but overall, it was pretty rapid, plus while two palettes were defined in the styles with equivalent names, I was able to switch rapidly from one to the other by using the Themer Figma plugin.

Once I wired my prototype, the app was "ready" to be tested to see the final result, which you can find in the link down below. I didn't have the time to test it with real users, but I was pretty happy with the result I achieved in two days.