a platform designed to connect artists and galleries
PROTOTYPES
Paper Prototype
We decided to make our paper prototype focus on three tasks: creating a profile and finding an artist, creating an event, and editing a profile to add a new collaboration. After creating our information architecture map, we decided that these would be three central tasks to the app. We created this so we can have a basic design that can be used for usability testing and see our design come to life.
takeaways:
-
Didn’t take a lot of time, easy to fix, not permanent
-
Used for usability testing
-
Able to see our design ideas come to life for the first time
-
Quick way to physically visualize the information architecture
Evaluation
From the usability tests we conducted without paper prototypes, we learned about what works with our app and what doesn’t. For example, users found our “tinder for artists” feature to be confusing. They still liked the idea of personalization, so we had to find a different way to implement it. Through the various feedback we received, we were able to change our design and create our low fidelity wireframes.
takeaways:
-
Usability testing allows us to see what works and what doesn’t
-
Ideas that we have that may seem intuitive to us may not work for the user
-
Usability testing allowed us to put the users needs first
Annotated Wireframes
From the suggestions that we received from the user testing feedback, we were able to implement different features as well as improve various concepts within our product that would best benefit our target user group and their desires. From that, we were able to bring our paper prototype and site map to life, creating our low-fidelity wireframes. The wireframes served as an outline of the entire application and its elements in which the users would interact with. While creating the wireframes, we annotated each screen with a description of each interaction that the user can access. After completing this step and receiving necessary feedback, we were then ready to create our high fidelity mockups.
takeaways:
-
Figma is a great tool to create outlines and get an idea of how the product can look like.
-
Feedback/critiques during this stage are extremely helpful when debating on how to bring wireframes to life.
-
The users liked the changes we made from the paper prototypes, including moving the plus sign to the top right corner
-
Users enjoyed the ability to "preview" posts on the application before publishing
High Fidelity Prototypes
Utilizing the feedback and critiques from our peers and potential users, we were able to bring our wireframes to life. Having the wireframes as reference, we created high-fidelity mockups that represented what the users would see while interacting with the product. From group collaboration and brainstorming, we curated visually appealing designs and simple concepts that was consistently represented throughout the application.
takeaways:
-
Placement of icons can be essential when it comes to the user’s interaction with a product.
-
Less is more.
-
Figma is a great tool when designing products and bringing outlines to life.
-
Creating the wireframes with integrity makes creating the Hi-Fi mockups that much simpler.