hematopoiesis final design banner

Media: Adobe Photoshop CC, Axure RP 7, Adobe Edge Animate CC

Skills: Digital Painting, Prototyping, Interactive Design

Scroll down for process images

1. The Project

To produce a digital interactive designed for a college introductory biology class audience that teaches about the basic cells involved in hematopoiesis (differentiation of blood cells). 

When trying to understand hematopoiesis it's difficult to find descriptions of cell function alongside macro level diagrams. This digital interactive would addresses that issue, while providing an opportunity to learn about prototyping and digital interactive production tools in the process.

2. Prototyping and feedback

I created several sketch ideas for the interactive behavior. Among these, the most logically simple sketch was picked to expand further. An initial prototype was created using Axure RP 7 and qualitatively tested on fellow classmates before starting on the final design. The largest problem identified was that the initial design lacked immediate feedback to signify to the user that an element could be interacted with. An element signifying the differentiation pathway between cells more clearly was also needed. 

3. final design

Adobe Photoshop was used to illustrate the cells. I then imported the illustrations into Edge Animate, along with the sound which was edited and imported from Adobe Audition. Edge Animate was used to code the final interactive elements.

4. reflection

Although the project timeline was quite tight, I found that spending the time to learn Axure RP and making a quick and dirty interactive prototype was immensely helpful in finding where to take the final design direction. In similar projects in the future I may try experimenting with static prototypes to see if I can gain the same amount of insight with less time spent building the prototype, especially if the future project is also one where user interactivity is very minimalistic.