Fedcomp IQ Neo Resolution Web & Mobile App
Project Overview
The problem:
Client wanted to create a web app and mobile app for their new product addition- IQ Neo Resolution. They wanted the user to be able to log into the app and flow through the navigation concisely and easily.
Client's goals:
-
Web app and mobile app creation
-
Ease of use through the user flow
-
Clarity from interface to interface
-
Implementing the client's logo with elegant branding throughout the app
My role:
UX designer
Responsibilities:
Designing the web app & mobile app and creating the user flow through varying interfaces. Iterating on designs and creating a cohesive outcome throughout the app.
Website:
Note:
The images displayed are from a mockup account only and do not depict anyone's actual bank information.
IQ Neo Resolution can only be accessed through user portal.
Understanding the User
User Research: Pain Points
Starting the Design
Sitemap
The focus of the sitemap was to section out the different banking aspects in the most intuitive was for the users. This included adding in multiple ways to reach important interfaces and calls to action buttons leading through the user flow. Some of the sections were also ultimately taken out of the final web app version while being kept in mobile app.
Refining the Design
Mockups
Early mockup designs of the mobile app were depicting a more complex display at the dashboard which I wanted to simplify for users in future iterations. I also utilized the different variations of color palettes and brought in icons along with the copy for more accessibility. For early mockups of the web app, the dropdown menus went through iterations of layout to see how best the information could be displayed for users.
![] - Option 5.png](https://static.wixstatic.com/media/5d092d_aef3fdf92d014d56a21652d9ba077f0c~mv2.png/v1/fill/w_427,h_405,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5D%20-%20Option%205.png)
Final Mockups
Final mockups of mobile app interfaces displayed a more curated dashboard menu with an icon & button display
for more ease of navigation for users. I also incorporated more design elements such as pie graphs to show information in a clear and more captivating way. The icons and design elements were then utilized throughout the mobile app to bring continuity to the app and a more overall accessible and less copy heavy appearance. With the final mockups of the web app interfaces, I also integrated these design elements and also went with a lighter color palette which gives the web app a clean and structured appearance without too much to clutter to bog down the user.
![].png](https://static.wixstatic.com/media/5d092d_467d2d5eb3b64b6f8a2610faf57c3c8d~mv2.png/v1/fill/w_495,h_369,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5D.png)
![loans].png](https://static.wixstatic.com/media/5d092d_63c8cc7f3b6b4de88cf142bdb6ee6c92~mv2.png/v1/fill/w_523,h_369,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/loans%5D.png)
Style Guide
The style guide is a collection of all of the styled design elements, fonts and color palette that dictates the final designs.
Accessibility Considerations
Takeaways
Impact:
​The Client was left with an elegant and elevated web and mobile app with cohesive branding throughout, clear and engaging design elements and streamlined content. The user can now move through the app intuitively and have a positive experience while getting all their banking needs met.
What I learned:
While researching and designing the IQ Neo Resolution web & mobile app, I learned that integrating accessibility can not only help all users to navigate through the app but it can also simplify and elevate the design as well. Throughout the process, communication with client and receiving feedback is critical as well as interpreting that feedback into a well formed layout and user flow in general.