Wishli

After establishing the flow, my next step was to put together some low-fidelity screens. This step was a valuable in the design process because it allowed for quick iterations and kept my focus on layout and user experience rather than stepping into type and color before I had a solid blue-print.

Across various iterations I was able to see how placement and expression of certain elements would lend itself to better usability. For example, deciding between a large button across the bottom-center of a screen, or a small button at the top right of the screen. Best practices show that users prefer to tap buttons with their thumb, and their reach is best near the bottom of the screen.

Focus State: When a form field is in a focus state, the background is filled in with a light blue and a blue stroke is applied. The user can also tell that they are inputting date into a form field because a keyboard pops up and a cursor appears.

Error State: When an error state in a form field is necessary, the background becomes a light red with a red stroke around the border. An icon appears to the right of the field with an exclamation point and an error message under the field reads “Something’s not right”. The “continue button” remains disabled until the error is fixed.

Success State: Used when the users passwords match, a balck checkbox icon appears on the right edge of the form field and the main CTA “Sign Up” button transforms from an inactive state to a default state.

Creating experiences with accessibility at the forefront of design decisions is one of the best ways a designer can empathize with their users. From error states, type size, to primary and secondary colors, accessibility played a key role in my decision making process.

When it came to designing an error state it was clear that there were additional measures to be taken rather than solely relying on the color red. Below are a few variations of what users with different types of color vision would see when experiencing an error state.

For users with typical color vision, the red background and red stroke would be a sufficient indication that an error has occurred. For individuals with varying types of color vision or color blindness, that message could get lost without additional indicators.

Using a Figma plugin called “Color Blind,” I was able to actually see what users who had various types of color vision would see and it helped my decision making with how to make the error state more obvious without solely rely on color to communicate that message.

I added two clarifying measures: an error icon on the right side of the form field with an exclamation mark - a clear indicator that something is happening – and a short error message beneath the form field. Users who had no color vision would understand that an error needed to be fixed before progressing further through the signup flow.

When a user wants to create a new wish list, a modal appears for them to complete the task. I felt that a modal approach would be a better approach for completing a task rather than redirecting the user to a new page.

I chose to go the modality route because it gives the user context to where they just were, since they can still see parts of the previous screen behind the modal, but also interrupts an expected flow to capture their attention and encourage them to complete the task. Keeping the context of the action in view would help prevent confusion and frustration as to what the user is trying to accomplish.

In addition to preserving context, the modal utilizes labels above the form fields so they will always be in view. This design decision reduces the chance for the user to forget what type of information they were about to input.

Inspired by Pinterest, I wanted to make the wishlist experience extremely visually appealing by utilizing lots of imagery and rounded corners to give a friendly feeling.

By pasting the url to the wishlist item and scraping the image from a 3rd party site, the user is saved the hassle of uploading an image. Having images for each item on the list is much more engaging than simply using text.

I also recognize the importance for gift-buyers to see the the price of each item right up front and made it highly visible to allow users to quickly scan a wish list and choose a gift within their price range. This prevents frustration from users having to individual click on each item and dig for a price.