Mockups and Prototypes

25th April 2017Maria Bobkova Leave a comment

App product teams need mockups to present their vision and views of the final product and that is why here, in NaviGap, we use top tools to present best UI solutions.

In this post, we will present our mobile screen mockups to show the basic functions of our outlined scope.

Why prototype

No secret, that there is no perfect User Interface which will be explicit, intuitive and efficient for all users. However, close to perfect is possible and achievable with countless efforts, many hours of work and constant improvement. Thinking and interacting with your app just like your user is the key. A prototype is not a final product, it is the field for improvement and work. It starts with simple sketches and gets augmented by adding features, links, interactions, design improvements on its way to perfection. Prototypes allow prototypes allow us to test the feasibility and usability of our designs before we actually begin writing code. They allow to actually test and play with various user interactions scenarios.

Imagine

Sketching an app helps to ‘feel’ the actual thing and maximise ideas if only on the paper. Various techniques from pencil sketches to post-it notes dashboard can be used. We used a simple sketch to get the whole picture and then moved to available prototype tools to implement click-throughs interaction.

mock

Figure 1. A sketch of what we wanted

Click-Throughs

Then, we used JustinMind software to build our prototype and show our user interactions with it.

Here is the basic interaction map:

Figure 2. Interaction map

Figures 3-6 show the initial set of Navigap screens simulated on iOS. Interactions are listed according to user action and marked with blue circles.

Figure 3. ‘Main_screen_feed’. Main screen with latest expert feed

Interactions:

4 on Click: goes to ‘Q&A_with_experts’ with effect: pop

5 on Toggle: goes to ‘Location_on_map’

6 on Click: goes to ‘Expert_story’

7 on Click: goes to ‘Expert_story’

8 on Toggle: goes to ‘Location_on_map’

9 on Click: goes to ‘Q&A_with_experts’ with effect: pop

Figure 4. Q&A_with_experts. Interaction with expert users

Interactions:

2 on Click: goes to ‘Main_screen_feed’

Figure 5. Expert_story. Extended travel story of an expert user

Interactions:

1 on Click: goes to ‘Main_screen_feed’

Figure 5. Location_on_map. Extended map of chosen destination

Interactions:

1 on Click: goes to ‘Main_screen_feed’

The interactive simulation can be accessed via the link: https://www.justinmind.com/usernote/tests/25458829/25462335/25465092/index.html

Final thoughts

We understand that our highest priority is the user and making their experience pleasant and fun in lines with our goals is a challenge. However, using different approaches, tools and techniques to reach the ultimate App prototype is something we take seriously within our team.

Agile versus Waterfall

25th March 201728th April 2017Maria Bobkova Leave a comment

Figure 1. How Projects Really Work

In this post, we would like to discuss how we envision our development process philosophy and which approach we plan to use. As can be seen in Fig.1, the vision of a project is not always the same (~~completely different~~) to its final release. Thus, it is very important to choose the appropriate development strategy and stick to it during the project’s lifecycle to deliver the best solutions.

Different approaches

In the case of web development process, there are generally two approaches: waterfall and agile. What are the main differences between them?

Waterfall process is when each part of the project is done sequentially by a team member and passed along the assembly line after the part is finished.
Agile process is a simultaneous working approach when each member of a team contributes to the project in the same time frame.

In short, here is a simple explanation of both:

Video 1. Workflows: Agile vs. Waterfall

After considering the pros and cons of given approaches, we chose the agile model for the following reasons:

Short iterations (time frames) of development work mean fast delivery and constant up-to-date with current issues. Our product is for young and innovative people and we need fast solutions for emerging problems, and small increments of work provide convenient development pace for our product.
Our small team has representatives from all stakeholders, so conducting Scrum meetings would be an efficient collaborative process where interests from each side are not neglected.
Feedback is prompt and corresponds with each iteration directly.

Q. How does it work on a daily basis?

A. Scrum Power!

Video 2. Short explanation how Scrums work

We will be using the Scrum Agile methodology as it has proved to be effective and applicable to various project types.

Basically, each of our sprints (a specialized term for iterations) will consist of several steps:

