Project 3: Convergent Design

Functional Design

Concepts

Concept User
Purpose Authenticate users
Principle After user registers with a username and password, they can authenticate as that user by logging in with that same username and password: register(n, p, u); authenticate(n, p, u') {u' = u}

State

registered: set User
username, password: registered -> one String

registered: set User
username, password: registered -> one String

Actions

register (n: String, p: String, u: User)
  u not in registered
  registered += u
  u.username := n
  u.password := p

authenticate (n: String, p: String, out u: User)
  u in registered
  u.username = n & u.password = p

register (n: String, p: String, u: User)
  u not in registered
  registered += u
  u.username := n
  u.password := p

authenticate (n: String, p: String, out u: User)
  u in registered
  u.username = n & u.password = p

Concept Card<User>
Purpose Capture an idea in a concise way
Principle After a user creates a card using create, the card is added to the collection of cards by that user. create(c, u); getCards(u, cards) {c in cards}

State

cards: set Card
owner: one Card -> one User

cards: set Card
owner: one Card -> one User

Actions

create(c: Card, u:User)
  cards += c
  c.owner := u

getCards(u:User, out cards: set Card)
  cards := {c for c in cards if c.owner == u}

delete(c: Card)
  cards -= c

create(c: Card, u:User)
  cards += c
  c.owner := u

getCards(u:User, out cards: set Card)
  cards := {c for c in cards if c.owner == u}

delete(c: Card)
  cards -= c

Concept MindMap<IdeaBlock>
Purpose Organize and visualize ideas in a hierarchical and interconnected manner
Principle An IdeaBlock can be added/removed to a mindmap using add/remove operations. IdeaBlock can be connected to other ideablocks using lines or arrows using connect and disconnected using disconnect.

State

ideas: MindMap lone -> Set IdeaBlock
connections: IdeaBlock lone -> set IdeaBlock

ideas: MindMap lone -> Set IdeaBlock
connections: IdeaBlock lone -> set IdeaBlock

Actions

add(m: MindMap, i: IdeaBlock)
  m.ideas += i

remove(i: IdeaBlock)
  m.ideas -= i

connect(a: IdeaBlock, b: IdeaBlock)
  a.connections += b

disconnect(a: IdeaBlock, b: IdeaBlock)
    a.connections -= b

updateTo(m: MindMap, newM: MindMap)
    m := newM

add(m: MindMap, i: IdeaBlock)
  m.ideas += i

remove(i: IdeaBlock)
  m.ideas -= i

connect(a: IdeaBlock, b: IdeaBlock)
  a.connections += b

disconnect(a: IdeaBlock, b: IdeaBlock)
    a.connections -= b

updateTo(m: MindMap, newM: MindMap)
    m := newM

Concept Autosuggestion <Project, Resource>
Purpose Enhance speed and efficieny by providing intelligent suggestions and autocompletions, minimizing repetitive tasks
Principle If a resource is added or removed from the pool of available resources using the add or remove operation, the system suggest potential project transition based on available unused resources. The suggestion can be accepted, in which case there is a transition to a new project version, and they can be rejected in which everything stays the same.

State

resources: set Resource
usedResource: Project lone -> set Resource

resources: set Resource
usedResource: Project lone -> set Resource

Actions

add(p: Project, r: Resource, out s: AutoSuggestion)
  p.current += r
  unused = {r for r in resources if r not in p.usedResource}
  s := LLM(p, unused)

remove(p: Project, r: Resource, out s: AutoSuggestion)
  p.current -= r
  unused = {r for r in resources if r not in p.usedResource}
  s := LLM(p, unused)

accept(s: AutoSuggestion, out newP: Project)
  newP := s

add(p: Project, r: Resource, out s: AutoSuggestion)
  p.current += r
  unused = {r for r in resources if r not in p.usedResource}
  s := LLM(p, unused)

remove(p: Project, r: Resource, out s: AutoSuggestion)
  p.current -= r
  unused = {r for r in resources if r not in p.usedResource}
  s := LLM(p, unused)

accept(s: AutoSuggestion, out newP: Project)
  newP := s

Concept Discussion<User, Item>
Purpose enable users to have conversations and discussions related to specific items
Principle A discussion can be created using the create operation, and users can be added to the discussion using the add operation. Within the discussion, users can send messages using the send operation. In these messages, users have the ability to reference specific items.

State

discussions: set Discussion
messages: discussions -> set String | set Item
participants: discussions -> set User

discussions: set Discussion
messages: discussions -> set String | set Item
participants: discussions -> set User

Actions

create(d: Discussion, u: User)
  discussions += d
  d.participants += u

add(d: Discussion, u: User)
  d.participants += u

send(d: Discussion, message: String | Tag)
  d.messages += message

create(d: Discussion, u: User)
  discussions += d
  d.participants += u

add(d: Discussion, u: User)
  d.participants += u

send(d: Discussion, message: String | Tag)
  d.messages += message

