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.
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.
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
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.
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.
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.
Colors are my big inspiration to see the world. I believe the color theory is science and art.
I used well-known system fonts with different text sizes, alignment, and line & letter spacing to better communicate information.
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.
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.
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.
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.