A product owner –> creates –> a to-do list with noted priorities which is a product backlog.
The team –>takes–> a small piece of that to-do list from the top, and discusses implementation.
Our sprints –>last–> 3 to 4 weeks to complete that piece.
Meanwhile, the team—> has –> daily scrum meetings to discuss and assess the progress of work to be done.
The ScrumMaster —>is–> the master brain behind those organised scrum meetings. They keep the team aligned and focused on the goals.
Each sprint —>ends —> with a deliverable product, thus showing an achieved goal to a stakeholder.
A sprint review and retrospective —> complete the cycle of each sprint and maximise the feedback effect in order to improve a next sprint delivery.
A new chunk of backlog is taken into work and the iteration cycle starts from Step 1.

In our vision, Scrum is a flexible and efficient web project management framework which enables the team to react more quickly and respond more accurately to the arising issues. Scrum’s holistic nature minimizes marginal risks and allows our App product to adapt to changes just in the right time.

NaviGap UML diagrams

24th March 201724th March 2017Maria Bobkova Leave a comment

In this part, we will talk about our development model views described in Unified Modelling Language. UML is a language which we will apply to describe use cases meaning the interactions of an actor (user) and a system to achieve certain goals. This is an in-between process: after we gathered all requirements and shaped our agenda and before we actually started coding.

Our app users

In previous posts, we identified our user personas. Now we can proceed and implement those personas into our interaction use cases. It helps us to identify the functionalities we want to offer to them. We don’t have to cover now the scenario of a registered or authenticated user, but we will treat as a seperate diagram.

Our app functionalities

Now we identify general functional blocks we offer for the actors (personas) aligned with activities they perform.

The First Persona is identified as a novice who comes for social value and expert advice. is clearly interested in

The Second Persona is an expert who was a novice at the beginning, but after a certain amount of contribution (posts, advice, photos etc.) became an expert (high degree of centrality) and can provide help/advice/guidance to novices.

Finally, the Third Persona is a commercial partner type of user who is interested in business add-on value.

Three iterations are needed to reach the outlined use case scope.

Figure 1. Use Case Diagram: NaviGap interaction

At this point, we can augment the Persona 1 case by expanding each functionality. For example, ‘Seek travel inspiration’ functionality:

Figure 2. Use Case Diagram: Augmented functionality

Through each augmentation iteration, we ask ourselves: is it enough? have we listed all possible functionalities that we can release? Step by step we will augment our UML layout and add blocks to each functionality. After each functionality has a detailed list of sub-functionalities we can look at it critically and think of additional features that will give us a competitive edge.

Our app communication diagram

As an example of UML communication diagram, we show the scenario when a user wants to login into their account. That provides a model-view-controller perspective of interaction.

Figure 3. Communication Diagram: Login

Our app state diagram

State diagrams can be seen as the essence of object-oriented programming (OOP). Those diagrams are good when we want to describe the behavior of a single object. In general, those diagrams define various states of an object during its life cycle.

A state diagram represents the actual changes in state, not the particular processes/commands creating those changes.

Figure 4. State Diagram: Novice User object

Why we need all those diagrams?

We assume that our team should have a clear understanding how the users interact with the App, what functionalities we are planning to offer to them and in what way they can access them. Overall, each diagram builds up a clear understanding of what is expected from the app, what role the users and other actors play in it, and helps to shape the outline of the UI design.

Model-View-Controller framework

20th March 201720th March 2017Maria Bobkova Leave a comment

When choosing a system architecture design framework for our app, we picked the Model-View-Controller model and we will explain the reasons behind that.

Historically MVC was the earliest example of Graphical User Interface design approaches since its introduction by Trygve Reenskaug MVC into Smalltalk. It solved the problem of user control over large data sets. The idea was to create an illusion for the user that they control the data domain.

Screen Shot 2017-03-20 at 10.53.53

Figure 1. The original concept behind MVC

Although originally developed for desktop software, MVC became largely popular for web/mobile applications architecture design.

What does MVC mean?

Model is the knowledge domain.

View is the visual representation of the model.

Controller is the link between a user and the system. Provides means for user input and produces means for user output.

MVC-basic

Figure 2. Basic MVC interaction diagram

This structure splits the architecture of an app into three interconnected parts, so that the internal representation of information and user representation of information can be separated.

