Address: 2035 Sunset Lake Road, Suite B-2, Newark, 19702, Delaware, USA

The Awesome Clue : Mobile App Design & Development Journey

  • Home
  • Blog
  • The Awesome Clue : Mobile App Design & Development Journey
blog image

It is not like we wake up one day with a brilliant idea for a mobile app. If we are to explain it, it was more like we are forced or guided towards creating an experience. Frankly this wasn’t even exciting but more driven by necessity. In the end this was done for the amazement and the request of many of our followers.

The initial app is not even close to what we have in our drawing board, but it’s a good start. The bad part, though, is we have no clue how this will turn out to be. We know we need to do a lot of work, a lot of the right kind of work. Here we will be sharing what we have done and plan to do in building our mobile app for the Awesome Clue.

In case you are planning to develop your own mobile app, we hope this guide points you in the right direction. It’s been almost 10 months with the need to develop a mobile app, and through learning the hard way, we have divided our development process into 12 key steps.

  1. Ideation
  2. Research
  3. Mockups
  4. Technology
  5. Development
  6. Testing (Internal)
  7. User Testing (Controlled External)
  8. Launch Public Beta
  9. Documentation
  10. Launch
  11. Marketing
  12. Support

Step 1 : Ideation

It is always good that necessity be the driver of the ideation process, in short the application as a solution to a known problem. The Awesome Clue was a demo we created for an AI tech fair, a web application, limited to one social media network, Twitter. It was very well received with the people who have tried it, though the problem is people more often use the mobile than a desktop to access Awesome Clue. Without any marketing and promotion we get 30 to 50 unique visitors per day and on average 70% of them are mobile users (99% Android, 1% iPhone).

We took this as proof that the idea of a mobile app is worth investing time and effort. The first step itself had many more steps and did include.

  1. Defining the app objective, why do we want to build this mobile app or do we really need it for the business. Is the mobile app idea appropriate or a great fit, according to our audience needs. Last, do we have enough resources to build, promote and manage.
  2. This also includes defining the target Audience, our potential users and customers.
  3. Define the app’s Unique Selling Points (USP), what are the core features and appeal. Basically why should anybody use our app and how to differentiate the user’s experience.
  4. Do a competitive analysis, identifying competitors, similar applications. Clearly defining the differential factors.
  5. Resource consideration and investment, from development to maintenance require money, effort, and time. Are we ready to commit ourselves to the app idea, mostly into the long run.
  6. Rough idea of the app marketing, when and how to market the application clearly defining the promotional strategy for the first 1,000 users.

Step 2 : Research

All ideas need to be factually validated with mostly market research. As a matter of fact this is the most important step. Market research as surveys showed us the demand and interests of the users; accordingly, it also highlighted necessary modifications to the initial idea and gave us a clear list of requirements to prioritize the work.

In addition to surveys, open public feedbacks enabled us to;

  1. Understand the user’s actual needs.
  2. Grasp clarity on the competition and positioning.
  3. Identify pathways to reach our users.
  4. Identify potential business opportunities.
  5. Get a clear indication of the feature list against the user demands.

Step 3 : Mockups

Once the idea is polished, validated and ready, it’s time to put a shape to it, we did it with rough mockups. You can also start with a wireframe as a blueprint of your application. The important thing is to visually display the design of the app and functionality. Also, it helps to understand the look and feel of the application.

Mainly this step gives a practical vision to the theory for the team to follow and helps developers use this as a reference.

We did our first mockup on Marvel – Design & Build App and expanded it many times mostly using Pencil Project Prototyping. There are many tools that we considered, however as a startup our choices were limited to those that are freely available. Tools we considered using included, inVision, Balsamiq, Fluid UI, Proto.io, JustinMind and Figma.

As for building the mockup, on several trials we first mapped out the user flow and finalized it with several design sprints.

Step 4 : Technology

Once we knew what we were going to build, we decided on which technology to use and how to build it. There are two major platforms, Android and iPhone, with currently Android as our major user base. As for the use of technology there were three options available for us.

  1. Native app: using platform specific development language and tools, develop separate applications for both Android & iPhone.
  2. Cross-Platform/Hybrid App: One mobile application built on HTML5 which can run on multiple platforms.
  3. HTML5 Web App: Mobile optimized websites that appear to be like a native application and run on a webview or browser.

Since our current Awesome Clue web application is mobile friendly we choose to start with HTML5 web app using Flutter and slowly migrate it to a native app.

Step 5 : Development

This process involved actual coding and the materialisation of the application. This involved multiple activities, like setting up the development environment, developing various parts of the codes, emulator testing and building the mobile application for installation and testing.

Each project will require its own development configurations. Our project divided those into three aspects, the app back-end, APIs and app front-end. For Awesome Clue we already have developed our backend and APIs, so it was time to start coding on the front-end. The development was done in batches and each provided interim builds that we ran on various mobile and tablet devices.

Back-End/Server Technology

Back-end data stores and server side objects are critical components of providing various required functions, especially to be compliant to International privacy policies. Though our back-end was already done. The web application objects were also tested and future proofed at this stage.

Application Programming Interface

The API exposes the Artificial Intelligence part of the Awesome Clue, which was already developed for the web application. Though the code base had to be refactored considerably. The API also included specifications on how various components interacted with each other. Many changes were made to make this ready for channelled data input and output.

