My first UX task at Planning Center was to redesign a few modals for the Registrations product. The challenge was not necessarily to produce a departure from the original but to preserve the feel of the existing design.
The design tool of choice, in this case, was Figma. Figma sets itself apart from similar software, most notably Sketch, through its cloud-based features that facilitate collaboration. These collaborative tools came in handy when it was time to receive feedback on my designs, as adding/reviewing comments was easy and intuitive. To get me started, Shane Armitage, Planning Center’s Design Manager, was kind enough to give me a quick tutorial on Figma. I also worked through the tutorials on Figma’s site - here’s a link.
The modal redesign roadmap was somewhat as follows: construct wireframes, construct comps, and implement the final design in HTML (and React, in some cases).
After I worked through Figma’s tutorials, I started building the wireframes. I had to keep in mind that as wireframes, my initial designs were not meant to include much styling. Thankfully, Will dos Santos, illustrator and designer at Planning Center, helped keep me on course.
Once the wireframes were complete, I began to flesh out the comps - being mindful of my use of colors.
After the final designs were approved, it was time to implement.