Desktop redesign project for helloworld.
Timeline: 2 months
Methods: Market Research, User Testing, Analytics
Tools: Adobe XD, usertesting.com
First things first…
The first step in this design process was to gain a deep understanding of the client. Who are they? What do they do? What are their needs? What are their problems? Who are their clients? Here’s a rough draft of the mental gymnastics that occurred during this phase, starting from the questions and ending in the setting of goals.
Market Research
After understanding the client, the next step was to understand the larger market they are in. Being in the Salescore partner space, their largest concern was how to stand out from the ever-growing amount of competition, and make a lasting impression.
To achieve this, we took a plunge into the CRM-Salesforce world and looked at what our client’s main “rivals” were up to in terms of communication, UX and UI.
After looking at the communication and visual design of many Salesforce Partners, patterns started to emerge. Most companies:
- Are clear about their offerings.
- Present a way for clients to get in touch with them.
- Always mention and/or reference Salesforce.
In terms of UI, Avenga’s clear/minimalist approach aligned with what helloworld was looking for, and clients seemed to agree as it’s currently considered one of the top 3 Salesforce Partners in the US.
Information Architecture
With this information and our client’s Analytics in mind, the next step was to start the reorganization of the website’s information, beginning with the website’s backbone: the navigation bar.
Here’s a screenshot of the website’s navigation bar before the redesign. Although it matches what other Salesforce Partners are doing, it comes as repetitive and unclear (what does “Our Expertise” mean? Is it the same as “Services”? Shouldn’t it be a subcategory of “About”?).
Yes, these questions might take seconds to ask and might even take seconds to be answered (just click on it!), but those seconds of confusion could very well be the reason someone abandons your site to search for a more straightforward one.
Queue: first proposal. We tackled our confusing categories by eliminating them altogether, leaving just the most crucial ones in sight. While this solves part of the issue –it’s no longer as confusing since there’s very little room for questions–, others remain, with some of them becoming even more evident.
For example, the impersonal quality of the –generic– first navigation bar, is now almost physically painful. After having eliminated the confusing categories, we were left with three cold and lonely options, none of them inviting or tempting in any way (do we even want to click on “Services” to figure out what this company does? Not really!). While we definitely didn’t want the users to be confused, we didn’t want to completely erase the impulse of wanting to know more that would lead to action (just click on it!!).
Here was our second iteration, with its shiny, new CTA. This simple addition brought a tone of excitement to the view, for now the user knows there’s someone behind this website, and they can even have a chat with them!
Still, this approach remains lacking and a bit cold. So…
Voilà! We arrived on this final navigation bar. The main changes being: the information is divided for a clearer narrative. On one side we have the straightforward answers (who they are and what they do), standing right there in the middle, ready to be clicked. On the other, the more personal aspects: a Login button and the friendly CTA.
Following some brainstorming, it was determined that the new helloworld website would present the user with the ability to create an account and have your own personalized space. So, by clicking the Login button and creating an account, access to a dashboard (more on that later) would be granted, allowing the user to manage their services, check their status and feel more in control, like the service really is their own.
To summarize, the new information structure is as follows:
- A Home to come back to.
- Products & Services, where the user can learn more about the helloworld Plans and the variety of services they provide.
- The contact page, to stay in touch.
- Login access to their personalized account.
- A CTA that reminds you someone’s there, only a chat away!
Design Process
Now that the backbone of the website had been defined, the rest of the design process could begin.
The starting point was a standard website template. Not awful, but definitely lacking. No personality whatsoever; not very attractive and not at all memorable. The UI needed to be eye-catching and friendly while remaining minimal and non-intrusive. Plus, it was important to establish a connection between the website’s look and the overall brand. helloworld’s brand colors and font should be integrated to create a cohesive, recognizable system.
It was determined that the use of flat illustrations was preferred and several “sketches” were made until we arrived at the final Style system.
After this experimentation phase, the final screens were developed. The helloworld blue, an allegory to Salesforce’s, was assigned as a main color. A secondary palette was created to contrast and it was applied to the flat illustrations and icons created for the website.
Montserrat and Roboto, simple, friendly, web-compatible fonts were chosen as main and secondary fonts. They provide enough character to make the design appealing, but don’t steal the protagonism of the colorful illustrations or bright blue backgrounds/accents.
The look of the menus was created inspired by the Material Guide, but personalized wherever possible in order to support the visual identity of the brand.
Finally we arrived at a product that looks good, is cohesive, is easy to understand and to navigate through, and that stands out from its competitors.
…aaand some more detailed looks of the final product.
Create a Profile
If you’ve made it here, you might be wondering “wait a second… what about the dashboard?”. So let’s talk about that.
The dashboard came as part of the helloworld’s new “Create a Profile” feature, which itself surges from the need of giving the user a more personalized experience. Previously, once they’ve acquired the service, all of the updates of what was going on with their respective projects had to be delivered by helloworld’s personnel via an in-person meeting, a video call or a phone call. This created a feeling of being uninvolved or not being a part of the work.
With the new feature, the user is able to set up their account, choose their subscription and both track and manage the state of their project (or projects), all from the comfort of their computer. The option to book a meeting remains available, for those who prefer it, but the “self-serving” way becomes the norm, providing a sense of connection and ownership.
The dashboard itself shows the user state of projects, gives statistics and other important information, provides them with an Activity Feed where they can track schedules and even setup meetings.
In terms of usability the idea was for the Dashboard to be as self-explanatory as possible, leaving little to no room for doubts or errors. The approach was to create a navigation bar at the side, from which the user could access their different tabs, and a main screen where the information would be presented. The welcome or home screen would always have an overview, but would be complemented with different widgets the user could choose from based on their needs and taste.
Review
Just to freshen up the memory, let’s go back to the Main and Secondary goals and review the work done.
- The information architecture definitely changed, the most significant modification being the addition of the User Profile feature.
- Because there was a reorganization of the architecture, a new navigation flow was created. Most of the website functions as a scroll down, with certain exceptions –each product and service getting their individual page, and the Login/User Profile getting their own as well.
- The UI went through a complete redesign, one that functions as an extension of the visual identity of the brand and sets it apart from competitors as a unique option; all while remaining discrete, clear and supporting of the information being communicated.
While certain categories and content aspects remained out of scope, this project was well received by the client and its customers –according to their further User Testing and Analytics review.
Marcela Cárdenas 