Category Archives: Design

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.

design-plan

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.

app-design-sketch

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.

wireframes-2

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.

wireframes-3

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.

Play Heroes & Guises… on paper

Paper GameIn the midst of the designing, developing and talking to the world about our game we thought it might be a good idea to actually play it. However, in the digital game stories can go off in so many different directions that without some serious origami skills it would be impossible to play it fully on paper. We have however created a simplified version that can be played in groups. It gets across some core features of the game – for instance everyone starts with the same story introduction, but as the papers get passed around they go off in different directions. The group also get to vote on plot changes and vote for the best chapter.

We have begun to play this amongst our team, and Sue, our Business Development Manager, is offering to facilitate sessions using this game for organisations and groups. If you work with young people in a health setting and are interested in Sue coming to your organisation to run a session then email her on sue@discoverhg.com for more details.

If you would like to download the game and give it a go in your group you can use the links below. There are 3 versions available, as well as a rule sheet. Be sure to get in touch to tell us how you like it!

Downloads

> Rules of the game
Fairly standard instructions of how to play.

> Story 1
A story involving a beach scenario.

> Story 2
A story involving a mystery character.

> Story 3
A version involving a plane accident.

By Russell Goffe-Wood, Project Director.