Concept Share<User, Item>
Purpose facilitate sharing of items and enable collaboration among users
Principle After creating an item, users can invite other users to contribute to the item using the invite operation. The user invited to the item can view and modify the item.
State
```
sharedTo: Item lone -> set User
```
```
sharedTo: Item lone -> set User
```
Actions
```
invite(i: Item, u: User)
  i.sharedTo += u
```
```
invite(i: Item, u: User)
  i.sharedTo += u
```

Synchronizations

app
include User
include Card<User.User>
include MindMap<Card.Card>
include AutoSuggestion<MindMap.MindMap, Card.Card>
include Discussion<User.User, MindMap.IdeaCard | MindMap.Connection>
include Share<User.User, MindMap.MindMap>
include Share<User.User, Card.Card>

// when a mindmap is shared to a user
// all idea cards within the mindmap is shared
// and the user is added to a discussion
sync shareMindMap(m: MindMap, u: User)
when Share.invite(m, u)
Share.invite(m.ideas, u)
Discussion.add(d, u)

// when user accepts an auto suggestion
// the mind map is updated to a new version
sync acceptAutoSuggestion()
when newM = AutoSuggestion.accept()
MindMap.updateTo(m, newM)

// when deleting a card
// user has an option to remove it from associated mindmaps
sync deleteCompletely(c: Card)
when Card.delete(c)
MindMap.remove(c)
for b in MindMap.connections[c]:
MindMap.disconnect(c, b)

app
include User
include Card<User.User>
include MindMap<Card.Card>
include AutoSuggestion<MindMap.MindMap, Card.Card>
include Discussion<User.User, MindMap.IdeaCard | MindMap.Connection>
include Share<User.User, MindMap.MindMap>
include Share<User.User, Card.Card>

// when a mindmap is shared to a user
// all idea cards within the mindmap is shared
// and the user is added to a discussion
sync shareMindMap(m: MindMap, u: User)
when Share.invite(m, u)
Share.invite(m.ideas, u)
Discussion.add(d, u)

// when user accepts an auto suggestion
// the mind map is updated to a new version
sync acceptAutoSuggestion()
when newM = AutoSuggestion.accept()
MindMap.updateTo(m, newM)

// when deleting a card
// user has an option to remove it from associated mindmaps
sync deleteCompletely(c: Card)
when Card.delete(c)
MindMap.remove(c)
for b in MindMap.connections[c]:
MindMap.disconnect(c, b)

Dependency Diagram

Wireframes

https://www.figma.com/file/adUf9J8uKg508OHXgnk14S/Cre8ors?type=design&node-id=45-2&mode=design&t=lUvMZvaU05ICJ9sw-0

Heuristic Evaluation

I. Usability criteria

Learnability

The interface presented in the wireframes aligns perfectly with the learnability expectations in the usability criteria. For instance, on the first page, "create a shared project," it is highly intuitive that to create a new project, one needs to click on the prominent button-like widget with a plus sign, a practice commonly used in various platforms.
However, an improvement we could make is with the widget we are using to show the option to import an idea card into a project from the idea pool. This can be seen on the “Share idea card into project” page at step 4. The paper with an arrow across is not very intuitive and could confuse the user, and we could replace it with a more conventional icon.

Accessibility

A violation of accessibility standards presents itself in the process of manually adding idea cards to a mind map. Since an idea card has to be clicked then dragged onto the canvas and then dropped at some point on the mind map, as shown on the "Creating mind map board" page at step 2, this process is inaccessible to people with certain physical disabilities.
An improvement we could make is to include both a text-to-speech and speech-to-text or speech-to-action interface to accommodate the different types of disabilities that our users could have.
A tradeoff that we had to consider in this regard that eventually led us not to include these accommodating options is the potential violation of the recognition vs. recall criterion in linguistic level heuristic. The lack of a similar feature in other similar platforms makes it particularly hard for us to gauge both how complex the implementation of the feature would be and, even if that proved unproblematic, how it would be used. With the many challenges that continue to face Natural Language Processing and LLMs in general, users would have to recall the prompts that worked to import an idea card, make an idea card, populate the mind map, and so forth, which is a violation since they should be able to recognize the commands instead, which is not possible with verbal commands.

II. Physical heuristics

Fitt’s Law

The interface adheres well to Fitt's law overall, and especially on the "Create a shared project" page at step 3. The page's icons are located at an intuitive position, i.e. the top right, which is very quickly and easily reachable by most users, and especially right-handed users.
A tradeoff we considered regarding the layout of the interface elements would be to have the icons laid out across the top of the page, making it easy for both right and left handed users to access them. However doing this would impact the pleasantness of the app since the icons would be occupying a key part of the page even when they are not being used.

Gestalt principles

The interface layout again adheres very well to gestalt principles, especially the choice to place the idea cards below the mind-map making canvas. This makes the action of drag-and-drop to be very intuitive since the idea cards are brought up from the bottom and dropped to the top canvas which occupies a wider space on the screen.
A tradeoff we had to consider was the position of the idea cards in the mind-map page, as in the "creating mind map board" page. Having them squished at the bottom would be inconvenient in case there were a lot of idea cards. The other option was to have a vertically split screen interface, however, this would greatly affect the pleasantness of the app since the mind map would be squished to the side.
An improvement nonetheless would be a way to accelerate expert users in the movement of idea cards to the mind map. At the moment, there is an option to expand the idea card panel and reveal all the idea cards, which could be helpful, but a way to make it even easier to see all the cards at once while still having a full screen view of the mind map would be a good innovation.

