Omnis App Mockup

Project Goals

The goal was to create a series of Hi-fi app mockups of a fictitious company we had created for our group project.

This was to test the skills that we learned in UI/UX as well as Project Management during 2nd term.

Step 1: Sketches & Low-Fi Wireframes

Our first step was to create sketches and low-fidelity wireframes for our proposal. Prior to this step, I had designed the logo while my teammate worked on the style guide that ultimately helped create the visual identity of our company. So, with the help of the style guide and the logo, we were set to brainstorm and visualize the prototype for our productivity app.

Before moving onto high-fidelity wireframes, we started to sketch and created low-fidelity wireframes to help better visualize our end goal and test our ideas.

low fidelity wireframes

step 2: High-Fidelity Wireframes & App Mockup

Our next step was to take our low-fi wireframes and create high-fidelity versions of them. This process included the creation of most of the elements/icons that make up the interface, as well as include features that we brainstormed as a team during our initial app pitch.

Using high-fidelity wireframes help with the representation of the end product which allowed us to move onto the next step of creating final mockup versions of our mobile app interface using Photoshop.

high-fidelity wireframes

step 3: InvisionApp Testing

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

Invision allowed us to collaborate, test, and experiment with designing templates and ideas on a digital dashboard.

Once we uploaded our mockups to Invision and started creating interactivity for them it was time to share the prototype with a few of our classmates for feedback and better improve our app before finalizing it.

View Invision testing.

Invision app testing

final step: Post Feedback and Finalization

With the help of the feedback received from our classmates and team members, we made minor adjustments to the implementation of our branding into the app, as well as minor changes to icons used before finalizing the project for submission and presentation.

Overall, this was a very successful group project as a whole and we received honors grading for it.

high-fidelity wireframes