Blocbox Case Study: Intro to High-Fidelity Wireframes

In this checkpoint, I learned how to create high-fidelity wireframes using Adobe Illustrator to specify the exact size and placement of elements throughout various pages of Blocbox.


Sign Up

Sign In

The assignment for this checkpoint required coming up with notifications in case a user enters the incorrect e-mail information or password. Based on good practices and patterns that I researched online, I chose to create separate feedback notifications for each entry field.

Finding out that you entered the wrong email information or password is already a negative experience. I try to keep that experience from feeling worse by avoiding the use of negative words like “fail” or “error” in the feedback messages.

Reset Password

Dashboard — New User — Adding New Items

A new user with a blank dashboard has the option of adding items for the first time with an add button in the center of the dashboard. There is also an add button in the top right corner of the dashboard as another option.

Dashboard — Returning User — Adding New Items

A returning user is able to add items with an add button in the top right corner of the dashboard.

Dashboard — Returning User — Account Settings

The gear icon in the bottom left corner of the dashboard was intended to give the user access to their “account settings” page. However, user testing reveals that this is not a good location for an account settings button, which I’ll cover in a later post.

Account Settings — Upgrade

The next two wireframes show what the account settings page looks like if a user wants to upgrade their service from “Free” to “Professional.”

Final thoughts

Adobe Illustrator is just one of the many tools to create wireframes. Prototyping tools such as Sketch, Photoshop, and the recently released Adobe XD can also be used to specify the size and placement of elements. From what I understand, deciding when to use certain tools and the level of fidelity of designs will depend on balancing numerous factors such as: the methods and processes used by your team, company requirements, client requirements, timelines, etc.

Show your support

Clapping shows how much you appreciated Neil Ranada’s story.