III. Linguistic level

Speak a user’s language

The interface does a terrific job speaking the user's language. In this case, both the icons and placeholder texts do a very good job of making the app as intuitive as possible. For example, the placeholder text on the mind map canvas, "Add or import an idea card to generate a mind map" helps the user know how to get started.
An improvement we could make, however, is ensure that we don't solely rely on the placeholder text to convey to the user how to use the app. Whereas the idea of dragging and dropping the idea cards onto the canvas seems intuitive to us the developers, it would be a good idea to expose the app to a new user without the aforementioned placeholder text and address any confusion that might arise by using more conceptually intuitive interface other than relying on the displayed message.

Information scent

The interface again does a good job helping the user forage for information, in this case, foraging for idea cards. As seen in the "import idea card into project" page for example, at step two, there is a search bar that allows the author to look for an idea card by its title.
A tradeoff arose when considering how to assign idea cards in the idea pool to specific projects. One idea was to add a tag to the idea card showing which project they are attached to. This would also help the user forage through their idea pool by project. However, we chose to instead add the idea card's identification to the collection of idea card identifications that belong to a specific project. This would eliminate the need to have a tag concept, and would still be providing the user with a way to find idea cards by project, ie, by going to the given project and finding the idea cards therein.

Design Study

(The design study explores a diverse range of visual media. Typographic and color inspiration are well-extracted and communicated.)

Typography Study

Color Study

Project Plan

(Project is well-planned with feasible milestones and fair division of labor. Contingencies are mapped out with alternative courses of action brainstormed

Google Sheet:

https://docs.google.com/spreadsheets/d/1CfSRcton_kb8x9E-yYwcoydK0iAr8gB_zSBtmaqScE8/edit?usp=sharing

Project Milestone:

Milestone 1: Alpha

Create a common GitHub repo, make good branch structure and Pull Request policies
Build the skeleton of the app (frontend + backend)
Implement 2 of 3 concepts below (frontend + backend) 1. Card 2. Mindmap 3. Discussion
Define the styling: color scheme, icons, fonts

Potential Issues:
- The Mindmap concept is our core function and should be implemented first. However, the Mindmap concept may be highly dependent on the Card concept, so it may create a block during actual implementation. As an alternative plan, we can first implement the Discussion concept as a backup.
- The freestyle drag-and-drop function of mindmap cards may be difficult to implement, so we may consider displaying them as a list of cards before we make it boundary-free.

Milestone 2: Beta

Implement full concept design (frontend + backend)
Polish the UX and styling
Inject and test with real-world data

Potential Issues:
- The actual implementation of the Mindmap may require 3rd party libraries, like d3.js. It may take a while to learn and implement.
- Autosuggestion is also a core feature but may require additional engineering and use 3rd party API to work. If we rely on OpenAI APIs, we may need prompt engineering and result filtering to steadily generate useful suggestions. This may require additional time beyond designing the actual web app.
- Time may be tight for implementing the share and discussion concept. We may consider dropping one of the two concepts to match the time constraint.

Milestone 3: User Tests

Analyse user workflow and find design flaws. Record bugs.
Bug fix
Further polish the UX and styling according to the user's feedback
If time permits, we may implement the tutorial function before the user tests

Potential Issues:
- The user may provide opposite opinions of the app design, we may have to extract common suggestions for further polishing of our app
- Without a tutorial, the learning curve of the app might be more steep than expected, requiring additional efforts in user education and engagement.
- Different users may have different habits, and may create obstacles during initial adaptation
- Users may not read English, and they may need a multilanguage interface

Project 3: Convergent Design ​

Functional Design ​

Concepts ​

Synchronizations ​

Dependency Diagram ​

Wireframes ​

Heuristic Evaluation ​

I. Usability criteria ​

Learnability ​

Accessibility ​

II. Physical heuristics ​

Fitt’s Law ​

Gestalt principles ​

III. Linguistic level ​

Speak a user’s language ​

Information scent ​

Design Study ​

Typography Study ​

Color Study ​

Project Plan ​

Google Sheet: ​

Project Milestone: ​

Milestone 1: Alpha ​

Milestone 2: Beta ​

Milestone 3: User Tests ​

Project 3: Convergent Design

Functional Design

Concepts

Synchronizations

Dependency Diagram

Wireframes

Heuristic Evaluation

I. Usability criteria

Learnability

Accessibility

II. Physical heuristics

Fitt’s Law

Gestalt principles

III. Linguistic level

Speak a user’s language

Information scent

Design Study

Typography Study

Color Study

Project Plan

Google Sheet:

Project Milestone:

Milestone 1: Alpha

Milestone 2: Beta

Milestone 3: User Tests