This is the stage where I saw the vision of the brief come to life, which was fun and exciting. I started with sitemaps, user flows, and storyboarding to understand how users would move through the app. Then I moved on to sketches, which helped me quickly explore ideas without worrying about detail. The low-fidelity wireframes let me plan the layout and hierarchy, and the high-fidelity screens brought the brand to life. User testing was really important in this stage, as it showed me what needed fixing and where people got stuck.
This was the first thing I completed when designing my app. I wanted to make a sitemap so that I could get an idea of the pages that I would need to create. This gave me an idea of how the user would navigate through the app. I started by sorting the onboarding and then the home page, and what pages linked to the home page. I also had three other sections, which were course, lectures and mentors area, which will be on my nav bar and within the pages that I will need for the areas.
I made a sitemap next, which allowed me to discover how the user will apply for the course through my application. I thought that this was a very useful task as it allowed me to see the different important steps the user will take. I had different areas where the user could move back to another spot, such as if the user doesn't find the course that they like, they can go back and look at a different subject area. I also had this if the user doesn't like the lecture, which is important that they have a way to find a different course/lecture. This was a very good activity as it allowed me to think of possible paths that the user can take.
Starting with paper sketches, I drew out the home page, swiping course feature, courses - subjects, AI lecture, profile page, course - favourite, mentorships, messages and mentorship bios. I did some crazy 8s as it allowed me to think on the spot about different ideas, so I combined some of these designs to make these final designs. I also drew out the components that I needed to make so that it would be easier when I moved to Figma.
I also put these drawings into Figma and prototyped them so that i would be able to get an idea of how the drawing would connect and how the user would navigate through the designs. I thought this was very helpful as it showed me that I needed to have back buttons on most of the pages to make navigation smoother.
Screen Recording 2025-05-03 at 18.21.52.mov
These are some of my low-fidelity screens. They were quick to make, and I based them on the sketches I did before. I found them easier to do because I didn’t have to worry about colours or adding all the details like titles and text. I was more focused on the navigation and layout of the app, just making sure everything was in the right place. I wanted to make sure the app worked well before making it look nice. When I showed these to my classmates, they gave me good feedback and said they could understand what the app was meant to do, even though there wasn’t a lot of info on the screens yet. Lo-fi screens showed me how useful lo-fi screens are for planning things out and testing ideas early. But I think the most important part was sketching on paper first — that helped me figure out the layout before getting caught up in Figma and making it look good.
