Business Network Web App

Context

EDU is a Quebec-based organization dedicated to the establishment of transparent and collaborative governance and helping education leaders in working inside their respective associations by providing information, research and organizing events for its members. During years of it’s successful operation, organization leadership recognized the need to centralize education resources and provide a communication hub for it’s growing membership.

Exploring options for component layouts and structure

Research

  • Stakeholder InterviewsConversations with the key contacts in the client organization funding, selling, or driving the product.,
  • Establishing a clear mental modelA mental model diagram is a fishbone or horizon diagram where the top towers represent individuals' motivations, emotions, and stories related to their experience in achieving a particular goal, regardless of the tools they use. The top part of the diagram is person-focused, not solution-focused. The bottom towers of the diagram represent the features of your organization's offerings, aligned beneath the appropriate upper towers that they support the best. You can see where your organization's design and business requirements support people's goals well and where they need improvement. The diagram as a whole is generative, not evaluative, helping your organization realize weaknesses and gaps in the way you support people and adapt existing products, services, or processes to particular behavioural audiences or situations.... More of the system functionality in a series of collaborative designInviting input from users, stakeholders, and other project members. sessions. Identifying initial components of the system and establishing naming conventions as basis for creation of atomic design system.
  • Card sortingCard sorting is a technique where users are asked to generate a folksonomy, or information hierarchy, which can then form the basis of an information architecture or website navigation menu.
  • Flow charts

Analisys

  • Ethnographic studies and deep analysis of existing data in the professional field
  • Quantitative analysis obtained through a collaborative process with stakeholder organization
  • Data visualizations for network structure insight and connections
  • Ecosystem analysisa visualization of company’s digital properties and connections between them. – getting insight into how new EDU platform could fit into an en existing infrastructure and information architecture and how we can best utilize the existing network to users advantage. This phase is key in establishing enabling limitations and eases the process of making technical decisions. During multiple sessions with the Development team Reacta JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications... More was identified as a suitable development platform. My previous experience in creating and maintaining a design system for Home Improvement Inc.* was a contributing factor.
  • User personasA persona is a fictitious identity that reflects one of the user groups for who you are designing. based on the insight from research phase
  • Multiple usage scenariosA scenario is a narrative describing “a day in the life of” one of your personas, and probably includes how your website or app fits into their lives., cross-referenced with initial stakeholder interviewsConversations with the key contacts in the client organization funding, selling, or driving the product.

Tools used: Excel, Tableau, vis.js (interpretation of networking data), pen and paper

Article and event cards

Design & Production

Due to the nature of my involvement in the project on both design and front-end component work in Reacta JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications... More, Design and Development phases were closely intertwined. This was ideal for an Agile iterative approach: rapid, iterative and broken into 2-week sprints, with Design working closely with Development every step of the way.

 

 

Tools

  • Pen and Paper
  • Sketcha proprietary vector graphics editor for Apple's macOS, developed by the Dutch company Bohemian Coding. Sketch was first released on 7 September 2010.
  • PhotoshopAdobe Photoshop is a raster graphics editor developed and published by Adobe Systems for macOS and Windows. Photoshop was created in 1988 by Thomas and John Knoll.
  • FramerFramer is a software for interactive prototyping used for prototyping final stage high-fidelity interactions. Developed by Koen Bok and Jorn van Dijk in 2013.
  • Scapplea digital tool that helps its users in creating mind maps.
  • Reacta JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications... More
  • vis.js
  • Bitbucket
  • SourceTree
  • Excel, Spreadsheets