The next step in the design process for building the app Pennington Community is the prototyping stage. Prototyping is where you build out mockups and test out your design ideas for the layout and functionality of the app or product. This stage is crucial to the design process and is often repeated and experimented with to refine and update ideas. 

“Regardless of whether you have researched thoroughly and gathered a large body of information, or whether your ideation sessions have resulted in what many perceive as a world-changing solution, testing is still crucial for success.”

Source

It is important not to become fixated or focused on only one idea, ignoring other and possibly better solutions. Prototyping forces you to face each design choice with the actual practicality and usability of it.

Key elements

When prototyping, there are some important things to be aware of, including building with the user at the top of mind, keeping icons and text to scale, and also the functionality. 

Usability & Functionality

An app is often used in one hand of this user. This limits the range of motion for where is most accessible for the user to touch. This diagram above shows an example of this, and it is key to keep important functions in the green area. The yellow sections become a bit hard for the user to use and the red sections are very difficult for the user, so you should limit content in those sections as much as possible. 

Screen Scale

Additionally, when keeping scale in mind, it is important to make sure everything is readable, but not taking up too much room to the point where you are wasting space. Scale is also paramount when designing the menu bar. Too many icons can crowd it making it hard for the user to click. Five should be the maximum number of main pages you keep in this bar. 

Types of Prototyping

Prototyping is not a one-and-done process and there are actually different categories of prototyping that can be done and built upon. To start, there are low-fidelity prototypes. For this, wireframes are created for each app page, but at low quality. These can be done with pen and paper or on a design program, but are very basic, prioritizing layout and functionality while fleshing out ideas. These wireframes include key, but minimal words and typically lack color or images. Next, there are mid-fidelity prototypes. This is typically a more detailed wireframe, including all text, as well as some color and images. Lastly, there are high-fidelity prototypes. These are fully fleshed-out app pages with full detail in text and color. High-fidelity prototypes often link pages for the ability to actually act out the actions of the user. 

Paper Prototypes

This past week, I focused on my first batch of prototypes for Pennington Community. These were low-fidelity paper prototypes that mapped out the app. 

App IA

Prototype examples

Here are some of the pages I made for this app. I started out by designing 22 pages for my app, but as I revise and continue to prototype, this number will probably grow. To learn more, take a look here!

Sources:

Dam, Rikke Friis, and Teo Yu Siang. “Design Thinking: Get Started with Prototyping.” The Interaction Design Foundation, https://www.interaction-design.org/literature/article/design-thinking-get-started-with-prototyping#:~:text=A%20prototype%20is%20a%20simple,or%20possible%20changes%20in%20direction.

Shuhalii, Avrora. “What Is the Difference between Low and High Fidelity Prototypes?” Medium, Bootcamp, 15 Oct. 2020, https://bootcamp.uxdesign.cc/what-is-the-difference-between-low-and-high-fidelity-prototypes-b1f3612f85f7.