Moving onto ideation, I was able to work with the research and discovery that I had done to come up with some sort of idea of what the app would function like, and what the purpose of it was. I already had some ideas in my head as to what the app would do and what it might look like, but I needed to get these ideas onto paper to see if they would end up working out or not.

Journey Map & User Flow

I started by creating a journey map and a user flow. Using my user story and user persona, I knew who the user was and what they were trying to achieve. With their goals in mind, I wanted to tailor the app around them and the task that they are trying to complete. In this case it was to Learn about SDG Goal 3 and Donate to a Charity/Volunteer. With this scenario in mind I was able to quickly jot down some of the different stages that may be involved for the user when trying to do this. When thinking about the different stages of the journey, I was jotting down the actions that the user would be taking, the touch points they interact with, and what they are thinking/feeling. I then moved onto Miro and made a more refined version. From what I gathered I then jotted down a quick user flow as to what the different screens might be for the user to achieve their goal.

IMG_2775.jpeg

Screenshot 2024-11-19 at 12.35.31.png

Wireframes & Site Map

With a good understanding of how the user journey and user flow will play out, I then moved onto sketching some wireframes and a site map to get an idea of what the UI might look like. It was good to sketch a lot of ideas down then so that I could remain open to what would work or not. I sketched out the main screens that would feature in the app, which are:

IMG_2771.jpeg

IMG_2772.jpeg

IMG_2777.jpeg

IMG_2778.jpeg

Apple News Card System

One of the news apps that I would occasionally use is Apple News. I really love the UI that they have and how simple it is to go on and read some of the latest news. One of the reasons that I think the UI is so good is because of the card system that they use. I am already a big fan of using a card system in UIs, and after seeing and using theirs it is something that I want to implement into my UI for the SDG app. I wanted to find out more about cards, I read an article by Nielson Norman Group, I learnt that in recent years using card systems in UI design has become very popular, and how they have 2 main functions. They display information, but also encourage the user to tap it to view more details. Cards are useful for grouping information, and enhances content digesting as it groups information that is related. They also offer a summary of information, and allow the user to click on it to get the full information. It was cool to look further into cards after being a fan of them and wanting to use them in my own designs.

IMG_2781.png

Cards: UI-Component Definition

Conclusion

This stage was a very interesting and fun one, as I was able to take big steps in the direction that I wanted to go in when it came to how the app might look like and function. Taking inspiration from different sources such as Apple, as well as the sketches, I can now take these ideas from paper to digital and start developing a tangible product.