Select Page

Low Fidelity Wireframes

Saturday 15th December 2018

After I finished my sketches of the app (can be found in my sketchbooks), I moved on to create some low fidelity wireframes. I used Adobe XD for this as this is the main tool that I will be using for creating the Go Give app.

As you can see these are basic layout structures and content placement so that I can get a better feel of the meat and bones of the project. This allowed me to wireframe out some additional pages that I would have missed if I jumped straight from paper to create high fidelity mockups.

 

The first section is just a brief preloading screen followed by the sign in or sign up prompt. In my prototypes and mockups, I am going to treat the user as if this is the first time they are using the app so I’ll take them through the on boarding process followed by a sign-up section. I have decided to show the on boarding first to give the user a feel for the app and what it is about.

The signup process will consist of multiple pages which will allow the user to put in their information and customise the search preferences to their needs. For example someone might only want to see charities or causes in their local area, so we can adjust the app to their needs. These settings will not actually carry through to the app as this will only be a mockup but in the full app it would work.

From my research, I have found that most people tend to rush through this flow just to get it finished and start the app. So to avoid them giving inaccurate information and rushing through it there will be an option to just fill in your basic information and skip the customisation until later. This will give them access to the app but with limited features until they “verify their account” by finishing the rest of the sign-up process.

 

Then you’ll be taken to the dashboard and from there you can navigate throughout the app. I have focused on the browsing experience and how it performs if you want to filter results by making it easy and clear on how to do so. I have also made the difference clear between categories and individual charities by making the charity results wide and the categories small and square. My thinking behind this is it will make it easier for the user to distinguish between the two.

After you have found your search result and clicked on your chosen charity there will be the main page where you can see their “Quick Appeal”, which is a short call to action about what they do in a short and sweet slideshow. You can also see the individual opportunities you can help out with and click into them to reveal their own information and requirements. From there you can send a message to an individual cause and they can get back to you with more information. This will be done in the app and replied to in the app unless you have not created an account, then it will be replied to via email.

 

This next section is the quick appeal. Quick appeal is feature for Go Give, almost like an Instagram story where you can post six or so slides about your charity/cause and the things you need help with. I found this to be the most effective way of displaying information by putting it into bitesize chunks it will be easier for people to watch and easier for the charities/causes to know what to show.

The account section is something I wanted to have but also not that important if the app won’t be fully developed. But I want it to look as professional and complete as possible. It will just allow you to change basic settings and edit account information.

There is also a saved section if you have an account. This will allow the user to save causes or jobs that they are interested in to look back at a later stage.

Nathan Patton

Interaction Designer

hello@nathanpatton.co.uk

46.356995, 14.082128

nathan.