I then moved onto Figma, and started getting my sketches onto screen to start progressing in the development stage. It was important to keep in mind at this point the user that I was designing for, and what their needs and goals are.
Moving onto Figma I then took my sketches and started working on them digitally to get a fell of how the app would look. A key element to this was using the cards that I talked about previously, so these were a standout element throughout the whole of the UI. At this stage I wasn’t worried about type or colour, but just wanted to get a basic layout of what the UI would look like, so that I can build from it and then start adding the details. Hierarchy was something that I was focusing on at this stage, and ensuring that there was a clear hierarchy order of what the user should look at when they first see the screen. I done this by using a type-scale to distinguish headings, sub-headings, and body text, along with following the Gestalt principles so that the user can understand the interface easier.
At this stage I decided it would be a good time to conduct a usability test. I done this now as the earlier it is done the better, and I wanted to get some feedback from a user on what they thought of the app and how it could be improved. So using these mid-fi screens I created a super quick prototype for the user to navigate around. Since the purpose of the app was to educate people on SDGs and aid them in donating/volunteering, I wanted the user to try and work their way around the navigation to achieve this. The app needs to be easy to use, and the user shouldn’t have to think hard to achieve their goal. With all of this in mind I asked my brother (who is also a university student) to navigate around the UI to donate or volunteer. As I observed the test here is some feedback that I received:
After learning about content strategy a few weeks ago, along with Rachel from Big Motive talking about it, I wanted to ensure that it was something that I thought about and applied to this project. From the ideation stage I figured that the purpose of this app would be to educate undergraduate students about SDGs, and encourage them to donate or volunteer. I therefore want the user to get to donating and volunteering as efficiently as possible. This was quite challenging as with SDGs there is a lot of information and it covers a broad range of areas. How I combatted this large amount of information was by making the information digestible by dividing it into different pages. The user would first select the goal they want to see, then the specific target they want to find out about. There are 17 goals, and 14 targets in goal 3, so splitting up all this information into different screens this way made the interface easier to digest and walked the user through each page they were at, and subtly prompted what their next action should be. Down below is a sitemap and the different steps the user will take to achieve their goal of donating/volunteering. Some further reading on content strategy helped me understand further how to apply it to my design. This article talked about how content strategy is important as it helps us give users the right content at the right time, instead of just throwing all the information at them at once.
The Complete Guide to UX Content Strategy
I then started adding some colour to the UI designs. Using the 60/30/10 rule, I went for green as the primary colour. This is because green is associated with health, as it is the colour of nature, and it is also the colour of most vegetables. In the background is white, and this bounces well off the green. A dark green is used on the navigation as a tertiary colour. For headings and subheadings I used IvyStyle, and for body I used inter. These typefaces both work well together and they communicate clearly what is being said, which is the most important thing.
