Space jam mobile app

Project Goals

The goal was to create a series of Hi-fi app mockups of a project case study we had done on Space Jam’s website previously.

This was to test the skills that we learned in UI/UX Strategy 1 MDIA 2450 during term 2

Step 1: Low-Fi Wireframes & Paper Prototypes

My first step was to create sketches and low-fidelity wireframes for my proposal. Prior to this step, with the help of the pain points and journey map that we had created for the previous assignment, I was set to brainstorm and visualize the test prototype to ultimately address the pain points existing within the current design of our interface.

I started sketching the initial interface proposals before moving onto low-fidelity wireframes or roughs still done by hand. However, before I completely moved onto the next stages of creating the assets for the UI, I wanted to make sure what I was solid.

So from the low-fi wireframes that I sketched, I created paper prototypes of the UI which allowed me to physically move and make adjustments to the UI and get a better feel for my wireframes.

paper prototypes of an app

step 2: High-Fidelity Wireframes & App Mockup

My next step was to take my paper prototypes/low-fi wireframes and create high-fidelity versions of them. This process included the creation of the majority of the elements/icons that make up the interface.

Using high-fidelity wireframes help with the representation of the end product that could be used for the testing phase but based on our teacher’s requirement, we were to take this step further and create final mockup versions of our app/mobile interface using Photoshop.

Creating the high-fidelity mockups was the last phase before we entered the testing phase, so at that point, we should’ve created all the elements, icons, graphics and finished with our final touches.

high-fidelity wireframes

step 3: InvisionApp Testing

After finishing the mockups in Photoshop, it was time to test our interfaces using

Invision is a cloud-based digital product design platform that helps development professionals and businesses of all sizes create and manage prototypes. It allows users to collaborate, test, and experiment with designing templates and ideas on a digital dashboard.

So I uploaded my mockups to Invision and started creating interactivity for them so that my classmates could test my interfaces and make comments accordingly. This process was absolutely crucial for ensuring seamless functionality and performance.

View Invision testing.


final step: Post Feedback and Finalization

After receiving a great number of feedbacks both positive and negative on my interface, it was time to make adjustments and improve our UI even further before finalizing the project.

For the most part, the adjustment that had to be made were minor which is a good sign and with that, I started to make the last edit and finalize the project for submission.

final high-fidelity space jam mockup