EFN Pro
Improving visual coherence and first impressions through a brand style guide and onboarding user flow redesign
THE BACKGROUND
Executed as part of my UX/UI certificate at University of alberta with a client from the legal-tech industry.
Modality: Remote
​
Team: Logan McManus, Sayla Day, Shelby Gervais
MY TASKS
[Heuristic evaluation] - Identify upfront and basic usability issues on the current product
​
​[Primary research] - Design a brand perception survey and analyzed its results.
​
[Brand design] - Define guidelines for the new brand proposal .Detailed the UI buttons guidelines.
​[Visual design]- Refine the main logo and submark, Generate and curate new visual imaginary.
​[Evaluative Research] - Design and conduct an A/B testing protocol
​
​
THE GOAL
EFN pro´s founder came to us with the need to improve their SaaS that simplifies the contract building process for digital creatives.
Considering that they were about to expand from B2C to B2B .working with agencies, their futuristic outlook for the product and based on our individual heuristics evaluations, our team goal was to:
Improve the visual coherence and overall first impression by redesigning the company's brand style guide and applying this new style on the onboarding user flow to better serve their audience and future plans.
​
Planning for a Sprint
Due to the briefness of the project and the fully remote modality of it we established weekly milestones, clear tasks assignment, constant team communication through Slack and weekly reviews of the project planner for readjustments. Our initial deliverables variated along the sprint.
UNDERSTANDING
USER´S FIRST IMPRESSION
To understand the spots where EFN pro´s brand identity could be improved, I designed a brand perception survey targeted to digital creatives from different backgrounds that have not had contact with the brand before.
Our ideal client to collect feedback from were Agencies because of the company's expansion to B2C, but considering the time available we decided that the outlook from independent digital creatives would also be valuable perception-wise.
In order to receive homogeneous feedback from the participants, they were shown pre recorded samples of the web app and website.
The results showed us that there were significant pain points, particularly in copywriting, accessibility and lack of professionalism in their brand image. Regarding their brand core attributes:
SURVEY RESULTS
Only 30% of the participants perceived their website landing page as “empowering” , decreasing to only 18% on their web app.​​
​
In terms of “professionalism”
40% of the participants found this attribute reflected in both their website and web app.
​​
​
The attributes with a higher rating were “friendly” and “optimistic”
Which are only complimentary to their image
KEY VERBATIMS
Copywrite
​
​“The copy is too generalized, I’d move on immediately because
I don’t really know what it does or how it does it.”
Brand image
​
“ if these are going to be legal documents, that might have to
stand up in court (..) I don’t want to use some janky app that looks like Geocities”
Accesibility
​
​“Letters are too hard to read because of the font”
“Does not meet WCAG”
Parallel to this process, the other half of the team focused on mapping out the current user onboarding journey where they were able to identify 3 main pain points:
-
The Landing page banner didn't communicate concisely and quickly What they do and Who they serve
-
Lack of instructions on how to confirm their email which generated uncertainty and frustration
-
The step to confirm the Terms & Conditions was mentally fatiguing do lack of hierarchy of the text
UNDERSTANDING
MARKET´S OUTLOOK
Regarding market research, we closely reviewed competitor's brand identity, imagery and functionality as well as messaging to get a clear sense of audience needs and who EFN Pro is and can be within this space.
Upon reviewing these elements our main takeaways were:
Competitor's Onboarding processes consistently connected with users and assisted them throughout and after the process by making the most of those digital touch points
​
Through a competitor messaging analysis we found examples of how their services are being pitched with clear and concise copywriting.
Upon analyzing their main logo and visual elements we identified that EFN pro´s current logotype did not aligned with the current Legal Tech market visual trustworthiness and simplicity characteristics as you can observe in the following image
CRAFTING A NEW IDENTITY
BETWEEN THE PRESENT AND THE FUTURE
After two rounds of ideation and feedback with the client that turned out to be a big shift from our initial moodboard, we consolidated a new brand identity that satisfied both our client vision and their users.
The new logo showed strength and professionalism, emphasising the attribute of “connection” between freelancers ,agencies and their clients by flipping the letter F, making it visually interlock with the E on the logo.
​
The Isotype and Submark showcase the same style in a more compact way, both maintaining the angular concept present in their current brand style guide which got extended into the visual imaginary that complements it with a touch of future as you can see below.
The color scheme balances out neutral and serious tones with touches of vibrant colors that show their friendly and open brand voice towards clients, eliminating the excessive amount of secondary colors that didn't offer enough contrast on application with primary ones.
The 2 new typographies are a mix of modern and classic styles that have great tracking and kerning ,considering that users mentioned “the current font does not project confidence”.
All these elements were compiled into a 12-pages style guide explaining their correct usage and other applications. click here to see the full style guide
TESTING
A NEW ONBOARDING
We initially aimed to deliver only a Brand style guide but, after reviewing the findings from the user survey and our market research, we found that the overall first impression of the platform needed some work.
That's why ,parallel to the design of the new brand style guide, the other half of the team focused on redesigning and prototyping the process from the landing page, to signing up, until they sign in as a registered user; responding to the main pain points captured in our research and also tackles the hierarchy, spacing, layout and consistency issues we found from the heuristics analysis.
Additionally to the pain points mentioned previously, we found that the onboarding process would benefit from:
More space given to the subscription and feature sections before signing up, we took these details out of the sign up form and created a separated space on the website instead.
​
Taking advantage of the email confirmation instructions to reassure users instead of stalling them.
​
To uncover which flow has greater clarity on the copywriting and forms a greater first impression, I designed a remote A/B testing protocol with a detailed moderator´s script. We also wanted to know if they perceived the new design as more professional than the current one.
We compared the process from the Landing page banner until the email confirmation instructions.
For the testing, 4 digital creatives that haven't interacted with EFN Pro before were recruited. To reduce a biased result, the flows were shown in a randomised way, the key words “sign up” and “sign in” were eliminated from the script and the users were asked to justify their answers in order to receive broader feedback. Check both flows below.
A/B TESTING MAIN RESULTS
3 out 4 participants said that it was “very easy” to understand what EFN Pro does from the new landing banner copywriting
On average, users took a similar time to complete both flows
All the users agreed that the new flow reflects more professionalism than the current one
FEEDBACK FOR THE NEW FLOW
There were grammar issues present in the prototype yet which made it less trustworthy
The Landing banner was missing a visual element that gave a sneak peek of the product itself
To see the full Figma prototype after applying the user's feedback CLICK HERE
LEARNINGS & CLIENT FEEDBACK
To Research-wise, in order to clearly measure the impact of the new identity ,the ideal strategy will be to redo the brand perception survey but considering our prototype couldn´t be compared 1-on-1 in terms of level of fidelity we rather to focus on testing the new flow and only testing the perception of professionalism of the new flow.
Finding middle ground between the client´s 2030 vision materialized and what the users will resonate with today was one of the most challenging aspects of the project. We tackle this by quickly pivoting to incorporate the client feedback as much as possible and by supporting our design decisions on User and Market research. In the end, Howard was very satisfied with our deliverables and was eager to share it with us.
