This project focuses on my UI skills, layout, design, colour, typography - and UX - how users flow through the app. The project was quick, fast pace, a 2-day project I completed for an internship as a design challenge.
Hobbyistlist is a service that connects those who are pursuing a new hobby or would like additional information about their hobby but need help knowing where to go. Hobbyistlist connects the user to a 'hobbyist' who has the experience where they can communicate with one another.
Thinking of the visual identity for the app, I immediately wanted it to portray feelings of fun and excitement, as this is what someone should feel when they are doing a hobby and possibly trying something new. I found this typeface, Satisfy, which looks similar to handwriting and incites the feelings of fun and excitement I was aiming to achieve through the typeface ligatures, so I incorporated this typeface in the logo. I selected Lato as the body font used for information the user would read within the interface. Lato is clear and sharp, making it easily readable by many people.
I decided to go with a two-tone interface. I picked this shade of orange and blue, and they do an excellent job of complementing each other. I wanted the UI to look clear and straightforward.
I looked briefly into iconography to create a brand where icons would complement and connect with each other. For example, the tick, extra information and back icons incorporate circles with the icon in the centre. This is one way I have created a brand through the iconography used throughout the app.
The app is divided into three sections
I wanted to focus on the community aspect of the service, and so I have developed this part of the interface.
This screen is the home page that appears when the app is initially loaded. The user is met with a trending list of the top 5 hobbies. There is an indicator for the number of people providing advice on a particular hobby allowing the user can see how popular their hobby is. However, if these hobbies do not entice the user, they can search for any through the search bar at the top.
The user picks a hobby from the trending list, such as photography. They are shown a random 'hobbyist' - a person teaching the hobby - and a little introduction by them. The user then decides whether they wish to continue with that hobbyist.
Here the user can look at the Hobbyists portfolio, send them a message about the hobby, or start learning about it. At every stage of the process, the user can quickly access their messages and profile and return to the main app page by tapping on the logo at the top.
It takes the user four interactions, from picking a hobby to learning about it.
The user is shown advice for their chosen hobby written by the person teaching it.
Interface elements follow a messaging style with an image of the person's face and a speech bubble.
The user is shown a checklist with the essential items and knowledge required to begin learning the new hobby.
As the system is built around teaching and informing, I have implemented extra information icons the user can tap on whenever they are uncertain, providing the user with additional information the teacher may be able to provide. In this case, Todd has included a little section on what a tripod is and a memory card.
There is no limit to the number of hobbies one can learn. Hobbyistlist considers this and provides a feature that allows users to communicate with multiple teachers so they can keep track of information easily.
One way it does this is through hobby tags underneath message previews. This allows the user to see who is teaching what hobby clearly. A Hobbyistlist user can start private conversations with their teacher where they are able to get further advice about that hobby.