#BuildAnAppIn1Week

Day 1 : Let’s shape the app!

7 min readJun 4, 2014

This post is the second part of a global story that relates how we #BuildAnAppInOneWeek. If you haven’t done it yet, please read the first post here : http://www.pikichat.com/full_story.html

Here we are, the first day of our adventure. The real work starts here, and there is still a lot to do before having the first version of our app.

In this post we’re going to tackle these first steps that are necessary to work on before starting to really code the app : what do you put in the app? (the scope) and what will it look like? (User Experience and User Interface). These steps are essential because they will decide what the app will look like in one week. If you start coding without having go through them you will loose lots of time going back and forth.

What do we put inside the app?

Before starting to design the app or even code it you need to have a good idea of what you put inside or not. And the most difficult part is probably what you don’t integrate in the app.
Simplicity was our main goal. We know how important it is for a mobile app to do only one thing but do it incredibly well and deadly simply!

Simplicity is the ultimate sophistication — Steve Jobs

Our goal was to create an app that would make VERY easy and fun to share photos with a group of friends and interact on it.
We ended up with an app structure that would allow to :

Signup with your Facebook account
Create a group of friends
Add a photo in a group
Only one photo would be available per group, which means that if someone else in the group add another photo, the previous one disappears. This part is really important in order to have an app really simple to use (e.g : No infinite scroll on a feed).
Allow members of a group to comment the group’s photo.
And finally let a member add a photo without other members of the group being able to know who added it : the “incognito” mode. A funny way to bring interactions in a group and that allow you to post pic that you probably would not post within your name ☺

And of course there were lots of other stuff that we wanted to add because we thought that it could be pretty cool! But it would also be harder and longer to integrate and above all, it would make the app more complex. So we decided that for the first version of the app it wouldn’t be necessary. Maybe we were wrong for some of them, but we needed to make choices!

Integrate some filters
Let other members be aware when one of the members has seen the photo
Let people add videos
Create public groups where only the admins would be able to add photos
Give the possibility to draw on the photos
Sign Up with a phone number
Android version (the first version of PikiChat will only be available on iOS)

What will it look like?

Now that we know what will be inside the app we can start designing it. But before even starting to put some beautiful colors on it, we need to have a good idea of the user experience. It’s maybe even more important and more difficult to build than the UI (user interface which is more the beauty of the app than the usage).

User Experience Patterns

In order to build a great user experience, the best way is to be used with mobile usages and to know all the specificities of a platform, in our case iOS.
But you can also get inspiration from great websites where you’ll have access to all kind of patterns from many different apps :

pttrns is a great place to find ideas of user interface and experience

Mockups

Thanks to these resources and to your own experience you can start drawing some mockups. Plenty of differents tools exists to draw mockups, these are the ones that we used for this project :

White papers and you own pen : cheap and easy to use!
POP (https://popapp.in) . It is a great solution to test your mockups on your phone : you take photos of your mockups, then you link each mockups in order to test interactions.

Don’t be afraid to make many differents iterations of your mockups. It is really important for the future of your product. User experience is the key to have a product easy to use and where all the features that you have built are understandable by your users.

Design

Finally, when you know what the structure of your app is, you can make it beautiful (I mean at least for you, or even more important for your target, which for our app are boys and girls between 14 and 20, even if we hope to have plenty users of other ages!).

To design the user interface of Pikichat we used Sketch (http://bohemiancoding.com/sketch/) . Sketch is a very powerful and easy to use design software. The last release brings a lot for mobile design which is perfect in our case. For example thanks to their mobile app you can test your design on your device in real time!

Even for a simple app you have plenty of screens to design!

During this design phase we decided not to choose one main colors, but six! We thought it would be cool to be a able to choose your main color depending on your group, and then all the app appearance would change depending in which group you are!

Many other stuffs on which you shouldn’t spend too much times!

There are still plenty of things that you have to do when starting to build an app. But there are stuff on which you shouldn’t loos your time!

Choose a name for your app : you always want the best name, the one that anyone will remember, the one that will be easy to say, easy to remember, the one that will fit in a Techcrunch article title, etc. But it is not the name that will bring people to use your product! So find a name that you like, see if there is not an app with the same name (except if you are Facebook and you absolutely want to call your app Paper even if an other app already have this name!), and if you can find an available domain name for it. That’s it! We decided to take 1 hour to find a name (and a domain name). At the end of the time we had to choose one. We try hundreds of name with keywords “Picture”, “chat”, “photo”, “groups”, “friends”. We found the first part “Piki” for “Picture It’ and only add Chat at the end — > Pikichat
Book your domain name : if you have found one that is available it will be really fast. You can use platforms like GoDaddy for example or many others. Our tips : Google “GoDaddy” then you’ll find special offer to register your domain with a discount.
Create an Apple Developer account : you will need it to start developing your app and to post it on the Apple store. It shouldn’t take you to much time, but it will cost you 99$ ☹

Sum Up : The tools used to shape the app

Get ideas about app patterns with PATTRNS : www.pattrns.com. A great website with lots of different example of user experiences ordered by type of screen : login, comments, camera, news feed, etc.
Bring life to your mockup with POP : https://popapp.in. Draw your mockups on a piece of paper and then take pitctures of them and finally POP offers you an easy way to tests interactions between them, almost like if you had your final app in your hands!

Design your app with SKETCH : http://bohemiancoding.com/sketch/. A very powerful and easy to use design software. The last version is very mobile design oriented and give your the possibility to live test your design on your phone (very useful to see that a button is too small!)

Find a free domain name and book it with GoDaddy :http://www.godaddy.com.
The mandatory tool : member center of Apple(https://developer.apple.com) to buy a developer account and later publish your app.

Next step : Let’s code the app!

In our next post we will cover from day 2 to day 6 with the core of the app developement. We’re going to give you all the tools and the steps that were necessary in order to give birth to Pikichat!

So stay connected with us on Twitter or Facebook in order to be aware when the next post will be out!

Full Story available here : http://www.pikichat.com/full_story.html