Redesigning Simple Forms on EstateSales.NET

As EstateSales.NET, we are converting from a custom style guide to the Material Design style guide. So my team and I were challenged to create a plan to create an easy, cohesive pattern for all of the simple forms on our website.

Audit:

First, we gathered screenshots of all of the current form pages on EstateSales.NET. Then we split them into “simple” forms and “complex” forms. We defined a “simple” form as one that was made up of only text inputs, and a “complex” form included other elements such as radio buttons. We chose to tackle the simple forms first, and then build on our work for complex forms. That way, we could push out the simple forms faster and begin collecting user data.

Inspiration:

After we got all of the pages in one place, we began searching for inspiration on various design websites to get an idea of how we wanted our pages to feel. Since simple forms included pages like “sign in” and “sign up,” we wanted to focus on our pages looking simple, inviting, and delightful.

We decided as a team to lean on my skills as an illustrator and create a pattern that included space on each page for a fun image in order to maintain a sense of comfort and delight in our users. Each page would get a custom illustration that reflected the purpose of the page, which we thought would help assure users that they were in the right place in their user journeys. I’ll talk more about the illustrations later.

Master Form:

At this point, we met with the developers to get feedback on our ideas and we came up with the idea to create one “master form” component that included all of the inputs on every form we were working on. That way, they could save time by using the exact same component on every page and simply hiding the fields that were irrelevant to that particular form. I took lead on that element, and this is the form I gave them:

Roughs:

Because of the simplicity of these pages and the tight deadline we were facing, we chose to skip right to a high fidelity mock for our rough drafts. These definitely felt like they were heading in the right direction, but we made some key changes from the feedback we got at this stage. Namely, we put everything on one card (as opposed to 3) and chose to layer the illustration under the form card using Material Design’s elevation principles. This way, the form would be much more adaptable to any screen size. Since over 60% of our website traffic is mobile, that is a key concern for us.

Illustrations:

Here, I took a step away from the product design process to focus on creating the Illustrations that would appear on every new form. After some brainstorming with my team. We decided that we wanted illustrations that would be easily repeatable due to the nature of our layered cards. I chose icons that represented what the goal of the form is and created these custom patterns that were intended to be reminiscent of late 60s-early 70s textile patterns. Since our product is primarily for people who enjoy second-hand shopping, we thought this would inspire the delight we were hoping for.

Final Designs:

Here are some examples of the final forms we ended up creating. So far, the user feedback has been overwhelmingly positive.