I followed along with Nima to design a 7-Page Mobile Mockup UI for Clean Kangaroo (a laundry delivery service app).

I started by sketching the key screens that would form the basis for the wireframes and mock-ups. 

Since this was my first time using Figma, I decided to create a set of low-fidelity wireframes concurrently. This helped me better visualize my ideas before adding color and other visuals. It also provided me with the opportunity to experiment with the layouts before finalizing them in the mockup process. 

 

Incorporating styles

Clean Kangaroo's brand is clean, fresh and minimalist. I wanted to create a sense of trust and reliability through the color scheme. I chose the following colors for the UI kit. 

 

Finally, I started to create the mock-up screens using the wireframes as the base. The mock-ups are a cleaner version of the lo-fi wireframes. 

 

Reflections:

My goal with this project was to learn Figma, but I took away so much more than that. I understood several key UX/UI design theories and got to apply them in practice. 

I particularly appreciated the modules on incorporating plug-ins and creating components /instances. Together, these made my workflow efficient and streamlined. 

It was really challenging for me to select styles and colors. In hindsight, I think I would have obtained better results following Nima's selections. In the future, selecting styles with a higher saturation may work better. 

It was a lot of fun to work on this project, since this is my first ever mobile-app design. Thank you, Nima - I really appreciate your effort in creating this wonderful course!