top of page

A Case for SaaS Mobile Billing App

Combining usability with visual aesthetics.

iPhone-XS-Front-HERO.png

CASE STUDY

UI design solutions for responsive webpages, helping connecting users with editorial & company information.

Challenge my UI Design-thinking methods. Purpose through removing unnecessary elements, UI consistency-standards, form-function, simplified color scheme and design system, readability, and navigation.
 

Analog Devices (ADI),  also known as 'Analog' is an American multinational semiconductor-technology company specializing in instrumentation, signal processing, power management and data conversion – within the aerospace, automotive, communications and electronics industries. 

My UI designs helped build world-class, user-focused solutions for the thought leadership webpages and editorial-style digital experiences. 

SECTOR

SaaS, Technology, App

PLATFORMS

Figma, Axure, Sketch, Photoshop-Illustrator, Workfront-CMS

ROLE

Digital Designer & Illustrator

Desk Research, User Experience Design, UI Design, Wireframing-Mockups, Prototyping

TIMEFRAMES

June 2023 - Jun 2023

Problem space:  addressing interaction-level pain points and design aesthetics inconsistencies. 

.
Goals: Make an effective and enjoyable experience while balancing business needs with users needs and goals. 

Design key App features: from ideation through UI mockups.

Iterative, high-fidelity designs for UI App screens: Profile-settings, Dashboard, Billing-Reminders, modals-alerts.

 

My framework for delightful designing and problem-thinking

  • The SaaS App is for business executives, assistants, Human Resources, billing and accounts, and client management environments.

  • App helps solve scheduling, billing and project coordination issues–focus on an easy-to-use interface.

  • Users engage with the App in business applications: tasks carried out in the office and or remotely.

  • Users will enjoy using this App because it is clear and tactile, easy to use, helps them achieve tasks quicker, is visually appealing, considerate and empowering.  

  • This UI designs have appealing aesthetics in dark mode: improves the look and feel, and the experience adds value and trust for the business.

Identifying a UI design system and specs

Based on research and moodboard exploration, I established guidelines and a design system for the dark-mode style.

Color System.png
Color System-2.png

Low-fi wireframing and medium-fidelity  mockups

From concept sketches to mockups, I created basic greyscale wireframes for the UI screens. These initial concepts helped me flush out UI flow for mid-fidelity mockups.

Initial design stage

iPhone X-XS-11 Pro – 4.png
Reminders – 2.png
Reminders – 3.png
SaaS-App-Before-1.jpg
SaaS-App-Before-2.jpg

UI Design Solutions

During the UX evaluation of key features, I refined user interface screens and improved the look, form and function.

Overarching Question: how can I design an enjoyable experience and not overwhelm users with the App's complex amount of information, number of tasks and choices available? 

Hyopthesis: I believe that if I create a more simplified, visually appealing design experience and present information that does not overwhelm high-level users, then the experience will be perceived as easier to use and more aesthetically appealing.

UI Designs experimented and tested in usability studies. I will know the hypothesis is valid if by the second sprint cycle, the criteria meets the following metrics:


Quantitative outcome: 65% improvements in user's ability to find billing calendar dates and act upon them with success in the payment flow.

Qualitative outcome: 4 out of 5 users tested will have favorable comments regarding the visual aesthetics appeal and how this makes them feel empowered and trusting in the company and process. 

UI Heuristic Eval: Key App Features

SaaS-Heuristic-Eval.jpg

Key UI.UX takeaways

By applying the Laws of Prågnanz/Similarity, Miller's Law and Chunking methods, I helped users perform key tasks quicker and retain data easier. The following features highlighted these improvements:
 

  • Efficient filtering of UI information

  • Seek meaning of UI content

  • Help to store bits of these key interactions into memory

Iphone-MultiScreens.jpg

UI Solutions 

During the UX&D process, I developed multiple, high-fidelity UI screens. My aim was to design a useful and easy, interface solution while keeping the user's needs and goals as the all-encompassing project thread. 

bottom of page