Beauty Me - A Case study for Mobile-first App
We are just finishing our latest project – Beauty Me, and now we want to share the concept of app, as well as flow and technology we used from begining day to release as a case study for mobile-first app. It took us about 2 months to complete the project for customer, and now we are happy to annouce that we will have a series of development post about this project, from the beginning like idea, requirement, mockup, wireframe to design, development, adapt new technology and solving problems.
In this first post, we will tell you the idea, and how did we prepare plan to make everything work.
When it comes with idea, we want to make an app that act like a social network, which focus on beauty and spa places for user. We know that many similar apps and services are out there, so we want to create an unified experience, strongly focused on discovering based on user location, searching as well as giving rate/review about places. Then users have their own habbits, some people want a specific shampoo, some others like German style for their hairs, and not every places can provide anything, so in addition to basic information like opening – closing hours, price range, hotline, address, etc. each places can have a chance to show off everything they use like different products or technology, or special services.
Okay, now we have an idea and are ready to make something upon. We give it a codename for easier management. Because it is just a codename, you don’t have to think how it will affect marketing and content afterward. You can change it when release if you want very easily.
We write a short description about the app, as well as needed technology to create it:
Beauty Me, is a project which allow users to discover, view and share about beauty spa and places all around their places. This app should have a version on Android, as well as iOS, support for administration through a CMS and uses REST-based web-service for mobile apps to post and retrieve data.
Keep in mind that, this description will guide you and your development team throughout processes. You should not pay attention to any other, except it is listed inside description like: may I make a version on Windows Phone? Should we create a web-version for app? etc. Just don’t. You will have a chance to create all those things after you had finished. Stick with initial idea and do it by your best. You really want to craft an iPhone app? Good, do it, by don’t bother mind to ask yourself: Should I make an Android version as well? Those types of idea come up everyday, and don’t let it blur you main idea.
Our Team
Our team consisting 4 members, 1 for Android, 1 for iOS, 1 for designing and 1 for backend-related. Then we have specific role for everybody in this project. We create a plan with general deadline, then split into smaller task until every tasks can be completed in 1-2 day.
Now we give the deadline for project is 2 months. My personal idea is, we will need time to discuss about core concept, feature details, drawing mockup, designing user interface. This should be less than 2 week. After this phase is completed, we have a overall as well as details view about every aspect of project. And almost features will not change, except some minor details. All 4 of us will give idea and draw mockup to find out the best UX and flow. After we have agreed with each others about the mockup, then we will write a details description of a feature, with its own mockup screen. For example: we place login screen mockup with details description about how can user enter this screen, how can user perform logging in, meaning of each elements in screen, and how we can show loading indicator? This give the designer chance to prepare for developer needed assets. Also we can start development without depending on progress of UI design.
Next phase should be design, it includes UI design, model design, database design and architecture design. We have 1 week for those task as we can split up each task for each one in our team. The designer should create user interface using Sketch for vetor-based assets. The developers will discuss and give conclusion about modeling, because we understand that if we use same modeling design on both server and client side, then we will reduce almost time needed for data parsing when sending and receiving via web service. Then the server guy will create database schema, create ORM on server-side, the Android guy will create Java object and the iOS guy will create appropriate Swift object. All are ready for message transfering.
In next post, we will give you about plan of us for next two phases: development and integrating/testing. And we will go for details of creating mockup for project.