For example, we can look at the Web from the MVC point of view. The model is HTML that communicates the knowledge to a user. The view is a CSS that makes the information readable and nicely represented. The controller is a browser that renders the HTML and CSS and produces an output and translates the user input into script code. From the evident statistics of the Web usage, we can conclude the MVC model works fine.

The pros of MVC

Simultaneous development. Because the components are separated, different teams can work with different components of an app without blocking the work of others. For example, development can be divided into back-end and front-end, whereas the latter do not need the server-side data structure to design the user interface and vice versa.
Reuse. Again, because of independent components, the components code can be easily reused in other applications.
Multiple views of a model. New features and business entities can easily fit into an existing pattern.

The cons of MVC

Learning different techniques. Developers have to be skilled in different technologies and multiple coding techniques.
Complex design pattern. Although the main concept is quite straight-forward, the structure of each component can get very bulky and complex.

We conclude that the MVC design pattern is aligned with our design and development core.

Screen Shot 2017-03-20 at 10.47.26

Figure 3. The NaviGap MVC design pattern

We have chosen to use Django python web framework because it is open-source, free and is targeted at highly-loaded database-driven applications. Django web framework is viewed as an MVC architecture. The Model is an object-relational mapper assisting connection between data python classes and a relational database. The View is a system processing HTTP requests and the Controller is the URL dispatcher. Also, we will be using AngularJs to extend the capabilities of declaring dynamic views in our mobile app.

In short, we have a layout of planned works to be done.

Process plan:

Building RestServices using Django & DjangoRestFramework
Building MobileApp
Integration of AngularJS and Webservices
Deployment

Using open-source frameworks and environments not only reduces our costs of production, but provides opportunities for collaboration, and expertise from the developers’ community.

Personas

18th March 2017Maria Bobkova Leave a comment

33214467092_6b7ddb717a_o

We have outlined in detail our goals and incentives, and especially mentioned our focus on the user, so now it is reasonable to prepare persona portraits to encapsulate our typical audience representatives.

In any platform development and design, it is necessary to think about who, how and why will use your product. Taking into account habits, wishes, concerns of our personas will drive the design vision and functionality of our app. We take into consideration the ‘use activity’ in order to compile our development requirements.

Behind our user interface is the understanding of real-life interfaces to support the process of traveling. We believe in a niche targeted approach so that best suitable scenarios fit a prefixed user group of a certain type.

In their academic research Viana G., Robert JM. (2016) give a definition for personas: they “are “hypothetical archetypes of actual users through which designers can develop a precise description of [the] user and what he wishes to accomplish”. In their paper, they conclude that building personas is helpful for designers to visualise and summarise functionalities and features of a product that is to be developed. Although, they note that it should be done in conjunction with real user usability testing. That said, our persona portraits represent a concentrated view from different angles of our potential users.

Our personas were generated from the thorough review of forums and related social networks followed by classification and critical analysis.

First, we brainstormed persona types and came up with three portraits: an undergraduate first-year student (18-22), a mature student (22-25) and a commercial partner. Our user experience team talked to representatives of these user groups (at university, book stores) acquiring tons of data and identifying motivations, worries, past experience, characteristics, and needs.

Second, our team collectively gathered, sorted out, systemised and classified all the data to produce objective portraits with a rich description of each persona.

Here are the results:

Screen Shot 2017-03-18 at 15.00.56

We hope that such user-centric design will elevate our product value to the highest level.

All images are used under CC license.

NaviGap-A Brief Overview of Legal Obligations

15th March 201718th March 2017amy Leave a comment

There are numerous laws that an app creator/developer must be aware of and we will take our legal obligations seriously, here are just a few ways we recognise our duties.

I Data Protection

UK data protection law will change on 25 May 2018. This is because of the introduction of the EU General Data Protection Regulation (GDPR). This regulation will replace the Data Protection Act 1998 in the UK. NaviGap is aware of this change in legislation and will do everything that is needed in order to comply with its data protection obligations.

Awareness of our obligations in regard to controlling data and the processing of data.
Only collect data that is necessary to what the app concerns.
We will only store users personal data for as long as it is needed and not for any longer than necessary.
We will inform users about how there personal data will be used, collected, stored.
Any written communication received for a copy of a user’s personal data will be answered.
Review and update compliance measures in light og the new regulation.
Be transparent and fair in Privacy Policy and other contracts (Consumer Rights Act 2015)

