Endless App Framework & App Builder

From templates to presets

Presets support a certain experience and “content narrative”. Specifically, we use Preset to refer to a combination of pages and components. Presets should be reusable; a few good ones should support a wide range of content types. We propose starting with 3 different presets – Focus, Hybrid and Explore – and expanding from there.

Template Mitosis

Let’s look at how we were making apps at the outset:

1. An existing template is used as a starting point.
2. Design evolves based on a specific content use case.
3. Content is force-fit to the template, inheriting its constraints.
4. UX is compromised by a lack of modularity and flexibility.
5. Templates proliferate based on minor tweaks, resulting in a fragmented system of narrow differentiation.

Three Basic Steps

1. Use content to drive the design of the front-end solution. (Content types AND structures)

2. Ensure the front-end solution supports the optimal user engagement with the content. (Through user testing and app usage metrics)

3. Create modularity such that elements can be repurposed to support different configurations…

Content Patterns

We recognized that there were different content types, for example, a chapter in a textbook, a newspaper article, and a video feed. However, they may share similar content patterns.

Identifying the content patterns separately from content types allowed us to establish a system of matching reusable display patterns.

Experience

Experience refers to how a user would likely interact or engage with the content.

For a given content type, it’s important to consider the user’s mindset and behaviors when consuming the content.

What are their goals? Are they trying to get a quick answer to a question? Build upon knowledge systematically? Discover something they didn’t expect to find?

Design <>Code

The way the code should be built should influence some design decisions and visa versa.

How is the preset skeleton code organized? (ie. the blue-print)?

How is the final YAML file with all the display patterns applied?

How are the SCSS files for each object type> preset> app organized> And can a designer easily access and edit versions of them to meet the design needs of specific apps.

Design and Devs were careful to define the language of how we identified and discussed specific objects to communicate clearly from mock-up, spec, and implementation.

The dev team created some simple tools to allow us to run tests with various content sources and layouts, as well as do live editing of the .SCSS of built apps on the native platform (Endless OS/ Linux)