Mobile application
|
|
iOS
Android
- Project challengeTo develop a mobile application architecture for iOS and Android platforms for remote trading. Explore this application market, collect and apply global best practices. Also, take into account the nuances of the complex legislative system of the Republic of Belarus on investment operations.
• market research
• product design
• iterative improvement
• implementation and maintenance - Design challengETo develop a visual concept in a modern guise, with a credible and professionalism in the financial sector. Objective: to get away from the template boring financial product, to take into account the motley target audience. The created style must remain relevant following 5−6 years.
• UI development
• digital illustration
• interactive prototype
• develop UI Kit - TEAMThe development of the architecture and the visual part of the application was carried out simultaneously on two platforms by different development teams: iOS and Android. Work took place in parallel with the introduction of a new data exchange protocol.
• product designer
• project manager and PO
• iOS team — 3 people
• Android team — 2 people
• backend for introduction of the protocol — 2 people
Watch the full version of the project on Behance.
About the company
Aigenis—professional securities market player. Activities: dealership, brokerage, trust management.
Product type: the mobile application is designed for easy and convenient access of customers to the stock market for iOS and Android platforms.
The purpose of the product: to provide a way to invest your own money in securities—bonds and stocks. Buying and selling, as well as obtaining operational information about issuers, parameters of securities issues, quotes from an organized exchange platform.
Product type: the mobile application is designed for easy and convenient access of customers to the stock market for iOS and Android platforms.
The purpose of the product: to provide a way to invest your own money in securities—bonds and stocks. Buying and selling, as well as obtaining operational information about issuers, parameters of securities issues, quotes from an organized exchange platform.
The visual concept of the main screens
01 STEP
01 STEP
Strategy and research
Kickoff meeting
Project Evaluation
Competitive analysis
Design principles
Creation & elaboration of scenarios
Project Evaluation
Competitive analysis
Design principles
Creation & elaboration of scenarios
02 STEP
02 STEP
Information architecture
Personas, improvement scenarios
Information architecture
Wireframes
Information architecture
Wireframes
03 STEP
03 STEP
Prototyping and testing
Prototyping
Prototype testing
Iterative improvement of the prototype
Interactive prototype
Prototype testing
Iterative improvement of the prototype
Interactive prototype
04 STEP
04 STEP
UI concept development
Creating a Moodboard
Visual concept
Illustration style
Concept approval
Visual concept
Illustration style
Concept approval
05 STEP
05 STEP
Finishing UI and Illustrations
The visual design of all screens
Digital Illustrations
Approval, making edits
Digital Illustrations
Approval, making edits
06 STEP
06 STEP
UI KIT, transfer to the dev team
Final clickable prototype
UI KIT development
Preparing and transferring artefacts to developers
Development phase support
UI KIT development
Preparing and transferring artefacts to developers
Development phase support
Strategy
and research
and research
• Kickoff meeting
• Project Evaluation
• Competitive analysis
• Design principles
• Creation & elaboration of scenarios
• Project Evaluation
• Competitive analysis
• Design principles
• Creation & elaboration of scenarios
Project Evaluation
During the Kickoff meeting, we identified the main objectives and goals of the product. We planned and discussed the stages of work on the project, identified deadlines for each stage. The main functionality was also highlighted and prioritized, dividing into several stages of product development. We discussed the role of each member of the team, identified communication issues, for whom the last "yes" is assigned.
After the Kickoff meeting, a product evaluation was done. That is, how much time will be required to develop each stage. In the first iteration of product development and launch, 6 main stages were identified. The steps are listed above.
After the Kickoff meeting, a product evaluation was done. That is, how much time will be required to develop each stage. In the first iteration of product development and launch, 6 main stages were identified. The steps are listed above.
Competitive analysis For a deeper understanding of the product and the effective specificity was carried out a competitive analysis of leading investment products in the CIS market. Three direct competitors were identified: Lacerta, Tinkoff, Sberbank. — A quantitative competitive analysis was conducted for the presence and absence of functionality; — Analysis of global navigation; — Analysis of visual design and presentation of information. |
Design
principles
principles
- SimpleThe application should be simple and understandable for different levels: from advanced to beginner investors.
- TrustSimilar products are just beginning to appear on the Belarusian market; it is necessary to show that this product can be trusted.
- LegitimateAt present, the Republic of Belarus has a complex legislative system; all the rules and laws are required to be observed.
Creation & elaboration of scenarios
Based on the persons and their goals, the main user scenarios were worked out. We were select the narrative format for scenarios with the main steps displayed.
Information architecture
• Personas, improvement scenarios
• Information architecture
• Wireframes
• Information architecture
• Wireframes
Personas,
improvement scenarios
improvement scenarios
At the same time, when creating draft versions of user scenarios, personas were developed. Two types were allocated as a collective image of personas:
1. An experienced investor George, whose task is to preserve and increase his capital. The main problems: distrust of mobile applications; little time to study information about companies; invests through several different online exchanges, there is no common "picture" in one place.
2. Tim just planning to start investing. Objective: to achieve financial independence to start working on their projects. Problems: a lot of information, but it is not clear where to start; does not believe in the Belarusian economy, wants to invest only in international companies; doesn’t know who to turn for advice, there are no familiar experts in the field of investment.
1. An experienced investor George, whose task is to preserve and increase his capital. The main problems: distrust of mobile applications; little time to study information about companies; invests through several different online exchanges, there is no common "picture" in one place.
2. Tim just planning to start investing. Objective: to achieve financial independence to start working on their projects. Problems: a lot of information, but it is not clear where to start; does not believe in the Belarusian economy, wants to invest only in international companies; doesn’t know who to turn for advice, there are no familiar experts in the field of investment.
- Information architectureFollowing the scripts, SiteMap was developed. When creating SiteMap, the future functionality was divided into the main logical groups—the pages of the mobile application.
- ?We determined what kind of global navigation will be used and what entities it will contain. It was highlighted: what to buy; exchange; my account; analytics; profile.
Wireframes
Based on scenarios and SiteMap, the first stage of developing fast paper wireframes was carried out to speed up the work. After discussion and revision, digital wireframes were created that displayed the main scenarios and approximate future content.
Prototyping
and testing
and testing
• Prototyping
• Prototype testing
• Iterative improvement of the prototype
• Interactive prototype
• Prototype testing
• Iterative improvement of the prototype
• Interactive prototype
Prototyping
Approved wireframes formed the basis for the creation of highly detailed prototypes. All possible scenarios of interaction with the application were worked out, all the needs of real content were taken into account. Final prototypes developed iteratively: by testing and gradual improvement. As a result, a clickable prototype was created. Videos can be viewed below.
UI concept development
• Creating a Moodboard
• Visual concept
• Illustration style
• Concept approval
• Visual concept
• Illustration style
• Concept approval
Creating a MoodboarD
To find the best visual solutions in the financial field of applications, the mood board was created. Many interesting solutions were found during a competitive analysis. However, the mood board allowed me to inspire and collect the visual options I liked, which later formed the basis of the UI concept of the main screens of the application.
Visual concepT
To develop a visual concept, three main screens were selected that contain the most diverse elements. At the concept stage, a typography hierarchy was thought out and developed; accent and secondary colours are selected; made header; pick up style icons based on global navigation; developed several significantly different types of cards; made several options for the input screen.
Illustration stylE Even while searching for interesting solutions in the financial field of interfaces and creating a mood board, a search was made for the style of future illustrations. Objective: to make attractive and not prim illustrations, while they must contain a hint of rigour and businesslike, to convey lightness and ease. Solution: use simple illustrations with restrained colours. However, with the addition of bright colour accents. It was also decided to add marine plant elements, as the Aigenis brand is based on a marine theme. |
Finishing UI
and Illustrations
and Illustrations
• The visual design of all screens
• Digital Illustrations
• Approval, making edits
• Digital Illustrations
• Approval, making edits
- The visual design of all screenSAfter approving and making changes to the design of the concept of the main screens, I worked on the UI of all scenarios and all necessary states based on the developed prototype.
- Digital IllustrationSFirst, paper sketches of all future illustrations were provided. After their approval, one digital illustration was worked out. Then the remaining illustrations in the final form were created.
UI KIT,
transfer to the dev team
transfer to the dev team
• Final clickable prototype
• UI KIT development
• Preparing and transferring artefacts to developers
• Development phase support
• UI KIT development
• Preparing and transferring artefacts to developers
• Development phase support
UI KIT development, Preparing and transferring artefacts to developers
To simplify the work for the development team was created UI KIT. Which absorbed all the elements of a mobile application: all elements states; colours; typography; all kinds of headers; cards; graphics and their states, etc.
Mockups for the two teams of iOS and Android developers were provided in Zeplin and Invision Inspect. To simplify the understanding of interactions a fine clickable prototype was created in Invision with all scenarios and states.
The last stage is the support of the development team and the quality control of the final development from a visual point of view.
Mockups for the two teams of iOS and Android developers were provided in Zeplin and Invision Inspect. To simplify the understanding of interactions a fine clickable prototype was created in Invision with all scenarios and states.
The last stage is the support of the development team and the quality control of the final development from a visual point of view.
“
Aigenis Investment Company thanks the designer Apollinaria Manko for the highest quality work done, patience and painstaking approach to the smallest details in working with clients.
Cooperation with Apollinaria took place as part of a project to develop a mobile application for remote exchange trading. The work took place in parallel with the introduction of a new data transfer protocol by the exchange, which of course affected the completeness of the functionality and capabilities of the final product. An additional factor was the very tight deadlines in which it was required to complete the task.
From the first days of the project, Apollinaria plunged into the study of the global financial products market to develop a visual application concept. In the course of work, she followed a specific technical task, but at the same time she remained very proactive: she often suggested using alternative implementation options or making some qualitative changes to already approved elements.
Thanks to this flexible approach, the application was able to acquire many important new functions at the stage of initial development. The readiness of the designer to make changes to the design as soon as possible became very valuable.
Separately, I would like to note how easily and productively the communication and discussion of any emerging issue or proposal took place. Upon completion of the development of the prototype application, Apollinaria continues to provide advice and support as part of the compliance and implementation of the product.
Aigenis Investment Company recommends Apollinaria Manko as a highly qualified specialist with a flexible client-oriented approach, capable of efficiently and on time to complete the tasks.
Cooperation with Apollinaria took place as part of a project to develop a mobile application for remote exchange trading. The work took place in parallel with the introduction of a new data transfer protocol by the exchange, which of course affected the completeness of the functionality and capabilities of the final product. An additional factor was the very tight deadlines in which it was required to complete the task.
From the first days of the project, Apollinaria plunged into the study of the global financial products market to develop a visual application concept. In the course of work, she followed a specific technical task, but at the same time she remained very proactive: she often suggested using alternative implementation options or making some qualitative changes to already approved elements.
Thanks to this flexible approach, the application was able to acquire many important new functions at the stage of initial development. The readiness of the designer to make changes to the design as soon as possible became very valuable.
Separately, I would like to note how easily and productively the communication and discussion of any emerging issue or proposal took place. Upon completion of the development of the prototype application, Apollinaria continues to provide advice and support as part of the compliance and implementation of the product.
Aigenis Investment Company recommends Apollinaria Manko as a highly qualified specialist with a flexible client-oriented approach, capable of efficiently and on time to complete the tasks.