II Privacy and Marketing

We will uphold user’s privacy from the very start of the development process of the app.
Not send unsolicited messages unless we have consent from our users.
Will not ask users to pass on marketing to others, unless consent.
Privacy and Electronic Communications Regulations 2011
We will develop a privacy policy that is transparent and that is accurate to what we will do and how we will comply with the law. This will disclose the handling of personal data: collection, storage etc.

NaviGap (we) are dedicated to protecting and ensuring your privacy.

SCOPE OF POLICY

This policy (together with our end-user licence agreement as set out at [WEB ADDRESS OF EULA] (EULA) and any additional terms of use incorporated by reference into the EULA, together our Terms of Use) applies to your use of:

NaviGap mobile application software (App) once you have downloaded or streamed a copy of the App onto your mobile telephone or handheld device (Device).

Any of the services accessible through the App (Services) that are available on the App Site.

This policy sets out how any personal data we collect from you, or that you have provided to us, will be processed by us. Please read the following in order to appreciate how we will use your personal data.

USER DATA COLLECTION

1.1 We will collect and process data about you:

This is information you give us about you when prompted on the App or by corresponding with us (e.g. email). It also includes information when you register to use the App, make an in-App purchase, share data in the App, [ ANY OTHER ACTIVITIES COMMONLY CARRIED OUT IN CONNECTION WITH AN APP] and when you report a problem with an App or a complaint.

1. 2 If you contact us for any reason, We will keep a record of that correspondence. The information you give us may include your name, e-mail address, home address and phone number, the Device’s phone number, age, username, password and other registration information, billing information [OTHER INFORMATION ASSOCIATED WITH AN APP]

1.3 Information can also be collected automatically. A lot of information can be collected when using the App, including:

