BASIIC:
Tool for Visualizing Software Development

Objective:

Basiic is a designing tool for coders, programmers, and software engineers to diagram their projects in a meaningful yet simple way to make project handoffs easier and more understandable.  When a coding project gets too big, it is difficult for a coder who wasn’t there from the start to jump in right away because there is so much code to read.  The diagram created from Basiic will help streamline that process of understanding code and where the code currently is.  The difference between Basiic and a normal diagramming web tool is that Basiic is tailored towards code.  The main functionality we want to achieve is user interactions with the diagram where a click on the shapes will take the user to the actual place in code so that it is easier to read and learn the actual code itself when there is a visual attached to this understanding.  We intend for Basiic to be widely used amongst tech companies, which have huge code bases, and even just the average coder who wants to start a complex, multi-tiered project.

Team Members:

Jon Kramer ⋅ Jane Lee ⋅ Carter Bastian ⋅ Eric Wang

My Role:

Experience Design ⋅ Interface Design ⋅ Ideation ⋅ Team Facilitation ⋅ Documentation

Duration:

10 Weeks (Jan – Mar 2017)

Defining Deliverable:

  • Editor and Auto-Gen
    • Editor:
      • Wireframes for what the editor looks like
      • What blocks look like
      • UI/Icons
      • User ability to annotate the blocks of code for more info
    • Auto-Gen:
      • MVP Prototype

Initial Design Specs- Five Main Elements:

  1. Blocks:In general, this is a functionality. Specific examples of blocks:
  • A section of code
  • A code file
  • A database
  • A user interface (EG a GUI)
  • A function
  • A class / object
  • A class method
  • A stack/series of sequential functions
  • A place with storage
  • A Cache
  • An external code base
  • An API callPotential groupings:
  • General block, function block, storage block (static), database block (can perform computation), human interaction (like computer), file block, external/API block (library)

2. Control Flow:

Represents a decision or branch from one block element to multiple block elements. Some specific examples of this:

  • An if/else code block
  • A case-statement (one to many)
  • A while loop
  • A for-loop
  • A do-while loop

Potential Groupings:

  • If/Else conditional, case-statement conditional, generalized loop

3. Connections:

Represent relationships between blocks. Some specific examples of connections are:

  • Input to a function
  • Output to a function
  • Concurrent data passing back and forth between a database
  • Sending an HTML packet to a user
  • Starting multiple threads or processes in parallel
  • One-way information/control passing from one block to another
  • Bi-directional information/control passing from one block to another

Potential Groupings:

  • One-Directional Connections, Bi-Directional Connections, IO connection

4. Organizational Elements:

Connect a series of other elements into a category or grouping

5. Annotations

Phase I (Low-Res Design):

Defining Scope:

Blocks:

  • Squares / Rectangles for actual blocks (slightly rounded edges)
  • Trapezoid / hexagon
  • Triangles (for if else)
  • Circles
  • Cylinders of variable width (like in Bailey’s diagram)
  • Computer shape

Use cases to consider when designing blocks:

  1. Interface for moving them
  2. Interface for sizing them
  3. What does it look like when you hover over it
  4. How can you tell if it can be expanded into its own diagram?
  5. Titles on the blocks

Connections:

  • One way arrows (different tip styles?)
  • Non-directional arrows
  • Bi-directional arrows
  • Curly bi-directional arrows
  • Fat Arrows
  • Squiggly Arrow
  • Control flow vs data flow

Use cases to consider when designing arrows:

  1. Is the layout gridded?
  2. What does it look like when you hover over it?
  3. “Ports” (where do they connect?)
  4. Adding Titles

General UI:

  1. Is it gridded?
  2. How do we do layout of wires?

Designing Prototype:

This slideshow requires JavaScript.

This slideshow requires JavaScript.

Phase II (Mid-Res Design):

This slideshow requires JavaScript.

Phase III (High-Res Design):

This slideshow requires JavaScript.

Final Design:

This slideshow requires JavaScript.

Deliverable:

Our team worked on a solid Invision board which contains the mockups for the screens in Basiic, as well as buttons that show how to get from one screen to the next: https://invis.io/MUARYEQBP

HOME • BACK TO TOP