I used Balsamiq to complete the interactive design element of the brief. This website lets you create wireframes of your app and link the pages together, this then works in the same way the app would work.
Once this had been tested, the feedback was that the user couldn’t navigate backwards without having to use the side menu and start over. However, if this app were going to final completion to go back and forwards again a swiping action would be used, but to display this through Balsamiq, I have added in a back button.
The interactive wireframe for Herb!t can be found here:
Herb!t Interactive Wireframe
This is the final poster design for the Herb!t app. This covers the non-interactive part of the brief. The fonts used in the poster are the same that were used within the app to make it continuous, this font is Raleway ExtraLight, it is sans serif and is a font family so where needed bold and italics can be used too. It was used to portray a medicinal and modern atmosphere to both the application and the poster.
Simliar to the iPhone mockups I created these mock ups using a free online template to add in to my app design poster. It displays a variety of the different screens that will be shown in the app.
In the social section, you can edit details to your account and get more information about the app itself.
Final designs for the ‘Social’ page:
This profile page is where the social button opens out onto, it shows the users profile; picture, posts, shares. It also shows the notifications icon in the top right corner that turns full colour when there has been activity in relation to the user.
The three icons under the profile picture are (left to right) ‘Add New Post’, ‘News feed’ and ‘Friends’.
This is an example of a users News Feed, filled with shares and posts from friends. The user will be able to ‘Comment’, ‘Share’ and ‘Favourite’ on friends posts by using the icons on the top right of each post.
When the ‘Share’ icon is clicked, the options for links to Twitter, Facebook and Pinterest come in to the foreground, blurring out the back.
This page holds all the information the user has favourited within the app, this could be searches/recipes/remedies found in the Ailment, Anatomy or Plant sections or posts from the Social section.
The main Favourites page
An example of the ‘Favourite Posts’ section, it starts with most recent favourites and continues with the date the item was favourited. This is the same engineering for each of the favourites sections.
The final designs for plant works in the same way as the Ailment and Anatomy pages where the user manipulates through the dial menus until they find their remedy, however in this case, they can find the plant they are looking for and information about its properties and how it can be used to treat ailments.
The final designs for the anatomy page.
The select anatomy page is the first page of the anatomy string, it works in a way that narrows down the searches for the user by clicking on an anatomy.
Once the anatomy has been selected, the user is shown a dial in the same design as the A-Z menu, showing body parts that the user can select.
The dial opens up similarly to the A-Z menu and the user keeps selecting until they continue to a list menu like after the ailment pages where remedies are shown.