Aigenis. Desktop app for buying stocks and bonds
T A S K
Aigenis provides a full range of services in the exchange and over-the-counter securities markets in terms of brokerage and dealer activities, including investment consulting, support for stock purchase and sale transactions, organization of the issue of shares and bonds, and other services.
1
DESIGNER
I was only one designer on the project
I was only one designer on the project
4
MONTHS
I worked on the project on thre different streams at the same time
I worked on the project on thre different streams at the same time
5+
ЧЕЛОВЕК
Approximate number of team members involved in the project
Approximate number of team members involved in the project
- PROJECT CHALLENGEDevelop the architecture of a desktop application based on the already specified functionality and architecture of a mobile application, as well as add new advanced functionality.
Create an up-to-date visual style for the application, also based on the style already developed earlier. - WHAT WAS DONEThe architecture of the mobile application for the desktop has been redesigned, adapted and improved.
The visual style has been updated with the study of all possible states and the UI Kit has been assembled, new controls for the desktop have been created.
Developed a dark theme for the application. - MY ROLEUser Experience & User Interface Designer.
— creation of a visual concept and development of all possible states;
— development of UX scenarios based on business requirements;
— detailed interactive prototyping;
— development of icons;
— development of illustrations.
Design process
1
INFORMATION
ARCHITECTURE
ARCHITECTURE
• Kick-off meeting
• Development of information architecture
• Wireframes creation
• Digital interactive prototype
• Development of information architecture
• Wireframes creation
• Digital interactive prototype
2
VISUAL
DESIGN
DESIGN
• Moodboard
• Creation of a visual concept
• Approval and revision
• Development of visual design for the desktop
• Creation of a visual concept
• Approval and revision
• Development of visual design for the desktop
3
DEVELOPMENT
SUPPORT
SUPPORT
• Preparing files for transfer to development
• Development of element states
• Creation UI Kit
• Maintenance and control of development
• Development of element states
• Creation UI Kit
• Maintenance and control of development
INFORMATION
ARCHITECTURE
ARCHITECTURE
• Kick-off meeting
• Project evaluation
• Development of information architecture
• Wireframes creation
• Digital interactive prototype
• Project evaluation
• Development of information architecture
• Wireframes creation
• Digital interactive prototype
- ARCHITECTURE DEVELOPMENTThe architecture of the desktop application was developed on the basis of the existing architecture for a mobile application for iOS and Android platforms. However, it has been redesigned and optimized to reflect the addition of new functionality.
- ?The type and style of global navigation was determined, as well as what information will be constantly displayed in the header and sprout on each page of the application; brought out important settings and functions.
DEVELOPMENT OF PROTOTYPES
In the first iteration, paper wireframes of the main 3 screens were developed. Since most of the scenarios have already been worked out on a mobile application, then work immediately began on creating a high degree of detail of a digital interactive prototype.
S T E P — 0 1
Video with prototypes
VISUAL
DESIGN
DESIGN
• Moodboard
• Creation of a visual concept
• Approval and revision
• Development of visual design for the desktop
• Creation of a visual concept
• Approval and revision
• Development of visual design for the desktop
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.
S T E P — 0 2
From prototype to visual concept
- The creation of the visual concept began with a detailed study of the three main screens of the application. The basis of the application style was developed already at the stage of mobile application design.
- This style has been slightly changed and updated for the desktop: the main accent color has been changed, the color palette of illustrations has changed slightly — gradients have appeared.
Designing tables and filtering
As part of the project, a number of tables were designed with a different set of filters and search. The tables were designed with responsiveness in mind.
Design charts
Dark theme development
Visual design prototypes
DEVELOPMENT
SUPPORT
SUPPORT
• Preparing files for transfer to development
• Development of element states
• Creation UI Kit
• Maintenance and control of development
• Development of element states
• Creation UI Kit
• Maintenance and control of development
More screens with visual designs
Tools
Sketch, Adobe Illustrator, Invision.