UI / VISUAL DESIGN
___
Veroguard/W3digital
Responsive web
My role
VeroGuard is a leader in cyber security and prevents unauthorised access to cyber systems and data.
..............
I was hired by W3.Digital to help with the design revamp of VeroGuard’s web presence across mobile, tablet and desktop.
My role was to develop the look and feel of the site, ensuring coherence and alignment with recent brand updates across print.
The challenge
VeroGuard’s web presence was outdated and didn’t effectively communicate
the brand. With a new set of product offerings, they were in need of new content along with a new look and feel which spoke to the brand.
With an existing print style guide which was limited to black and white,
we needed to work towards creating a web presence that clearly conveyed VeroGuards values, personality and offerings.
Elevating the site to a modern and dynamic look and feel along with
an intuitive and engaging experience on all devices was the goal.
Tasks and deliverables
- Concept sketching
- Visual design direction
- Low fidelity wire frames
- High fidelty UI mockups
- UI and interaction specifications
- UI accessibility outline
- Presenting UI concepts to client on a weekly basis
Tools used
Who are we designing for?
Three audience segments were the taget:
Big decision makers want high level detail. The Tech experts will advise the decision makers and want to see more detail.
Smaller businesses are less savvy and need more hand holding. They will likely place online orders (phase 2)
Enterprise customers will want to have 1:1 dialogue and absolutely won’t be placing online orders.
Needs and goals
The site had to be simple, strong, and to the point.
Two main purposes of the site were:
1. Educate: Quickly inform visitors about VeroGuard - giving them key points and info they need
2. Get Leads: Encourage visitors to make an enquiry
Some of the key needs:
- trusted advice to find the right solution
- give people confidence and piece of mind
- to reduce risk
- to reduce complexity
- a peace of mind regarding security
- to protect online payments and keep documents secure
Information architecture
When I began this project, most of the wire frames had been created and the navigation structure had been thought prior to my engagement.
As my role was more UI focused there wasn't an expectation to look at UX and IA, but I think it's always important to come into a project thinking about these even in a UI role. So, I did propose setting up some quick IA testing using TreeJack so we could test and validate the proposed navigation structure.
Due to strict time restraints the team were unfortunately reluctant to persue this.
Defining the visual language
Having discussed with W3.digital who we were designing for, their needs and goals, I began thinking about the visual style and how to approach it.
UI research:
looking at what others were doing
We looked at what some of the competitors were doing visually and stylistically and noted positive and negative aspects and where we could differenciate visually.
We had a look at sites the client liked from a visual/style perspective. Sites such as Tesla and Apple were at the top of the list in terms of visual style the client gravitated towards. Concise info along with quality imagery, uncluttered and easy to navigate screens is what they were wanting to capture with the new re-design.
Steering the
visual direction
To help steer the visual and UI design in the right direction and to have a ‘source of truth’, I used the Inception diagram. It was a useful tool to help us narrow down visual language and mood.
It was a beneficial way to define the thinking behind the app UI style and also encouraging Stakeholders to be involved in the design process.
Preliminary visual design concepts
Based around the veroguard styleguide, I created initial concepts which incorporated the VeroGuard logo image by using the shape in interesting and dynamic ways throughout the website. We felt the proposed designs evoked the core values of VeroGuard - Trusting, safe, conservative, and secure.
The angled shapes were created to help visually attract and retain the users attention and keep them engaged. These dynamic shapes also help guide the users eye down the screen to help them get to where they need to as quickly and easily as possible. In addition, the shapes help break up the content into digestable sections to also aid usability.
One step back to re-think visual direction
In the first visual design showcase meeting, the client had some concerns with the image based concept. They didn't connect with the images and felt they weren't helping to covey the message.
After the initial design meeting with VeroGuard, we took a step back, digested their feedback and revisited the core values and key words we wanted to associate with the visual design and I then iterated on the concepts.
This is where our weekly catchups were vital in moving forward quickly.
Second round iterations
We stripped the imagery right out of the design and kept the shapes solid black to really emphasise the core values of trust, safe, conservative and secure.
We also tried a few variations on the solid black with soft gradients and a charcoal grey.
Template and modular design
We designed a future-proof, modular system providing flexibility for content growth. This allowed the VeroGuard team to add and edit content with ease whilst ensuring brand and design consistency across the site.
To help VeroGuard manage the website and to differenciate the various sections,
we created 5 templates with different header shapes using the VeroGuard logo mark.
T
.
Mobile design, usability and guiding principles
Paying close attention to design on mobile
It was important to making sure the design for mobile and tablet view was carefully considered on every screen. Desktop template designs needed to scale and adapt to different devices sizes but for a number of screens, design of UI components needed to be modified to suit the mobile context.
It was also important to keep text to a minimum for viewing on mobile so we worked with the copywriter from the beginning with this in mind.
Introducing colour
I proposed introducing a new colour to the site/digital branding to help usability and engagement.
With corporate branding consisting of purely black and white, the client was initially reluctant to introduce another colour. But I suggested they consider incorporating this colour in a minimal way to help usability.
Accessibility
By introducing the new colour to CTAs, text links and other important focal points throughout the site, it was important that the colour passed WCAG standards. I tested the colour contrast ratio ensuring it was at least AA compliant.
I also supplied documentation to specify the web focus order for screen readers.
Other accessibility considerations:
- tap and touch targets, especially on mobile
- text at web standard size
- make screens easy to scan and understand by grouping related content and using white space and proximity
- Ensuring page can be zoomed to %200 without any ill effects
Validating design decisions
On one of the screens, the client was very eager to place their logo to fill space and scale it up to huge proportions.
I offered guidance against this and talked through with the stakeholders our justifications.
The black shield shape in the header is a design element that should be used as a strong solid colour on it’s own to create impact and engagement. But at the same time and more importantly, this minimalist approach let’s customers focus on what is important ie the content and call to actions. In cases where content sits within the black shape, this serves
a pupose within the context of the page.
By adhering to the design principle below, ‘maintaining simplicity and clarity’
we want to avoid cluttering the page with elements that don’t serve a real purpose and need. Placing a white shield within the black shape has no purpose and goes against the design principle above.
‘Maintaining simplicity and clarity’ is a minimalist design approach, where we show only what is important at any given time in a clear and concise way to help the customer achieve what they need to on the site with as much ease and less distractions as possible.
Interaction design
Micro interactions were explored and created in a way that helped usability, engagement and added to the enjoyment of the whole website experience.
Enhancing the experience through micro-interactions
I explored some interactions and transitions to help lift the usability, enjoyment, and overall experience of the website.
This example was an older iteration of the 'reveal menu drawer' interaction on mobile. After some more exploration we decided to move the menu button to the bottom and have the drawer slide out from the left.
Working closely with front-end devs
I supplied all assets and specs to the front end dev team and continued to worked in parallel to ensure the build was consistent with design.
Paying attention to spacing is always important to let the site breath, helping content to flow and be more easily digested.
The layouts were not your typical web layout and therefore had some complexity from a technical standpoint, especially switching between breakpoints. But the front end lead was up for the challende and confident that he could bring it together and make it work. And that he did.
Outcomes
The MVP was released and launched successfuly.
The client was openly greatful for the whole process and specifically the design process where the weekly showcases really gave them clarity and transparency around the progress and shaping of the re-design.
In summary
Working with the team and client, I provided UI and visual design solutions along with interaction design and accessibility guidance to help create an overall elevated and improved experience.
I’d love to chat about how I can help you. Say hi over email.
Contact me
© Jeremy Laycock