Xenograph.jpg

Xenograph

A conceptual sketch app to accompany James Jean's work for SFMoMa.

 
 

About The Project

Xenograph is a sketch app that showcase the work and process of the  James Jean.  Users can engage and use the app to learn more about the artist and experience how he creates his own illustrations through this digital canvas. 

The scope of the project was to conceptualize an app by creating concept models, working facets with the use of an application sitemap and calling-out features on the app's key screens.

 

Details

DATE Fall 2017, 3 Weeks
TEAM Individual
TOOLS Sketch
FIELD Concept Design, UI / UX Design

 
 
Xenograph.png
 
 

Exploration

At the beginning of the project, I initially explored and did some research on three artists that inspired me, namely James Jean, Sean Yoro and Sha'an d'Anthes, all of whom influenced my work as an Illustrator. I did a background research on their work, style and biography and created a concept model for each.

Artists.png
 

Concept Models 

During the exploration, I created concept models for the three artists to give me a sense of the scope of their work. 

 
 
 
 
 
 

Wireframes

As part of the exploration, I also tried to experiment with wireframes and different styles for the three artists. I wanted to show their personality and style through the work that they create. From here on out, I ultimately decided to focus on the work of James Jean as a I felt that it his work strongly encompasses what I wanted to convey through the design that I'm creating. 

 

Application SiteMap

Below is a side by side overview of my early and final sitemap. I made changes to the groupings of the gallery and made it more summarized. I also made changes to the facets and made it more specific. A blown out look on my final sitemap is shown below the comparison.

 
 
Information Architecture Revised.png
 
 
 

Iterations 

Some of the changes and additional features I implemented based from feedback are the following:

  • Make the navigation by swipe to create more space for the canvas.

  • Make the details on the color palette pop-up.

  • Put an example to show how it would look like when a user creates an artwork.

  • Show the opacity slider on a sketch layer.

  • Show Brush Examples on canvas to see how it would look like when used.

 

Design Concept

I wanted to design a sketch app that recreated the experience of how the artist works on his own illustrations. Through features such as layering and tool variety, I wanted the user to interact and create a rich and meaningful experience with sketching an artwork in the style of James Jean himself. Selecting tools that the artist only use on his work was one of the key decisions that I made early on the project. 

 

 
 
 

Key Screens

From the iterations, I created my final key screens that showed how a user will interact with the sketch tool itself as well as the main navigation of the app where I wanted to include a brief introduction or biography of the artist and some related works that were on display at the show or exhibit. The facets in the app that is featured on search mode is determined by the application sitemap that I created. 

Some of the things I considered while making the key screens are the components (such as Navigation (Icon / Label Text), Artist’s Tools, Tool Options, Canvas, Layer, Menu Gallery – Carousel, Image, Text, Button, Back To Top) and pages (such as Home Page, Navigation Page, Getting Started, Biography Artist Page,  Index Gallery Page, Detail Artwork Page, Canvas Page).

 
 
 

Insights

As one of my early projects, I learned the value of being precision and functionality when designing an app. During our final critique, I got a valuable feedback from a panel guest to be as specific as possible when showing how an app works since it is a tool that should be considered as a mode of communication to developers and engineers who will build the app. That being said, I learned to be as detailed and thorough as possible when explaining and calling-out the features that I included in my key screens and wireframes.