Post 2: User Flow & UI Wireframing
My main goal for Amplify Music Fest was to make the experience more enjoyable for the users. The app is designed to be simple to use. I did this by making it easy to navigate through different pages, having links embedded and by including images that give the user a feel for the festival.
I developed a problem statement to help me with things i will need to include that will positively impact the user experience, From this I created a user flow which i could use when starting the sketching of my app, the user flow was important as it showed me exactly how the user would go through an app in a simple way that i could then introduce into my app. I then designed a site map for my app. This was to help me with what pages i wanted to include and show me how i would want the user to navigate through the app
Site Map
User Flow
When developing my low-fidelity wireframes after all my initial planning it was clear to me how my app would work. I first started by creating sketches of the different pages of the app including where the headings and subheadings would go. I sketched the navigation bar at the bottom of the screen as i could then grab the users attention with the headline and imagery which would then draw their eyes to where they can navigate through the app. I wanted each page to contrast with each other to ensure it wasn’t overwhelming.
Moving on to Figma i created my low-fidelity designs by adding boxes and text where i felt was appropriate which i could then develop in the high-fidelity stage. I added grids onto each page so that i could keep everything in an orderly layout which was simple to use. I feel as though each page is easy to understand and my layout is obvious to the user where they can navigate from and access different parts of the app.
Here is some examples of how I used Figma to create low-fidelity designs for my app which I can develop further.
