Designing OhApollo

Creating a design discussion platform

OhApollo is a design annotation and collaboration tool. Designers use it by uploading their work, adding contextual comments and sharing with others to receive feedback. I worked on this project during weekends with my friend and engineer Cody Krainock to implement it as a React web app.

Fig1. - Views from the app.

I came up with the idea for OhApollo after becoming frustrated with sharing designs through email and messaging tools. Receiving feedback through these mediums was difficult. I aimed to create a simple tool that allows users to collaborate on design contextually.

Fig2. - I created countless sketches as I distilled the concept down to its basic functions.

I sketch different ideas and product flows. I then created many prototypes, which I tested with other designers.

Fig3. - Views from an early prototype.

I created many user interface directions, tested them with users and relentlessly narrowed down the focus as I worked with Cody to implement something we could ship and test for further validation.

Fig4. - Screenshots of the four prototypes I created in Invision and tested with designers.
Fig5. - Views from an early prototype.
Fig6. - User interface experimentations from early prototypes.
Fig7. - Views from one of the final prototypes.

We then began the development process. I coded the basic front-end based on my designs using HTML5/CSS3. Cody then chopped it up and implemented it in React with a Rails backend.

Fig8. - After building the first versions of the user interface in Sketch and prototypes in InVision, I coded a final prototype—illustrated above—that I handed off to Cody.

After learning the basics of React, I began to push simple tweaks as Cody did the more complicated scripting.

Fig9. - I worked closely with Cody to tweak the front-end of the React app.

We tested the product for weeks with a small group of users and hammered out the kinks. We then started to invite more designers to use it and provide feedback. I conducted many usability studies and reviewed data. These studies helped uncover the many usability issues and bugs that took away from the user experience. One of the most significant insights was that the share function was critical to the usage of the app. If users didn’t share work and receive feedback, their retention was unlikely. This insight drove us to make sharing as simple as possible by allowing non-authenticated users to provide comments.

Fig10. - Iteration of the share feature with the ability to share a tokenized link.

I continued to refine interaction details while simultaneously working with Cody to implement the app in small batches.

Fig11. - Fullscreen interaction transition detail.
Fig12. - Add and delete interaction details.

The research I conducted helped me understand the needs of online design collaboration. One of which was the ability to create and share collections of work. This insight led to the design of the project feature. The project feature allows users to create groups of work and share it with their team.

Fig13. - Project creation flow.

Although OhApollo is far from finished, designers have adopted it into their workflow. It has been a fun side project. Sign up and let me know what you think.

Fig14. - A collection of user interface components.