Note: This brief is attached as a PDF, which has better formatting and working links. A zip of screenshots is also attached.
Literasee (https://www.literasee.io/) wants to be Medium (https://medium.com/) for Explorable Explanations (http://explorableexplanations.com/).
Allowing content area experts to create explorable explanations in their area of expertise while requiring a minimum
of programing. Literasee is an application that allows users to create and edit web-based content, and then make that content available in two ways:
__Report:__ The report is a web-page showing the content. (https://view.literasee.io/literasee…ics/report)
__Presentation:__ The presentation is a slide-show presenting the content in a presentation fashion. (https://view.literasee.io/literasee…entation#/)
At a high level the app has two modes: edit mode and view mode. Editing is only available to authenticated users, while viewing is available to anyone.
What is meant by authenticated users? **Literasee uses GitHub as the back end for most of its functionality,** so authenticated users are those who have granted Literasee access to their GitHub account. This allows Literasee to read their profile data, create and edit repositories and files on their behalf, etc.
This also means that **Literasee projects are actually GitHub repositories behind the scenes**.
TASKS FOR THIS CONTEST: Refine the design of 2.5 existing screens and design 2 new screens.
SCREEN 1: PROJECT LIST VIEW
The app landing page http://literasee.io/ and any user's home page http://literasee.io/someusername contain a grid of project links that display the project name and a thumbnail of the project. The existing design is nothing but this project grid, which is not sufficient.
For anonymous users (those who have not connected their GitHub account) the project grid will display featured projects as chosen by us, but we want to display content above the project grid that explains what Literasee is and encourages them to connect their GitHub account and start creating content. This could be in the form of a hero image with some text and a button but we're open to ideas.
For authenticated users we can make the top of the page more functional. This could be displaying their recent projects, recent or popular projects from other users, etc. The project grid in this case would be all of their Literasee projects.
Lastly, the project grid probably needs a header to communicate what is being shown and a way to search/filter the projects. The header options would be Featured Projects, My Projects, Some Person's Projects, etc.
SCREEN 2: PROJECT EDITOR
The project editor is the biggest piece of the app. You can think of it as being similar to sites like JSBin, Codepen and the like in that it provides code editing capabilities as well as previews of the output. These functions are currently shown side by side, but we want to move away from that due to challenges around updating the previews in real time. Users will probably need to toggle between edit and preview modes.
As mentioned previously, each project can have two output types. Reports are standard web pages with integrated graphics, while Presentations are slideshows, currently rendered with Reveal.js (http://lab.hakim.se/reveal-js/#/). Both types of output are authored in Markdown. We would like to explore the addition of some simple WYSIWYG controls, similar to what GitHub recently launched (https://github.com/blog/2097-improv…h-markdown).
The editor also allows the user to maintain a list of keywords for the project. These keywords are used to enable search and aggregation of similar projects.
SCREEN 3: PROJECT VIEWER HEADER
When you actually view a report that someone has created in Literasee, their content is the star of the show. Just like Medium, we have implemented a small header that gets out of the way until you need it. SAMPLE PROJECT LINK The header provides links for viewing the source of a report, viewing the author's GitHub profile, and sharing the link on Twitter. We want to retain the current functionality of the header, but make it look better.
SCREEN 4: NEW PROJECT WIZARD (NEW SCREEN)
When a user initiates the creation of a new project we need to gather some information from them. The user must provide a project and author name, select a license type, and select a report layout type. This could be implemented as a separate screen or a modal.
SCREEN 5: PROJECTS ADMIN (NEW SCREEN)
By default, Literasee will display all of a user's repositories from GitHub. For active GitHub users, most of these repositories will have nothing to do with Literasee and will not be compatible. As a result, we want to provide a screen where users can mark GitHub repositories that Literasee should ignore. Once ignored, the repositories will not be shown anywhere in the Literasee app, other than the admin screen. Since the repository list can be extremely long, items that have already been marked as ignored should probably be in a separate list below non-ignored items.
The admin screen may house additional functionality in the future.