Building toward cutting-edge visual design for multi-platform enterprise software
For this project, I developed a cohesive visual design for a management administrative portal that enabled managers to keep track of customer feedback, sales, and employee data on both smartphones and tablets. Throughout my process, I also had to rethink the user experience in a variety of ways, such as making changes to the app’s information architecture, and then validate these decisions by conducting usability tests.
Tools: Sketch, Illustrator, Principle, InVision, Miro
Deliverables: Moodboards, style tiles, affinity diagrams, clickable prototypes
Project structure: 4 sprints of 7 days
Devising Soci8 was an exercise in minimalism. Given how much data visualization was involved, it was essential that the design be no-frills and allowed the user to interpret the different types of information being presented quickly and accurately. The design had to be clean; it had to be rather staid and evoke a sense of professionalism. The design had to be unobstrusive; it had to avoid any visual elements that could be perceived as distracting from the main objective of displaying important data. Since data viz was the central function of the app, one of the main obstacles that I continually confronted throughout the design process was determining how best to present different data points and minimize any and all extraneous information so that the user could glean relevant insights as efficiently as possible. Moreover, the end product was intended for companies of many different sizes, so it had to be scalable.
As the project got underway, the first step was familiarizing myself with the (decidedly unexciting) world of managerial software. My domain research yielded a wealth of information on topics such as the subtle distinction between a CRM and a CXM, and after I finished reading through most everything I could find online, I conducted a visual competitive analysis on the companies offering products similar to the one I was tasked with designing. As I delved further into the competitors and their aesthetic choices, I found that most of them took great care to keep their visuals looking as neutral as possible. In some cases, however, companies threw in more vivid colors to differentiate themselves (though some only did so in their marketing sites and not their products).
After conducting my background research, I used my newfound insights to construct a visual aesthetic that would make my product design stand out from the others in the space. I knew I wanted to implement a color scheme that served as a departure from the typical businessy blues found in so many enterprise softwares, and as I began moodboarding I tried to incorporate more nontraditional colors like pink and purple. While some of my attempts ended up straying a little too far from what might be considered appropriate given the product type, I ended up with two solid visual concepts, with the one I ended up using shown below:
In my visual concept (codenamed “Dark Red Digital”) I incorporated modernist tropes like the illustrated representation of a hand interacting with a digital space and featured strong lines and simple two-dimensional shapes to create a sense of minimalism. After getting some feedback on these moodboards from a few design peers, I carried my concepts forward by contextualizing them in the style tiles.
%402x.png)
After all of my potential style tiles were finalized, I took a long hard look at the wireframes I was given to determine if any major changes needed to be made before I moved on to designing the first round of high-fidelity screens. Unfortunately, the wireframes left me with more questions than answers. To my chagrin, I found that the UX team who had created them prior to my involvement had made very few annotations, and as it turned out they were no longer involved with the project and there was no way for me to reach out to them directly for answers to my questions. Despite these setbacks, I was able to correct for certain issues and make necessary changes on my own, such as rethinking certain data visualizations and how they were organized within different sections of the app. I also tried to make better use of the ample screen real estate on the tablet version.
In order to validate my design direction, I conducted two rounds of desirability testing – one with style tiles and one with two clickable prototypes created from my first round of high-fidelity screen designs for mobile and tablet. Both rounds consisted of showing the artifacts to three people who had some level of managerial experience (and thus constituted the app’s target user base) and spending about a half hour interviewing them in order to gauge their perceptions of the designs, both holistically and with regard to specific elements. After each round of interviews, I aggregated the results and extracted key insights and takeaways using affinity diagramming.
The feedback from the first round of desirability testing indicated a strong preference across all participants’ responses toward my ‘Digital Orange’ style tile as compared to the ‘Electric Purple’ one, leading me to pursue that visual direction as I moved forward into my high-fidelity designs.As for the second round of testing, the feedback on my first round of hi-fis mostly revolved around the app’s navigational structure. Many of the participants found the drop-down navigation put forth in the wireframes to be rather cumbersome, and in response I replaced it with a hamburger button that opened a sidebar menu when tapped. Subsequent tests found this to be a more favorable option across virtually all users. As such, I brought forth this visual aesthetic into the high-fidelity screens that I prototyped out over the course of a week
After two rounds of prototyping, I then conducted several usability tests to gauge how easily certain key tasks could be accomplished given how the interface was laid out. The tests involved prompting each user to go through a multi-step user flow when they arrived on a certain screen, measuring time on task, and asking them a set of follow-up questions after the completion of each task. The first task flow asked the user to expand one of the data visualization panes on the ‘Overview’ screen of the tablet version, changing the data category using a drop-down menu, exiting the expanded view, and then using another drop-down to change a data subcategory. The second task scenario entailed adding a new goal on the ‘Today’ screen of the mobile app, selecting the goal type on a drop-down menu and using either a slider or a numerical input field to indicate the target value. The third and final task required the user to respond to a negative store review listed on the ‘Feedback’ screen.
The usability tests yielded several key findings that both validated certain design choices and suggested the need for certain changes to be made before submitting the final prototype. While all test subjects had no problem identifying the ‘expand’ and ‘collapse’ icons and using them to make the graph pane bigger and smaller, a few encountered some difficulty when it came to inputting the target value after being prompted to add a new goal on the ‘Today’ screen. In response, I restructured the input elements of the ‘Add new goal’ pane in order to make the slider more accessible and the overall layout more balanced.
.png)
The visual design that came about as a result of my process was simple and clean – it featured a decidedly minimalist aesthetic with strong lines, sharp corners, and a modern Swiss-style typeface. It was understated, yet elegant. And most importantly, it fit the product type, with all user testers perceiving it to be a fitting look for managerial software. In retrospect, I think the success of the design can be attributed to two key aspects:
Separating the different features within each section of the app into individual modules made it easier for the user to distinguish between different elements at a glance. I also used overlapping modules to denote content that was closely related and give the interface a sense of dimensionality.
With any product that deals heavily in data visualization, it is important to be cognizant of how much data is being presented on any one screen (especially on mobile) and take strides to insure that the user doesn’t suffer from information overload. With Soci8, I hid more granular content so that the user’s cognitive load on certain screens was reduced but all content remained readily accessible. On the ‘Reviews’ pane of the ’Feedback’ screen, for example, the reviews expanded when tapped, revealing the review text and a button that could be used to respond. And on the mobile ‘Employee’ screen, I used a horizontal page scroll to spread the employee information across multiple overlapping cards and showed the edges of the adjacent ones as affordances indicating to the user that there was hidden information that could be accessed with a slide motion.
While I had initially designed Soci8 to have certain features that would be exclusive to the tablet version, assuming managers would only utilize them while on a bigger screen, a considerable majority of the test participants that I interviewed expressed a disdain for apps that have limited functionality on the mobile version and said that they always wanted to be able to accomplish the same tasks on mobile that they could on tablet. In response, I got rid of certain tablet-only features in subsequent redesigns and implemented design patterns like the aforementioned horizontal page scroll on the mobile ‘Employee’ screen so that more data-heavy sections of the app could be displayed on smaller screens without being overwhelming to the user.
From the outset, it was clear that the visual design that I engineered for this project needed to be all-business and no-nonsense. This presented a unique challenge wherein the product had to stand as an expression of the overall brand but had to do so without detracting from its core functionality. One key way that I was able to overcome this challenge was through interaction design. Throughout the interface I peppered in various microinteractions that I designed in Principle, and these served to give Soci8 a more distinct brand voice – one defined by equal parts sophistication and simplicity.
When I presented my final designs after a month’s work, the feedback was quite positive. I was praised for my ability to create an engaging brand that felt unique and gave the product a more cutting-edge feel. Aside from the success of the branding, the other aspects of my work that were perceived as standouts were my overhaul of the ‘Employee’ screens and my microinteractions, which were seen as rendering moments of delight that really enhanced the user experience.
Looking back on my process and the product that came out of it, the thing I’m most proud of with Soci8 is how I was able to harness my creativity in order to take managerial software – something that is inherently dull – and make it feel more multidimensional and, dare I say, exciting. I believe that the end result speaks to my personal design sensibilities and how I am able to leverage my past experience working with various startup companies to help them develop their brands.
Working on Soci8 taught me a lot about best practices when it comes to apps that heavy in data visualization as well as designing for multiple device types. It also taught me that it’s often the little things that make the biggest impact on how a product feels. But most of all, this project taught me that it’s still possible for something as no-nonsense as an administrative portal to have a distinct point of view when it comes to the visual design.
.gif)
