Ideation

I started off by sketching any and all ideas that I had for a sign up flow and then refined them down to one basic idea for a deep dive.

Iteration 1

I first started by exploring different ways to initiate a sign up flow. I first thought about exploring it from a navigation bar view, a dedicated sign up/log in page, or a sign up stepper.

Iteration 2

After looking at the three designs for Iteration 1, I decided to go with a dedicated sign up workflow that is not cluttered by other elements like footers or navigation bars. This would help funnel the users through the sign up flow better without distractions and could provide ample opportunity to expand into a more comprehensive onboarding experience.

Annotated Wireframes

Once I had some basic screens that I was satisfied with, I wanted to flesh out my idea more by annotating the wireframes to think through the interactions and limitations in implementing the design. Incorporating some feedback that I received when guerilla testing the designs, I decided to title each of the pages from the point of view of the succulents thus positioning the succulent as the owner’s pet.

High Fidelity Mockups

Once I was satisfied that I had thoroughly thought through the sign up flow, I decided to make high fidelity mockups of the screens. With many succulent owners loving things cute and crafty, I decided to go for a hand-drawn look that was achieved by thick outlines and slightly offset fills. To match these illustrations, I also made the ‘Social Succulents’ sign up/log in landing screen follow the same look and feel. For the header fonts, I felt that Amatic SC fit the look perfectly. After matching the inputs and buttons to the style of the application, the mockups were complete. I decided to go for large button, label, and input text to increase the accessibility of the design.