OK! So I am thinking about this app that I want to build... I know that my target audience are architects, interior designers and people renovating their homes.

My client is Metrie (http://www.metrie.com), they sell lots of mouldings and doors at stores like The Home Depot and Lowe's hardware stores.

I want to inspire and educate people about Metrie doors and give them a creative tool that will help them make smart design choices for their interior design. I know that often it is hard to imagine what a space will look like when it is finished, so maybe this app could be a cool way to overlay my clients finished products over a real space using the mobile phone's camera feature.

So my Big Idea is to build a design inspiration Door mobile app tool.

The main feature or purpose of the app is that I want to be able to overlay Metrie doors into a real space, take a picture and then share that image.

Now that I have thought about my target audience, know my concept and big idea, it's time to start sketching a sitemap:

Metrie Door App - image 1 - student project

At the same time that I am sketching out the sitemap, I am sketching some key user flows (how I want people to move through the app:

Metrie Door App - image 2 - student project

I used an application called Axure to make the sitemap, flows and wireframes, you could do all of this on paper, using sticky notes or other vector drawing applications such as Adobe Illustrator. Now that I have the app sitemap architecture and a basic flow layed out (this took multiple rounds of sketching and changes), I sketch out the wireframes individual screens:

Metrie Door App - image 3 - student project

Notice how the "product details" screen, third from the left is a long page that is more than one screen in height — later I will make this a scrolling page, so in the wireframe I just make it go as tall as it needs to.

At the same time, I am using Adobe Photoshop to design all the elements, buttons and icons that I want in my prototype. This is an extra step that you don't necessarily need for the prototype. Axure has plenty of buttons, and icons could be represented by shapes. Here is the page I made in Axure that I use to store all the elements that I use in the app:

Metrie Door App - image 4 - student project

Here is a Photoshop page with some sketches of icons that I want to use in the app:

Metrie Door App - image 5 - student project

Now to bring all of the components together! In Flinto I bring in all of the wireframe screens and button elements, doors, etc. I link all of the screens, buttons and create transitions and animations:

Metrie Door App - image 6 - student project

I can preview the app in screen:

Metrie Door App - image 7 - student project

I have made a bunch of adjustments, tested all the links and now I am ready to share the prototype!

Metrie Door App - image 8 - student project

And voila! The link appears on my phone, I have the Flinto app downloaded already to my iPhone and now I can click and swipe through my app prototype:

Metrie Door App - image 9 - student project

Ronnie Peters

Founder and CEO at 360 Design

665

190

Company

Community

Teaching

Mobile

Company

Community

Teaching