GDE740: Week 3 – Prototyping Guidelines

In this week, I aim to make sense of the mood-board practice conducted for the project. In that exercise, I determined an aesthetic look, based on cultural markers to give it a unique and meaningful identity. What I would like to achieve is a toolkit for community leaders to have everything at their fingertips, without turning to blindly mimic other groups or use Canva preset templates for their banners and logos.

When building an online community, there are a few essentials to consider.

  • What are the community’s purpose and goals?
  • Who are the community’s key stakeholders?
  • Which platform best suits the community’s needs?
  • How will the community be structured?

(Sullivan, 2021)

To recap the research from Week 1, the purpose of this community is to provide Arab women in the diaspora a virtual safe space in their specific geographical location. It is intended for all Arab women (including trans and intersex women) and non-binary people, and multilingualism is a highly encouraging feature, so as to not alienate any non-Arabic speaking Arabs in any community.

Key Stakeholders

This is a list of acting members of each community, that is to be predetermined before launch. In this particular project, community managers are an essential key stakeholder. They are responsible for approving new users, monitoring discussions, mediating confrontations, and making sure that members have what they need to participate in the community. (Sullivan, 2021)

Choosing a Platform

The nature of this project is that it is a globally produced template that can be localized as needed. There is no one correct platform that needs to be used, but there are elements of pre-existing platform options that can be considered, such as the ability to create sub-groups if needed, multimedia tools or sharing options, organizational tools, notification features, etc.

Structuring the Community

A well-organized and functional community is usually pre-planned and maintained in a way that encourages productive and positive interaction between members. Assessing whether the community should be public or private, or setting a precedent on the type of conversations that can potentially be had within the community is a great start. In this guide, because of the nature of the group, it is preferred to be a private and gated community for the safety and security of its members.

Visual Identity and Elements

The final part of the toolkit introduces visual guidelines for a variety of platforms, that will allow the groups to stand out as part of a well-structured global community that has been rigorously planned and established to be a safe and nurturing environment. To reanalyze the visual concept, it is built on a sense of nostalgia for the great Arab divas of the early 1900s, whose identities were an essential part of the feminist discourse at the time. Following in their footsteps, the overall look and feels aims to stay away from feminine coded aesthetics, which may alienate individuals of the larger community who do not particularly subscribe to gender-normative expression. Its base concept strives to be inclusive while paying homage to our collective Pan-Arab memories.

How will this Toolkit look like?

This was probably a question intended for week 2 if I were truly going to follow the briefs set out for us. Logically, for the progression of my project, this would have boxed me in before I determined its contents. Delaying that process until this week would potentially allow me to explore some interesting solutions, or so I hope.

When I think of the word “Toolkit”, I’m not sure if I can visually imagine anything. Perhaps there is too much of an emphasis of its contents but little to do with its user experience or interface. But speaking of UX and UI, the instructional manual immediately comes to mind, and the most famous one being Ikea’s. Despite how iconic they are, they certainly were not pioneers in the creation of this medium. In the late 17th century, the printer Joseph Moxon published Mechanick Exercises, the first guide to printing in any language. There were many printed how-to’s on every day topic, but Moxon’s manual instructed users with a DIY tone and suggested that readers could pick up a new trade, in their spare time. (Svenvold, 2019)

Keeping that essence of the DIY alive, I want to bring it into the digital sphere, adding elements of interactivity. Let’s look at a list of possibilities with an online manual:

  • Login protected; this allows for any potential leader to be screened before being given access to the guide and its accompanying materials.
  • Easy to navigate; rather than providing a dry, boring-to-read instructional manual spread across numerous pages, a fun and interactive landing page could entice users to fully explore all contents.
  • Easy to update; the contents of the manual as well as accompanying visual materials can be easily updated in an online setting, ensuring that users have access to the most up-to-date materials available.

Let’s start designing!

This is not related to the design of the manual, but rather the name of the communities. I have changed my mind about the original name “Arabiyat al Shataat” and replaced it with “Fataat al Shataat”, a friendlier alternative that still sounds fun.

It was important for me to figure out how the website’s basic structure could function, but also how I would potentially organize the layout on each page.

Using Figma, I started constructing a website proto-type for this digital toolkit using the sketches above.

This digital tool kit is meant to be operated from behind a security blanket in the form of a registration/login portal. This is intended for the safety of communities, as well as for the privacy of the content offered within this kit.

The pages which include text also offer a feature for copying it into a clickboard to make it easy to transfer over into your own community page or group (like Reddit or Facebook)

Prototyping in Figma really helped me figure out what some potential readability and accessibility flaws in my original design idea might be, like low contrast text due to a too-bright background. I was able to easily make those changes in Illustrator and import them back into Figma.

The final outcome for this week is a mini demo of three sections within the website, illustrated through this screen recording here:


For a more detailed view of the prototype, here is a PDF of each page thus far:

Reference list

Dabrowska, K. (2018). Arab women artists in diaspora focus on identity and loss | Karen Dabrowska. [online] AW. Available at: [Accessed 14 Oct. 2021].

Sullivan, E. (2021). An Essential Guide to Building an Online Community. [online] Available at: [Accessed 17 Oct. 2021].

Svenvold, M. (2019). The Disappearance Of The Instruction Manual. [online] Popular Science. Available at: [Accessed 17 Oct. 2021].

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s