Merge pull request #16 from osoc24/10-handover-define-project-goal-au…

…dience

Branding & Audience section

.vitepress/config.mts

@@ -3,8 +3,8 @@ import { defineConfig } from 'vitepress'
 const projectSidebar = {
   text: "Project", items: [
     {
-      text: 'Goal',
-      link: '/project/goal'
+      text: 'Branding',
+      link: '/project/brand'
     },
     {
       text: 'Audience',
@@ -66,19 +66,9 @@ export default defineConfig({
     },
     nav: [
       { text: 'Home', link: '/' },
+      { text: 'Introduction', link: "/getting-started" },
       {
-        text: 'Project', items: [
-          { text: 'Why?', link: "/project/goal" },
-          { text: 'For whom?', link: "/project/audience" },
-        ]
-      },
-      {
-        text: 'Loama', items: [
-          { text: 'Design', link: '/loama/design.md' },
-          { text: 'Development', link: '/loama/development' },
-          { text: "Feedback", link: "/loama/feedback" }
-        ]
-      },
+        text: 'Loama', link: "/loama/index.md"},
       {
         text: "Mock Apps", items: [
           { text: "MockBook", link: "/toco/mockbook/index" },
@@ -89,7 +79,10 @@ export default defineConfig({
 
     sidebar: {
       "/": [
-        { text: "Home", link: "/" },
+        {
+          text: "Getting Started",
+          link: "/getting-started"
+        },
         {
           text: "Lexicon",
           link: "/lexicon"
@@ -109,6 +102,14 @@ export default defineConfig({
         { text: "Team", link: "/team" },
       ],
       '/project': [
+        {
+          text: "Getting Started",
+          link: "/getting-started"
+        },
+        {
+          text: "Lexicon",
+          link: "/lexicon"
+        },
         projectSidebar,
         {
           ...loamaSidebar,
@@ -117,9 +118,18 @@ export default defineConfig({
         {
           ...mockAppSidebar,
           collapsed: true
-        }
+        },
+        { text: "Team", link: "/team" },
       ],
       '/loama': [
+        {
+          text: "Getting Started",
+          link: "/getting-started"
+        },
+        {
+          text: "Lexicon",
+          link: "/lexicon"
+        },
         {
           ...projectSidebar,
           collapsed: true
@@ -128,9 +138,18 @@ export default defineConfig({
         {
           ...mockAppSidebar,
           collapsed: true
-        }
+        },
+        { text: "Team", link: "/team" },
       ],
       '/toco': [
+        {
+          text: "Getting Started",
+          link: "/getting-started"
+        },
+        {
+          text: "Lexicon",
+          link: "/lexicon"
+        },
         {
           ...projectSidebar,
           collapsed: true
@@ -139,7 +158,8 @@ export default defineConfig({
           ...loamaSidebar,
           collapsed: true
         },
-        mockAppSidebar
+        mockAppSidebar,
+        { text: "Team", link: "/team" },
       ]
     },
   }

getting-started.md

@@ -23,8 +23,6 @@ The LOAMA project was born out of 3 goals:
 2. **Envision a privacy-focused way to request permission**: Applications can use Solid pods, which allow users to bring and manage their own data, but how would an application request those permissions in a clear and privacy-first way?
 3. **Make Solid and its benefits more clear**: Solid allows for control of your data, but that control also brings a lot of complexity for users. LOAMA tries to make this more understandable by providing a revised [Lexicon](/lexicon) and creating an interface that is focused on ease of use.
 
-[**Read more here :arrow_right:**](/project/goal.md)
-
 ## Research
 
 In order to understand our users and how they would interact with our project, we spent time defining our target audience and creating a fitting theme by taking inspiration from the [Solid Project](https://solidproject.org).

project/audience.md

@@ -0,0 +1,54 @@
+---
+title: For whom?
+next:
+    link: /loama/index
+    text: 'Loama'
+---
+# For whom?
+
+The LOAMA project is created for users with a technological background, but we've focused on several factors while designing the application:
+- **Ease of use**: LOAMA was designed with ease of use in mind by reducing & simplifying the steps that need to be taken to assign permissions. 
+- **Accessibiliy**: To make LOAMA as accessible as possible, we omitted using technical terms to describe functions. Instead, by using a combination of icons, simple sentences and colours, we indicate the status of files and divert the attention of the user.
+
+By using the information gained during the [brand creation](/project/brand.md), we made a persona to guide us during the design process of [Loama](/loama/index.md):
+
+## Jermery
+
+### Basic info
+- **Age**: 24 years
+- **City**: Brussels
+- **Occupation**: Tech journalist at Data News
+- **Gender**: Male
+- **Education**: Bachelor in Journalism
+
+### Pains & Problems
+> What are the problems the user encounters?
+#### LOAMA
+- I can't see what permissions are configured for the files in my pod
+- I don't see who can access my files and which permissions they have
+- What do the permissions actually mean within my Solid Pod?
+- Why should I use Solid over other technologies or just letting a company have my data?
+
+#### Solid-enabled apps
+- What effects do the permissions have that the application is requesting?
+- How do I specify which data an application may use?
+
+### Needs
+> What does the users want to do within the app?
+#### LOAMA
+- I want to see what data a person, company or application can access
+- I want to see when my data was accessed
+- I want to revoke or allow acess to my data
+- I want to understand what the permissions mean and the effect of allowing them
+
+#### Solid-enabled apps
+- I want to use my data in my Solid pod across different platforms
+- I want to sign on using my Solid pod and allow the application to use my data
+
+### Motivation
+> Why does a user wants the things he wants?
+
+- I want to be in control of my own data
+- I want to share the same data across platforms
+- I want to easily revoke access to sensitive information
+- I want to manage my permissions in a centralized application, not across different platforms

project/brand.md

@@ -0,0 +1,35 @@
+---
+title: Branding
+---
+# Branding
+
+For the project, we made an appropriate branding that is based on the [SOLID logo](https://solidproject.org). We did this by using several branding techniques commonly used to create a brand from scratch.
+
+## 1. Personifying the product
+To differentiate our brand from Solid, we tried personifying our product by asking some thought-provoking questions:
+- If our product was a person, what would they wear to a party, how would they act at the party and what would be their favorite music?
+- If we had to associate our product with a season, which would it be?
+
+## 2. Term association
+In order to find out which things or terms we associated with our product, we created a mindmap with terms that are related to our project and objects we associate with those terms.
+
+![LOAMA Mindmap](../images/loama-mindmap.png)
+
+This gave us more insight into what we could use as a basis for naming our product. 
+
+## 3. Name
+The name LOAMA is an acrynom:
+> **L**inked **O**pen **A**ccess **M**anagement **A**pp 
+
+It's a technical way to describe our project, but the acronym *(Loama)* was an unexpected inspiration for our project's identity, as it became a basis for which we build our brand, crest and color palette.
+
+![Loama Crest](/loama-logo.svg)
+
+## 4. Typography & Color Usage
+During the design process, we researched and defined a typography & color palette in order to have a consistent look & feel through the project. These elements were re-used within the design prototype, presentations, live demos and documentation.
+
+![Color Palette LOAMA](../images/color-palette.png)
+
+For our font, we've decided to use a monospace font *([Jetbrains Mono](https://www.jetbrains.com/lp/mono/))* for headers, wordmark or highlighted text. This allows us to emit a technological feeling and worked great in creating a contrast with our sans-serif font.
+
+Our standard / sans-serif font of choice is the [Raleyway font](https://www.theleagueofmoveabletype.com/raleway), as it already has a usage: It's the main font style of the Solid project. Because of this, our project has a strong correlation to Solid, but can differentiate itself by using the mono font.