Enhanced Mobile Design

How to create an enhanced mobile comp

Receiving the Jira Task 

Upon receiving a task for an enhanced mobile, there will also be a wireframe available to use as a point of reference. The wireframe will come complete with notes highlighted in yellow. Pay close attention to the yellow notes as they contain key details to the mobile design. Let's review Oak Creek as an example.

mobilewireframe

 

Building an advanced mobile comp in Adobe XD

Within the master file, there is a standard mobile artboard that can be used as the foundation to build the advanced mobile design; start there.

basicmobiletemplate

While creating the design be sure to capture the same mood & feel of the approved homepage.

mobilehomepage

Uploading to Invision App

In invision there will be a hot pink plus icon that creates new prototypes near the top right of the browser. 

addprototype

Choose a project type.

createnewprototype

Create a mobile prototype. Android or iphone. Name your project after the client's name. For example: "Oak Creek WI - Enhanced Mobile"

mobileprototype

Once the design has been completed, export and upload the files to the new mobile project previously created within invision. Apply the the menu interaction and double click the image to test and ensure that the interaction is working. Share the invision and box link location to the Jira task.