Mobile App Front-End

The front-end aka “client-side” is the public facing and interacting components. This implementation requires structure, design, animation and dictated the behavior of the mobile apps.

We are not specialized in mobile app development, so at several stages there were discussions of handing over the design to a third-party app development company or a freelance developer. In the end we decided to learn Flutter and Dart was an easy language to learn, and after we got our heads around asynchronous programming, various tutorials were enough as development starting blocks.

Step 6 : Internal Testing

To avoid major bugs it’s critical to run a code review process tied to the development stage before deployment. Given the small development cycle, we currently test the app manually, though we do have plains to automate part of these tasks.

Once we have an emulator based development tested for visual appeals and functionality, it’s time to conduct a final test of usability with colleagues and platform installations. This process usually highlights bugs that we overlooked in the development stages, and this is the stage we apply the final tweaks.

Step 7 : User Testing (Controlled Testing)

Mobile Application Testing

Review & Testing is not limited to coding alone, it needs to be included at all stages of the ideation, development to deployment cycles.

Functional testing:

Functional test, test to align the mobile app according to the selected industry requirements. The functional testing is conducted through these focus areas:

  1. Audience: Test if the app can be used, login, logout, etc.
  2. Business: Test if the app is usable for the built purpose.
  3. Channels: Test delivery of app, etc to App Store, Google Play, etc

Usability Testing:

This is to ensure that the app is usable to all users and generates the intended interface that acts according to our selected standards. This test confirms if it is a stable, easy-to-use and would the app actually attract users. Our usability of the app is scored by three criteria:

  1. Satisfaction
  2. Efficiency
  3. Effectiveness

UI (User Interface) testing:

User Interface testing ensures the mobile app’s graphical user interface meets all selected specifications.

Compatibility testing:

Compatibility/Configuration testing provides the optimal performance of the mobile app according to the device size, version, screen resolution, hardware, etc. moreover, compatibility testing takes care of:

  1. OS Configuration
  2. Browser Configuration
  3. Database Configuration
  4. Device Configuration
  5. Network Configuration

Performance testing:

Performance testing ensures the mobile application reaction and consistency under a specific workload. Our performance testing includes:

  1. Load Testing
  2. Stress Testing
  3. Stability Testing
  4. Volume Testing
  5. Concurrency testing

Security testing:

Security testing process validates the security concern of the mobile app. Also, it checks the risks of mobile app hackers, viruses, protection, and unauthorized access to all the sensitive data.

Certification testing:

Certification testing processes ensure the mobile app meets the selected standards, licensing agreements, terms of use, and all the requirements of Google Play & App Store.

Step 8 : Launch Public Beta

A beta version of the application usually brings early adopters, which is an important step in taking the mobile app to mainstream and providing them life long incentives. From our web application we have found that the early adopters provide a lot of beneficial feedback about pros and cons. And their experience and rating is a guide to understand the acceptance of the app and the demand as well. This type of word-of-mouth marketing for the mobile app bolster reputation, and help to acquire even more users.

Step 9 : Documentation

Documentation comes first, at all stages, though it starts to shape out at this stage and this is the stage where it becomes preparatory and confidential. Any documentations done prior to this stage include details like screen layouts, navigational charts, and other important aspects that are obscure on the design. From here on we need to check all the core and initial features for completeness and irregularities. In this phase, we find out all the issues and resolve them before the app development ends and fine tune the project for release.

  • Internal documentations
  • Internal configurations
  • Internal knowledge base
  • Customer documentation (https://clue.utotoai.com/docs)
  • Frequently asked questions

As of this writing the Awesome Clue is not officially launched because we have yet to fully complete this step to our satisfaction.

Step 10 : Launch

We have launched an app for internal use, DevOps, an mobile application just to learn and get a hang of this step. So once the mobile app is ready for launch, we know the steps we have to follow to submit the app to both the Google Play Store and Apple Store.

Step 11 : Marketing

After launching the mobile app, the next and crucial step is marketing it. If people don’t get to know about the app, then there is no chance of downloading. To spread the app and convince people to install it, we need to make attractive and informative graphics & videos that show the app’s functionality.

In the past, for clients, we have successfully used social media for mobile application promotion. For a mobile application it totally makes sense to use all digital platforms to reach every corner of the world. Just delivering people a glimpse of the app and highlighting key features simplify the decision process of the user.

As a research based startup, we want to explore creative ways we can go about this stage and will share our future findings

Step 12 : Support

We are no expert in support services either but we believe our responsibilities do not end when an application has been created and launched. We have to clearly offer support and maintenance solutions for the mobile application users.

Right now we don’t even have a dedicated support and maintenance team. Though we have in the past for clients provided support services, including:

  1. Attending to Customer Queries
  2. Automation by Integration
  3. Support Staff Training

We will share more details and our learnings as we go along, stay tuned.

Conclusion

The mobile application development process is both exciting and exhausting. But, it is worthwhile if done in the right manner. We have shown the sequential step by step process we followed, but do remember you do not have to follow it as it is. These can be applied in varying orders that seems fit but we believe all these steps are required in some form or another.

Thank you for taking the time to read this and if you have any doubt, question or want to know anything in detail, do get in touch.

Happy building and Keep building

Leave a Reply

Your email address will not be published. Required fields are marked *