.png){kind=small}
back
Paper Prototype
Paper prototyping is the process of creating hand-drawn screens that represent a digital product. Though a paper prototype cannot fully replicate the details of the final product, it is a highly efficient and low-cost way to record our ideas down with pencil and paper and map out our user flows. A paper prototype gives us the ability to put ourselves in the shoes of our audience and imagine how our product can help them achieve their end goal.
We focused on three key pathways critical to our design solution:
​
Task 1: Events Filter
For this task, users utilize the filter function to filter for events that might interest them more.
Task 2: User Engagement with Events
For this task, users are to interact with the events by saving them for future reference and showing interest by marking their attendance status (“Going/Not going”).
​
Task 3: User Engagement with Community
For this task, users are to engage with already posted events and add personal comments that help them connect deeper with the community.
Evaluation Findings
Using the paper prototypes we developed, we tested three potential users. This process helped us evaluate and reflect on our current design and user experience. We tested the users on three relevant tasks: saving events, selecting events to attend, and checking the details through the Calendar page using the filter function. It was observed how their thought process was throughout the whole testing process--whether or not there were areas that arose confusion or features that they liked. The observations from the evaluations were critical to helping improve upon our prototyped design.
User demographics
The users were between the ages of 20 and 24, all of which either in college or had recently graduated from their college careers. All participants have a relatively high skill level in technology and are fluent in navigating social media.
Information
architecture
While our lo-fi prototype helped visualize the user flow of three key pathways, it was critical to understand how our design would flow fully. The process of creating an Information Architecture aided in our brainstorming of what specific features our users might want and how we might organize this information for them. While we were brainstorming for features, our information architecture is an organization of clickable links that serve as a map around our platform. With the aid of information architecture, our ideas of how our platform might flow become much more apparent. It’s a crucial step needed to take before moving onward with adding more detail to our design.
The creation of this information architecture was through Figma.
Annotated wireframes
Our paper prototype was created as a barebone that served as a guide for future iterations that would eventually turn into our high-fidelity mock-up. It also served as an opportunity for user research where observations and feedback from it were all taken into account to create our annotated wireframes.
Our annotated wireframes overview our entire system and give context to how we are creating our solution, with each feature given a description. Three visual interface state transition diagrams are provided at the end of our document. All frames were created through Figma.
High-fidelity Mock-up
After finalizing our design flow, we focused on the most essential features of our design solution and translated them into our final high-fidelity mock-up. The design decisions for our high-fidelity prototype were informed by a deep understanding of what our users want, need, and could benefit from. They are all based off of our previous user interviews and the feedback received. Ease of access and interaction between users, the community, as well as the platform are parts of our main focus in accomplishing user goals of reconnecting them with their lost communities.
Some concerns addressed were also creating a style that would give off a friendly and welcoming vibe for our intended users, which could also intrigue them into downloading our application, thus the use of a brighter pastel palette as well as easy to read fonts and a rounder type for headlines. The importance of a high-fidelity prototype is putting together all the work that was completed throughout the quarter, including brainstorming, feedback, iterations, into one concise and complete idea. It is added with a whole nother level of detail that was not accomplished in previous design tasks.
This hi-fi mockup is a functional prototype where people could get a first glance of what is to come in platform.
