An insight into wireframing Heroes & Guises

During the past few weeks  we have spent a lot of time developing the user experience for Heroes & Guises. We thought we would share some of the steps in progress we have made.


The first step in designing the app was to write a plan of how it will work. This involved brainstorming the story setup and the reading/writing process. After this we were then able to list all the possible screens a user would face when using the app.


For the second step of the design, we sketched a few basic ideas for the screens, coming up with different options for the reading and writing interfaces. Whilst doing this we also researched other mobile apps, gathering inspiration for different designs such as layout, navigation and the use of images.


Once satisfied with the sketches, we moved on to the third step of creating wireframes for the different screens in Illustrator. For mapping out the user experience it helped to communicate complex ideas and spot problems, such as navigation complexity, content fit and usability.

For the focus to be on the structure of the app, the wireframes use subtle tones of gray, so the designs are not over powered by strong colours. Also using standard icons to represent key actions helped make the decisions of going text only, icon only or text with icon.


The overall aim for the app is for a user to be able create a story, whilst giving other users the chance to collaborate, interact and explore  different ideas within that story.

To achieve this goal, the fourth step was to come up with an innovative user interface that would be simple and understandable for a user to navigate through a story and its several chapters.

After much deliberation on this, we came up with the idea of displaying the text of each chapter from the story on cards, which can be tapped to open and which slide sideways to view alternate versions. users can use up and down button for the next or previous chapter and also by incorporating animations the cards can be flipped around to view more information about the chapter, such as the amount of favorites, comments, bookmarks and responses.

From feedback we found that this intuitive interface works very well, as it is quick and easy to access different chapters and versions of a story. If you want to leave any feedback on our designs, we would like to hear it. Please leave a comment or contact us.

By Harry Johnson, Designer.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation