Here is the website for New Zealand forager I have been slowly working on the past couple of weeks.  I haven’t got that much time left in the semester so will probably not be able to make it mobile friendly.  But I should be able to get it completely finished for the showcase.

Here is a link to the invision prototype of NZ Forager.  It doesn’t look the best on web.  But on mobile it looks great

https://invis.io/BHOBKATWS4D

Today and yesterday I have spent some time playing around with photoshop.  I’m not in anyway a master of photoshop.  But over the past couple of months I’ve been trying to learn as much as I can as it’s a great skill to have.  Recently I have being using photoshop to make animated gifs for my website I am making for the app.

I’ve been doing a bit of research and learning about SEO (search engine optimization).  People being able to find your app through search engine results is one of the best ways to market to potential users besides word of mouth.  People that are interested and search for wild foods and foraging in New Zealand should be able to easily find New Zealand forager.  People that have a New Zealand IP address and search for some of my key terms, should find New Zealand forager whilst searching.  I’ve also setup how New Zealand forager should look in SERPs ( search engine results pages).  This is what you will see in the google search results.

One of the most important parts of a design is proper naming conventions and neat and tidy work.  Even though it is just me working on this project I have been practicing tidy naming conventions.  Getting into the habit of poorly structuring my work would be very bad in the long run and is something I can’t get into the habit of.  In the future I may be working in a team and people need to be able to pick up your work and know where they’re at quickly and efficiently.  Handing over untidy work is like handing sometime a black box and can be an unnecessary waste of time.

Below is just one of my screen designs with the the structure I have been using.

Today I went to a tech week lecture on UX.  It was presented by Caelan Huntress.  He talked mostly about modern learning and how it needs to be effective, relevant and intuitive.  The context of what he had to talk about was not relative to what we are doing but the fundamentals of what he was talking about was.  One thing that I found interesting was when he talked about ego.  How if you want a user to do something the best thing you can do is appeal to their ego.  As in giving people leaderboards or when doing a survey or review disguise it as them reflecting on themselves.  for example on a fishing website instead of asking the user how they found the experience.  Ask them questions such as, how knowledge they see their self at fishing or how well they understanding the content.  Thereby getting them to feed their egos.  Quite interesting psychological manipulation stuff.  But essentially that what UX and marketing is. 

I spent the last couple of days learning about vectors and coming up with icons for the categories.  It took a couple of tries but I think I got some good looking icons in the end.

So their are a lot of problems and issues that can arise when encouraging foraging.  Foraging is a recreational activity and people need to know the dangers and keep themselves safe.  That is why I made a set of rules that will be the first thing they see when they open the app.

The rules are - 

Identification 

This is the most important rule when foraging.  Make sure you know without a doubt what your foraging is the correct species.  If your only 99% sure ask an expert first.  Especially with fungi.  Consuming the wrong species could can be fatal.

Conservation 

With all foraging make sure you are respectful with amount you take.  Remember, foraging is a recreational activity so leave enough for other foragers and for the populations to remain sustainable.  Many species of Native plants within New Zealand are endangered and are already under threat from invasive pests.  Some of these plants are also the main food source for native birds and insects.  So please be respectful when foraging native plants.  Many of New Zealand's native bush and parks do not allow you to forage.  If you are not sure consult DOC before you go out foraging.

Location 

Make sure the location your foraging from isn’t hazardous.  It may seem obvious but make sure your not foraging on an old waste site or around a contaminated stream.  Even around the sides of old houses that used lead based paint could have metals that have leeched into the soil and plants.  Many urban environments such as sides of roads and lawns are sprayed with pesticides that could be very harmful to humans.  Make sure thoroughly wash everything you forage.

Survival

This week I’ve been at work on the design stage.  Designing what the apps looking like in Figma.  I chose  #81c784 green as my primary colour.  I originally went with a lighter green but according to material.io guidelines I would have to of used black title text and I didn’t like the look of it.  So i went with a darker green which I feel best conveys the feeling of nature and New Zealand bush.  Which is most relatable to foraging.  I've also spent a lot of time researching the first plant that I will put in the app.  The common dandelion.  I learnt a lot about dandelions and condensed it all into some easy to read information.

I have spent a while working on what the toolbar will look like in the app.  The main toolbar is very important as it is the way in which the user navigates the app. “Navigation is a conversation. Because it doesn’t matter how good your site or app is if users can’t find their way around it.” [1] The navigation needs to talk to the user like a conversation.  Simple put, easy to understand.

This was my first go at designing a navigation toolbar.  

The background was the primary colour of the app. With white coloured icons for the navigation options.  Small orange bar let the user know which navigation option was selected. 

The reason I decided to go with icons instead of text is for many reasons.

“Icons bring a lot of nice benefits to user interfaces, such as saving screen real estate and enhancing aesthetic appeal” [2]

Icons also “make good targets. They are typically sized large enough to be easily touched in a finger-friendly UI”

I used the orange bar to tell the user which navigation option they had selected.  This is because the user needs some sort of feedback with what they are doing.  If nothing happened the user might become confused and not now where they are within the app.

I took this idea off from the app Tinder which if you haven’t used it before, has a very intuitive UI.

Although I liked what I had done, It just wasn’t looking “right”. 

This was my second try at the toolbar design.

What I did with this toolbar compared to the second was remove the primary colour from behind the icons as it adds more white space.  

White space “help maintain focus” it also creates focus point more easily drawing users attention to certain elements. [3]

I also think it looks a lot cleaner with less elements, instead of four colours there are only 3.   

I also made the current navigation icon the apps primary colour.  This further re-enforces feedback to the user.  letting them know where they are within the app.  

This is my third and so far final navigation tool bar design.  

What I changed from the previous is I -

1. Made the icons smaller

2. Added text

3. Moved the navigation bar to the bottom

The reason I made the icons smaller was to add more white space and make room for the text.  But I also followed the material.oi design guidelines and made the icon for a nav bar 24x24 dp. [4]  This is the standard and most common guidelines.  The reason I have followed these guidelines is because it makes the user instantly more familiar with the app, and further increases trust with the product.  

I also added text under the icons.  This is because according to Nick Babich [7] there are four different types of icons.  Universal icons, Unique Icons, confusing icons and conflicting icons.  The search and the mail icon in my toolbar design are examples of universal icons, as they are universally know for what they do and will not get confused with anything else.  The leaf by itself is a confusing icon.  There is no indication or understanding of what it means with just the icon.  Therefore text is needed to tell the user what it is.  I then added text to the other universal icons for consistency. [5] [6]

I also moved the nav bar to the bottom.  I reason I did this was because whilst doing research I read an article called “ How Do Users Really Hold Mobile Devices?” by Steve Hoober [8].  He found that about half (49%) of people using mobiles use just use one thumb for navigating their mobile.  This in turn limits the users dexterity to a certain range. as you can see in the image below.

“Green indicates the area a user can reach easily; yellow, an area that requires a stretch; and red, an area that requires users to shift the way in which they’re holding a device.”

Because of this to make the nav bar more accessible to the user I have moved it to the bottom.

I have been learning a lot about UX over the past weeks, and a lot of simple things I thought would easy and intuitive to design are becoming much more complex under the hood, so to speak.. 

References:

https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f

https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/

https://medium.com/wayfair-design/more-padding-please-b95e19422acc

https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-specs

https://uxplanet.org/icons-as-part-of-an-awesome-user-experience-e468e16b206b

https://www.nngroup.com/articles/icon-usability/

http://babich.biz/

I never really thought about the amount of research that needs to go into an app like this until I started.  Each item needs to be thoroughly researched before it can be put in the app.  This is manly because you do not want to give someone wrong information regarding things they’re putting in their body.  Someone eating the wrong thing because of misinformation could make them seriously sick, or even kill them.  I have gotten a couple of books out from the AUT library and a bunch from the grey lynn library.  I have also borrowed some books off some friends of mine.  This is because a lot of the information that I’m looking is very difficult to find online for some reason.  Which is not a bad thing because reading these books over the last couple of days during the break has been very interesting and relaxing.   

I’ve been doing a bit of planning today around the layout of my app.  The bottom navigation will have three options home, search and forage.  Bottom navigation  buttons contain the most important destinations within the application otherwise known as top level navigation.  Top level navigation are destinations that are at the top of the hierarchy and users need to be able to navigate these options anytime within the app.

The home will contain a brief overview of the application, a disclaimer talking about basic foraging etiquette.  Such as not taking to much, being 100% sure of what your foraging and where your foraging from, for example not at the side of a house painted with lead paint or onto of a old dump.  

The search destination is rather self explanatory it will allow the user to search from the types of things that can be foraged.  

The forage destination will give the user a list of categories that they’re foraging in Native Bush, Ocean/Shoreline, urban and other.  This helps the user easily find things that are in the location of where they’re foraging.  Although I might change these categories to something like.  Trees, Shrubs, herbs, mushrooms, seaweed.  This all depends whether the user is looking for things to forage or trying to identify something they have foraged.  I think because most users of the app will be new to foraging I have gone with the former.

Last semester for User interface design I compared and tested out multiple different UI design software and I ended up using Sketch for Design and Invision for prototyping.  But this semester I have decided to give Figma a go instead of sketch.  This is mainly because sketch is only available on IOS and my macbook has become very unreliable.  Last semester I wrote about Figma and it’s issues.  Such as being browser based it has speed issues.  But apparently it has improved a lot in the last couple of months and I’m willing to give it a go. Like sketch it still allows for export to Invision but it is a much slower process as Figma does not have options for 3rd party plugins.  

Hupa is up and running and ready to go!  Looks very sleek and I think it came together great!

For user testing I tested three participants.  This is because in Steve Kryg’s book Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems here recommends just three per design iteration.  As the “first three users are likely to encounter many of the most significant problems”.  So I tested three people over the course of two days.

First I tested Ella my flatmate, she went through the steps smoothly but as a gardener proposed the idea of listing multiple produce at once as this would be much more efficient and helpful to her as she grows lots of different things.  She also said that she would like to show off her garden on the app.  This is an idea me and Leo already discussed.  We thought about making it more of a garden social media platform but thought given the time constrains of the semester just a basic food sharing app would suffice.  As this is our first time designing an app and we didn’t want to over complicate it. 

I also tested my grandpa...  he honestly had nothing good to say at all.  He doesn't believe in technology.  But it was worth a try.   

Here is a video of a user testing session I completed with Connor.  This user test we learnt a couple of things from

Connor got mixed up between the trade and koha/free tabs.  After looking at these tabs I realized that they are the wrong way around.  With the wrong one being highlighted when you click on it.  I have since switched them around. 

Another issue that I saw was when Connor tried to delete the apple listing he instinctively tried to hold down on the listing.  This was a feature I want to implement but it is an impossible action with the prototyping tool invision.  It might look something like this. Where the user can select the edit and remove universal icons from just holding down on the listing instead of going through the process of going into the listing.

Another thing Connor mentioned was that instead of writing to a person on the app it would be easier to just ring them.  Although this would be more practical, it raises a small privacy issue if were advertising everyone phone numbers.  Maybe we could have an option where the trader could list their mobile if they wanted to. 

Connor also mentioned the idea of having a help page which lets the user know what to do.  This isn’t a bad idea at all and maybe helpful to some people that are not as technologically savy.  Like my grandpa.

One thing I think I could of improved in my user-testing is not ask so many leading questions.  During the part where I ask Connor to comment on the about of listings page my questions were to leading and I should just simply asked him how he would fill the page out.  Like a normal user would do. 

Now we’re up to the user-testing part.  Although I know user-testing is a vital part in the development of an app or a website or almost any project for that matter, I don’t really know the details of why it’s necessary, I have also never conducted user testing on someone before.  So over the last week I have been doing a bit of research.  I will post of a summary of what I’ve learnt later.

One book I found extremely useful though is “Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems” By Steve Krug.  

Although being almost 10 years old, It covers the solid fundamentals of user testing and has some great starter user testing methods.  So I ended up buying the e-book and giving it a read.  It was a lot of info to take in but Steve does a great job at making the book pretty funny and making it really interesting.  He splits the book into two part finding usability problems and fixing usability problems.  Overall it was a solid read.  and would recommend to anyone that is interesting in design in general. 

Finally most of the screens have been designed to make the first prototype.

The design phase took a loooot longer than I thought it would.  A lot of fiddling around over very small things.  Going back and forth from Invision to sketch to importing it to my phone to check if it’s working.

Also a thought I had recently. With design in the prototype stage it doesn’t matter if you make mistakes.  During the design and prototyping that is where you want mistakes to happen.  If mistakes happen after/during development it can have knock on effects and take a lot of time (money) to change.  This is why it is important to get as much as possible into prototype designs.