New Post has been published on https://awesome-people.newonline.help/streamline-concept-video/
Streamline Concept Video
Concept video for Streamline, our semester-long project for the Service Design course at SVA’s Interaction Design program. Streamline is a service for empowering locals to rent their idle goods to people who want to travel light.
Starring:
Yang Yang as Dan (voiced by Tony Chu)
Tina Ye as Helen
Chris Cannon as Ian
Yang Wang as Jenny (voiced by Christine Aaron)
Dave Bellona as narrator
Streamline project team, a.k.a. “Team Awesome”:
Kristin Brievik
Dave Bellona
Chris Cannon
Tina
Likes: 1
Viewed:
source
Docur is a toolkit for designers and front-end developers who want to efficiently create dynamic style guides for digital products. It acts as a bridge, making hand-offs between designers and developers seamless. Unlike other tools, Docur helps in keeping documentation upto date with design.
Docur is a toolkit for designers and front-end developers who want to efficiently create dynamic style guides for digital products. It can combine design documentation with their design workflow, making hand-offs between designers and developers seamless. Unlike Brand.ai, Docur is a static-site and gives you complete control of customisation and flexibility.
Second variation
Docur is a toolkit for design teams to document their design systems in order to educate the rest of the product team about design and implementation guidelines. Unlike other documentation tools, Docur generates a documentation website which serves as a dynamic style guide.
In my last post I spoke about Airbnb's Lona and Docur, my prototype. Here are the answers to a few questions to reflect on the current state of my thesis.
What was the strongest component of your prototype?
I think what I can do different and benefit both designers and developers is utilizing the power of Lona to generate the design systems documentation is a much more flexible way. Since Docur is a coding kit, it gives you an option to extend and customize it.
What was the weakest component of your prototype?
The weakest and in fact, the most challenging part of my prototype is the ability to render components on the documentation website. Can I make the component render just as it was designed? Apart from just the look of it, can I make the component functional or at least offer an ability to make it functional?
List the areas in your thesis concept to further explore for:
Interaction
Is a Sketch plugin the best way?
What about tools apart from Sketch?
Design
The documentation website will be shipped with a default theme, what is the best way to extend or custom that theme to fit the design systems need.
Technical
Is static site generator the best way to go?
Can there be a better way to integrate a design and the Lona file?
What are existing attributes of your thesis concept to further refine and iterate?
I believe that the documentation website itself is the core of the concept. I need to architect in such a way that it is both adaptable and scalable.
What new areas have you not yet explored that are really essential? If they're not essential, can you rule them out to simplify your path moving forward?
I still need to explore more opportunities and case studies of previous attempts of automating the generation of style guide from CSS, SASS, etc for example like KSS and SassDoc. Also design tokens! A “design token” is an abstract bit of design language that normally becomes visible only when applied to more explicit patterns and components. For e.g.: Colors, fonts, scales, and grid-configurations. I still need to throughly think of the best way of handling them in the documentation.
In thinking about the user's experience what phases have you overly focused on? What parts of the experience have gone under-explored?
The plugin to export from a design tool is something that needs to be further explored since it may vary from tool to tool.
"A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, images, and other artifacts." - source
How does Lona work?
A design system is defined in JSON as a collection of components, styles and data types. The specification for these files can be found in the docs.
Lona has 2 parts to it — Lona Studio, a GUI to work with these .component & JSON files & Lona Compiler which converts the files to UI code for various targets.
How can others benefit from Lona?
At the core of Lona is the .component and JSON files which specifies how and what of a component. This is essentially what your design system is built-up of and hence the translation from design to UI code is what makes Lona efficacious. The potential of Lona also makes it a very useful tool to document your design system.
Coming back to the prototype:
What's the problem?
A very crucial part of a DS is its documentation, without which it is very difficult to use one. For example, which colour to use when? or when to use a solid button vs outlined button?
In my prototype proposal I talk about how documenting design systems is a problem and needs to be tackled.
The current scenario from design to documentation is very time consuming and inefficient, to put it visually, like this:
There is only a connection between your designs and its documentation.
There are few things that don't work here:
Development: Like I said there is only a connection between the designs and its documentation, but no overlap or intersection of its content. And because of this you have to get into code and build the documentation. Hence it is a manual process, hence lengthening the entire process.
Customization: if you use a tool like Brand.ai or Frontify, there are very similar to Squarespace or any hosted service, you can't get complete control over your documentation's look n feel or even functionality.
Time: documentation is crucial but often either neglected, pushed to later sprints or often outdated.
Hypothesis
I believe that if I make a tool that can integrate with the design softwares, then designers will be able to document their design system conveniently.
Solution
Docur - A tool for documenting design systems to educate teams about design and implementation guidelines.
How does it work?
Step 1: Export
Export your designs from the design library/UI Kit.
This will generate a Lona data file that we saw above 👆.
Step 2: Copy to Docur
Docur directory structure
Step 3: Generate documentation
The documentation
Benefits
Docur is not a cloud-hosted solution or even dependent on the design software in-order to work, it integrates with any tool that can generate the data file for it to work.
Docur is smart enough to parse the data files as long as they follow a predefined specification.
Docur's website is a bunch of static code, pretty easy to understand and learn, that makes it possible to easily customise and extend its functionality.
If you choose not to dive deep into code, that's fine, the documentation is simply written in Markdown and hence is nothing barebones or time consuming like raw HTML.
