Brandyn Ausich
4Degrees’ web app is a tool for fostering connections between users and their networks. The brief required us to design a CRM that reflected their business-casual brand and provided key metrics in a simplified way. The design had to be user-friendly and stand out from similar data-heavy tools such as Hubspot or Google Analytics. In three weeks, my team designed an interface that brought to life the vision of our clients, while being mindful of users—primarily venture capitalists, private equity managers, and eventually entrepreneurs.
4Degrees had an existing beta platform was not available to the general public. Its user base consisted of close friends of the co-founders who fell within the description of their primary users. Below, the images on the left are of the UX wireframes and on the right are what the platform looked like at the time of the project.
Some of the biggest differences between the UX wireframes (left) and the revised wireframes (right) came on the dashboard. These included the location and style of the network health, the appearance of the high priority contacts cards, the exclusion of sub-tabs, and the activity feeds. The high priority contacts cards didn’t expand on the new version, and the news feed from the UX team was changed to be smaller and less of a stream. Additionally, there were more data visualizations in the new version. Overall the new wireframes looked much less cluttered.
The contacts list also saw a dramatic change. The original wireframe looked much more like a spreadsheet, a style our client told us to avoid as we moved forward with our designs. The new version saw the information broken out by cards and a better use of space for each column.
Before delving into individual design directions, we compiled visual research on 4Degrees’ competitors to understand how existing platforms utilized visual elements and what opportunities were available. Additionally, we researched unrelated products that shared similar target audiences to identify whether they were hitting the mark. Ultimately, this helped me formulate an action plan for my designs. We broke down our results to answer three key questions related to what we learned about our clients:
After our research, my team developed three initial design principles centered around our clients' brand goals and the needs of their users to apply to our design decisions. We took to heart our clients' thoughts:
“We value customer centricity, authenticity—authentic relationships, real selves, diversity of perspective - and impactfulness”
“[Our platform] should be a trusted advisor, in the background. If it’s doing its job right they don’t even have to think about it. They want to be provided with information that they know is relevant”
Since 4Degrees stressed having transparency and being genuine, and wanted the platform to act as a mentor. So, we decided to write our design principles to the users. Our final design principles were as follows:
4Degrees needs to help users focus on managing authentic relationships and motivate them to stay on track. Visually, items should be clearly defined to ensure users confidently navigated their platform. Actional assets should be apparent through the use of visual hierarchy and colors so anyone who uses the platform can accomplish what they came to do.
The platform needed to provide a high-level view of users’ network health so users are able to prioritize the actions they needed to take. Elements and content must be broken down into bite-sized chunks through the use of spacing and positioning.
4Degrees prioritized relationship-building not transactions. They promoted an engaging experience to make networking feel comfortable. The design needed to strike a balance between professionalism and approachability by incorporating bright colors and friendly UI elements.
My goal was to create a digestible platform that presents a lot of information clearly and without causing stress.
More screens, including active states and pop-ups can be seen in the prototype.
The clients said the addition of the cutouts might eventually be on brand for them because they like that they added “a little something extra” in an otherwise routine process.
The data visuals shown on this screen were provided by the 4Degrees UX designer, modified by me, and were not part of the original wireframes. With these in hand, I restructured the dashboard to align with their future consideration to have a drag-to-place function. I also aimed to make the elements fit better on the screen and feel less disjointed.
I outlined the tags to offer them a little more breathing room. I adjusted the spacing between elements so things felt less cramped. I also added checkboxes per the clients' feedback on the first version and added indicators to the sides of cards.
The open card would shift down the other cards. Users would be able to see a longer list of previous interaction history.
I made the choice to put messages first because messages would be the most important for them to access first.
I altered the size of the card for interaction history since it took up a lot of usable space. I also changed the layout of information and used icons when applicable in the left sidebar. These changes were made to increase the amount of white space between groups of information.
As part of my final deliverables, I created a style guide to help 4Degrees with future design decisions and to help cultivate the brand. I also created a Proto.io prototype with the final screen designs. Since we didn’t have a complete flow, the prototype ran through the screens in chronological order to provide a better idea of how the end product looked. The flow was incomplete because we chose to only do a few screens from the onboarding process due to the similarity between the screens. Also, we aimed to mockup a diverse amount of key screens, focusing mainly on those differing in layout and elements.