technical information, including [the type of mobile device you use,] [a unique device identifier (for example, your Device’s IMEI number [OTHER INFORMATION USUALLy ASSOCIATED WITH AN APP]

Device Information;

Information stored on your Device that will be used by the App, including: contact information, friends lists, user login information, media such as photos and videos, [OTHER INFORMATION]

USER MARKETING RIGHTS

You have the right to ask us not to process your personal data for marketing purposes. We will usually inform you (before collecting your data) if We intend to use your data for such purposes or if We intend to disclose your information to any third party for such purposes. You can exercise your right to prevent such processing by checking certain boxes on the forms We use to collect your data. You can also exercise the right at any time by contacting us at [[ADDRESS] OR [E-MAIL ADDRESS]].

ACCESS TO INFORMATION

The Data Protection Act 1998 gives you the right to access the information held on you. Your right of access can be exercised in accordance with that Act.

III Intellectual Property

This is a big area, and all of these issues must be taken in to account.

We will endeavor to protect our own IP rights whilst making sure we do not infringe 3^rd party rights or the rights of our users. A few points to consider:

May qualify for copyright protection for our app, original creative works-written/artistic works, including any original code and content.
The app’s name may qualify for trademark protection, if it is distinctive enough-App name, logo etc., presenting the commercial side. Patents- protect novel inventions and processes.
Determine whether a license is needed for certain uses.
Aware of a Sui Generis right for databases (Copyright and Rights in Databases Regulations 1997).
Not use any third party content, without express consent.
Document and be aware of all user-generated content (App terms and conditions).
Think about registering in other territories-brand expansion.

IV User Added Content

In order to protect the user and to prevent liability we will look closely at user added content. As the App looks to take on a social media role, there will be a lot of user added content, which might give rise to liability, it is important to minimise this risk.

User added content can: infringe others rights, be unlawful, defamatory etc. In order to best tackle this, the decision will be to moderate or not to moderate. The App will not be actively moderating content (to avoid liability) but when we are aware of it we will have a system for flagging up content that is deemed to be at risk. This will then be removed by the enforcement of a takedown policy, in the form of a link such as, (report abuse).

V App Use in Other Countries

Another issue to be concerned with as the App develops is compliance with laws in other jurisdictions. This can be for marketing and for use purposes. As the Web facilitates the ease of dealing internationally, an App is more than likely going to move in a direction to be used in other countries and not just the UK. For our App this is a target for us to reach in order to reach the most consumers and to then be able to give the best experience and options to our users. However, this must be done carefully or the App can infringe other laws in other countries, e.g. especially in regard to data protection where the law differs greatly from the US.

All in all there is a lot to consider here, and this is only a brief overview. We are aware of our obligations when dealing with the App itself and also our obligations to the user. These measures will continually be reviewed, and we will seek to protect information at all costs.

https://ico.org.uk/media/for-organisations/documents/1596/privacy-in-mobile-apps-dp-guidance.pdf

https://www.wrighthassall.co.uk/knowledge/legal-articles/2015/11/23/legal-issues-independent-games-developers/

To get up to date with the GDPR – https://ico.org.uk/for-organisations/data-protection-reform/overview-of-the-gdpr/introduction/

Competitive Analysis

13th March 20172nd May 2017Rachel Hamilton Leave a comment

Competitive Analysis

In designing this App, JAMR carried out a competitive analysis of the market as part of risk mitigation and identifying a gap in the market, in order to get a solid footing in the market and prepare for expansion.

Defining the Competition

The first step was to define the competition; any app that is providing a similar service to NaviGap. This was carried out by a search engine queries and App store search, using keywords specific to our app and the word ‘app’ in the search terms. For example: ‘travel app’, ‘gap year app’, ‘travel community app’, ‘travel planning app’ and then compiling a list of competitors.

17269665_10154835147706858_681245025_o

Compare Products

Comparing our product to the competitors and by understanding our competitors, their product and market advantages will ensure we don’t end up going head-to-head with a competitor on their strong points. We identified every product feature that each of our competitors offers and then looked at their web-presence by searching the URL on Alexa to view their visitor traffic ranking. Their social presence was identified by pasting their social media URL’s into the Wildfire monitor page and getting a preview of their social media presence.

Value

Researching what value our competitors are offering and what value is unique is an important facet of competition. There are generally certain value offerings that are an expectation of customers within an industry such as being ‘bug-free’, therefore we are only interested in the unique value offered. Don’t use these as our ‘point of difference’.

SWOT analysis

A SWOT analysis is the breakdown of our competitors perceived strengths, weaknesses, and what opportunities that this creates for us and what potential threats are presented. Using this information allows us to create something that’s unique in its own right. When looking at the competitor apps, we asked ourselves the following questions:

Strengths

What advantages does their application have?
What do they do well?
What other strengths do they have?

Weaknesses

What could they improve?
What should they avoid?
What are people in the market likely to see as a weakness?
What other weaknesses do they have?

Opportunities

What opportunities can you spot that they should be taking advantage of?
What interesting trends are you aware of that they may not have noticed?
What other opportunities can you spot?

Threats

What obstacles do they face?
What are they doing that could pose a threat to your business?
Is changing technology threatening their position?
Could any of their weaknesses seriously threaten their business?
What other threats can you identify?

App Store Ratings

This data tells us whether or not our competitors have a good track record with their users. It allows us to identify opportunities for development and features based on users requests and complaints and generates a target audience ‘needs’ analysis and allows us to offer the audience what they want.

The Competitors identified using the above steps fall into 5 general categories of travel apps and are as follows:

Booking apps: Apps enabling users to book travel and/or accommodation.

Skyscanner
Expedia
Airbnb
Travel republic
Couch Surfer – find low budget ‘sofa’ accommodation.
TripIt – Ticket organisation app
STA travel- book travel, accommodation and tours.
Student Universe
Gap360

2. Advice apps: Apps providing users with a recommendation of places of interest.

Tripadvisor: appraisals of hotels, restaurants and attractions. Book flights and attraction tickets. Find places nearby, user reviews.
Triposo: travel guide; algorithms to deliver recommendations to destinations. Personalise your trip with expert suggestions, book online.
Safer Travel: highlights safety tips and potential risks per destination and numbers.

3. Guide Apps: Apps designed as online guide books.

The Gap Year Travel Guide: the magazine of destinations, opportunities (work, volunteer, teach), advice for prep, travel gadgets.
Tripadvisor City Guides
CityMaps2go
NomadHead: the magazine of destinations.

4. Blogging Apps: Apps enabling users to blog about their travels to friends and family.

Off Exploring: travel blog/ journal.

5. Volunteering apps: Apps providing opportunities for volunteering.

GiveGab: Connect with friends and find volunteering opportunities in your community.
Involver: Find volunteering opportunities across the globe.

6. Non-Apps and others of importance:

Geckos Adventures: Small group travel company for 18-29 year olds that books all aspects of the travel experience.
STA Travel Website: Student travel company. Has facebook page where you can ask advice.

Conclusions

From carrying out this analysis of the market, JAMR has found no evidence of competition from a website or App that provides a social network based travel community service similar to what NaviGap is proposing. The majority of services currently available focus on providing advice and inspiration or opportunity to book travel and accommodation. Whilst some of the providers offer a social network link to sites such as Twitter and Facebook, these mediums are extensions of contact with the company itself and are not designed to help link users with other potential travellers to plan a trip with or travel together.

Post by @RachelHamilton

Why An App?

9th March 20172nd May 2017amy Leave a comment

15925180816_05b69388e7_o

The digital age has expanded our horizons and has changed the way people think, create, browse and shop for their travel related needs.

Consumer Interest

Deloitte’s article, referenced below, has given insight into the ways that travel is now seen by consumers, in fact, the digital age has transformed the access to which consumers have to fulfilling their travel needs. The Deloitte article states that they found from their surveys that 59 % of people looking at booking a holiday are more aware of the advantages given by online sites, especially in regard to comparing prices online. This confidence and awareness of using travel sites/app’s is only set to continue, and so the use and the expansion of travel options available online needs to expand with this heightened consumer use.

The Deloitte research also found that people rely on the experiences of others and the ability to share their own, this is something that we have taken on board with our app, wishing to make it a place to review and share experiences with fellow gap year travellers. Moreover, the fact that our creation will be an app, makes it transferrable and easy to access from anywhere. There is no need to now wait until you are at a desktop to research, compare and share. Especially as our target audience is within the range of 18-25, and a lot of this generation carry a smartphone with them daily. This is vital information as if harnessed correctly, our app will grow and function not only for the users of the app but also by them; with their feedback and use of the app, changes and additions can be made in time to ensure effective user experience.

Why An App?

In order to be fully marketable a business needs to reach people, especially when everything is online and so easily accessible. An app is needed to enhance the number of people who see it. Today, most people don’t know what is on the application market, they search for an idea. If an app can make this business visible and accessible then this can fill a need, the user is satisfied and this is why creating an app is an important business decision. Also, an app can be viewed even if it is not directly relevant to the original search, but this creates interest and is why using an app aids marketing and recognition. If a user is drawn into the app and its unique idea or can see its usefulness, they are more willing to pay for other features and this will help not only in increasing sale and revenue in the future, but also aid the business to stand out from competition. All of this will then enhance consumer loyalty and support, if a consumer feels that the app is helpful and saves them time and money and gives them a connection to the business, they are less likely to go in search of another business to fulfill their needs.

Our App

Our app offers a unique selling point, a specific app for creating a personalised gap year experience that offers the ability of the user to create and share information with other like-minded travellers. Our app will be a collaborative platform where travel knowledge will be generated and shared. It offers a more personalised user experience and tailors trips depending on the time of year, expenditure and user reviews. The consumer is more informed than ever before, having access to many types of media online and also search engines. Our app will enhance the consumer experience by collating information for them, tailoring it to their specifics needs, saving them not only money but also their time, which is a big incentive.

As the Deloitte article points out, online travel has become a buyers market, which has expanded and is only set to continue due to continued site and app creation. Consumers, are still out to get the best deal and are aware that this is to be found online. This will be a selling point for us. We will be set on creating the best deal for our app users, making sure they are kept up-to-date with the best possible offers, group trips and individual tours, and that this is continually reviewed. We will also carry on the incentive to existing users, as it shouldn’t just be new users who get the best deals, but all users of the app. We will ensure to give incentives throughout the use of our app, including discount codes, advice and the unlocking of other features on the app.

Deloitte Article: https://www2.deloitte.com/us/en/pages/consumer-business/articles/travel-hospitality-industry-outlook.html