Recently I worked on re-designing a form to add a credit card on a mobile app. The idea for the design was that it needs to be for mobile devices for a sporting goods store.

Process

Initially, I had designed the cart and form pages. I went back and designed screens that would include the whole checkout process. It helps to put ideas on paper quickly see what can and can’t work while refining the design.

In Sketch, I started laying out the wireframes for each screen. Using the sketch as guide, it made this process much easier to work.

After finishing the wireframes, I created a color palette to use for styling. I wanted to keep the look consistent throughout. Using the logo as inspiration, I kept the palette to three colors.

Finally, with a solid foundation in place, it was time to add some colors and styling. Keeping the design simple, clean, consistent, and representative of the brand. Like all iterative processes, some adjustments were made from the first wireframes to the final versions.