Viena UI UX for B2B Contract & Customer Management System

Viena is a dashboard to provide an at-a-glance view of progress reports using key performance indicators relevant to the business. A B2B Contract and Customer Management Software to support contract management, contract lifecycle management, and contractor management on projects. While Contract Management systems can be complex and packed with data, I committed most of the time on UI UX to design a system that can help companies create new contracts and keep track of existing contracts. I was responsible for research, design, testing, and handoff. I focused on delivering a user-friendly app experience.

Client
Viena
Date
1.13.20
Based In
Toronto, Canda
Scroll Down

The Challenge

The ability to manage a business and its aspects are increasingly important for B2B operations. However, the large portion of CRMs and Contract management systems are sorely lacking in good user experiences. Operations Staff & Managers had to pull key data from different software, manage & consolidate critical information. That led to this opportunity to find a solution using a custom dashboard.

My Role

I completed all activities in the UX project cycle in a solo capacity- from research to design to prototyping. I was in charge of Research, Ideation, User Task Flows, Branding, Design, Prototyping & UI/UX Design. I conducted user research using interviews and surveys in order to address both user behaviour and attitudes.

My Role : Research, Ideation, Branding, Task Flows, Design, Prototyping, UI/UX Design

Tools

Tools: Whimsical, Miro, Procreate, Microsoft Word, Microsoft Excel, Adobe Illustrator, Adobe Photoshop, Figma, Lookback, Zeplin

Tools: Whimsical, Miro, Procreate, Microsoft Word, Microsoft Excel, Adobe Illustrator, Adobe Photoshop, Figma, Lookback, Zeplin

Techniques: Surveys, Questionnaires, Interviews, Affinity Diagram, Value vs. Complexity Model, Competitive/Comparative Analysis, Mood boards, User Flow, Paper Prototype, Crazy-8, Wireframes, Mockups, Pattern Library, Key Performance Indicators, Remote Un-moderated Usability Testing, Accessibility Analysis, Prototyping

Duration

11 weeks

Research & Analysis

I began with a set of interview and survey questions to give me the direction I needed to dig deeper to find the answers I needed to solve the most common problems. I transferred all my notes and responses onto sticky notes on Miro, recognized patterns, rearranged the sticky notes into clusters under different themes, and possible opportunities, detailing particular pain points, and user insights. I also conducted an analysis based on competition, users, and business logic as a way to gain insights into user flow and wire-framing. The most important takeaway from this activity was learning how different softwares organized their selection and the overall layout. I started by defining the minimum requirements or deliverables. I made User Flows to define the navigation and its structure followed by Wireframes and Low-fi mockups.

User Flow using Whimsical

Low Fidelity Mockup

Using a pen & paper, the crazy-8 method, different layouts, triggers, and responses, I started sketching low fidelity wireframes for some screens on paper. After many iterations, the rough version for developing a low fidelity prototype was achieved using Adobe XD, Adobe Photoshop, Adobe Illustrator & Figma. Before coming up with colors, typography, and images, I wanted to put this layout to test to see how my users would process this information without the distraction of visual design and branding.

Low Fidelity Mockup using Figma & Photoshop

Feedback & Iteration

I used Lookback to observe user’s while they interacted with the prototype. Tests revealed that not all business logic was in place and I was able to improve my designs based on my observations and the users’ direct feedback.

Color Palette

Colors are my big inspiration to see the world. I believe the color theory is science and art.

Color Palette

Typography

I used well-known system fonts with different text sizes, alignment, and line & letter spacing to better communicate information.

Typography: Roboto

Iconography

A user’s icon understanding is based on previous experience and universally understood icons are extremely rare. Therefore, I tried to use system icons as much as possible to create a sense of familiarity for the user.

Icons

High Fidelity Clickable Prototype

As a result of the testing, my observations, and the users’ feedback, I was able to improve my designs. I also used the framework previously established in the low-fidelity mockups along with the appropriate colors, icons, typefaces & fonts. I made the detailed High-Fidelity clickable prototype using Figma.

High Fidelity Screens using Adobe XD, Figma & Photoshop

Validation, Usability, Feedback & Iteration

Using Lookback for Testing, I was able to gain valuable user feedbacks, observations, and personal insights. I used my latest UX trends to create a  final high fidelity mockup using Adobe XD, Photoshop & Illustrator, and then imported it to Figma to create a shareable, clickable prototype. After I was confident, I improved accessibility, created stylesheets, and Component Sheet in both Figma & Zeplin.

Validation, Usability, Feedback & Iteration using Lookback

Solution & Insights

Although this overwhelming project was created within 11 weeks where all activities in the UX project cycle in a solo capacity by me, this short period of time was an eye-opening experience for me. I learned the importance of having a well-defined and close-ended problem statement. This has also resulted in the accumulation of a large amount of knowledge and many new skills in Adobe XD & Figma. Looking back, I believe my solutions solve the user's problem.

Thank you