UX-UI Optimization

Challenge

Create a low-effort, high-impact solution to optimize the Suits & Sandals website and increase conversion rates.

Client

Suits & Sandals - Web Design and Branding Agency.

My Role

Entire product design from research to conception, visualization and client presentation.

Skills

Product design
UX design
RESEARCH
STAKEHOLDER INTERVIEWS
user journey Mapping
FIGMA DESIGN
cro
Impact-effort matrix
prototyping
CLIENT PRESENTATIONs

1. Defining the Problem

problem statement

Heading 5

Suits & Sandals (S&S)’ monthly website visits are lower than ideal and correspondingly, conversion rates are low as well. Furthermore, website user sessions are shorter than desired which is detrimental to SEO and means visitors don’t have time to pipeline to contact.

This means a lot of the burden for engaging new business falls on time-consuming proposals etc, rather than being organically sourced from website visitors.

S&S is a busy agency so we need low-effort, high-impact improvements to help increase organic conversions.

STAKEHOLDER interviews

Heading 5

Stakeholder M. is the company’s Art Director, and his priorities are accordingly more focused on the look and feel of the website, as well as restructuring the UI to reflect the company’s branding.


Key Outcomes:
  • longer user sessions on website
  • higher conversion rates per session
Heading 5

Stakeholder N. is the SEO expert and product manager. Accordingly, his concerns and priorities revolve around SEO and funneling.

N. posits that a large section of visitors reach the website through marketing pages such as blog posts. He is concerned with ensuring that each port of entry provides sufficient incentive and clarity to guide users to further explore the website.

Heading 5
Key Outcomes:
  • increase user click-through rate from one page to another
  • highlight reviews in homepage more effectively

2. Research Phase

secondary research

Heading 5

The nature of this project meant optimization suggestions couldn’t be collected from users (past and present clients) but would have to be inferred from secondary and competitor research instead.

Some key findings:
  • While mobile web use is higher, total time spent on websites is double on computers: people may be more likely to use desktops if they want to conduct in-depth research.
  • Users still spend 80% of the time above the fold.
Why it matters:
  • First, while mobile design is always essential for a web-design agency, the majority of potential clients will be viewing the site from a web browser.
  • Secondly, the S&S website is not very active above the fold, using it mainly as a holding screen. Some more action or information should be added.
Heading 5
Some key findings:
  • credibility and trustworthiness is essential to retaining web users
  • lack of clear messaging or contact information drives users away from a website
  • users strongly value clear contact information and a description of services on a website homepage
  • as part of building trust, company reviews are more valued in external websites than within the company site

CRO for CTAs (Call To Action buttons):

Heading 5
Findings:
  • CTAs with strong contrasting color to background convert best
  • Successful CTAs use action-oriented wording such as “Discover” as it triggers a sense of immediacy
  • Given the importance of this section, and the fact that users spend 80% of time on a website above the fold, there needs to be a CTA included here

3. Website Audits

competitor analysis: Hero sections

Heading 5

Analysis: successful hero sections include a short description of what the company does and a CTA prompting users to either get in contact, or learn more.

competitor analysis: PORTFOLIOS

Analysis: successful portfolios engage by using storytelling, figures, before and afters, and creative UI to present their success cases.

competitor analysis: SERVICES/CAPABILITIES

Heading 5

Each Service/Capability descriptor connects to a specialized Services page with further detail. UI is varied.

Auditing the current website

Heading 5

On a first look, a few items jump out, mainly revolving around clarity and actionability of the company’s message in the opening sections, and some minimal technical details such as WCAG color contrast requirements not being met.


While small, this is an important consideration for a web-design and development company that would be expected to be technically perfect.

4. Ideation: categorizing and prioritizing

Heading 5

Stakeholder interviews and research revealed that there are 4 key areas of focus:

UI: changing the UI to reflect a sophisticated boutique feel

Establishing Trust: transparency, competency and reputability are sufficiently transmitted

UX/Logic of site: ensuring home sections and other pages are presented in the most UX friendly order

Funnelling: ensuring each page includes CTAs or breadcrumbs that lead to further site exploration

sorting

Heading 5

Solutions for improvement were sorted accordingly into each of these four key categories.

Identifying these key priorities, and then organizing ideas to fit into them, ensures that the possible solutions, and therefore the project, remain focused.

impact-effort matrix

Heading 5

I used an Effort-Impact matrix to sort and prioritize improvements. The resulting priorities were:

  • Adding CTAs to increase click-through rates and add funneling strategies to other parts of the website, and breadcrumbs to return to other sections in respect of Usability Heuristic #3 (control and freedom)
  • Restructure the home page with an order that is more intuitive to potential clients
  • Adding detail to the Hero so as to add useful and actionable information above the fold

5. Visualizing: low-fidelity prototypes, and Presenting

Redesigning the hero

Heading 5

This Hero section redesign navigates the line between the restrictions (low-effort, no major UI change or re-brand) and the ideated solutions.

  • I kept the background looping animation, but I brought the Navbar into it as it reflects a more modern and sleek look.
  • I also made the Navbar sticky, in accordance with usability heuristics.I kept the company’s branding but added a CTA to link to the company’s Services page, funneling Users further into the website.
  • I finally settled on V2 because although V1 supports an F-style reading pattern, the background means there’s not enough visual weight on the right to balance the left side. Also, though the orange CTA stands out more, it’s outside of the company’s branding scope.

restructuring the home pAGE logic

Heading 5

Without even changing the content, there’s a lot that can be changed to improve the UX of the home page.

  • Per my research, establishing credibility and trust is essential to keeping users on a page. Thus, the company’s positioning statement and explanation (In essence: Why We Are Right for You) should go first, followed by a description of services or capabilities. I also added a CTA to the Services section in order to link it to its corresponding page.
  • The Portfolio is important, but it also showcases other people’s companies rather than your own, so it needs to come after. And while reviews are helpful, they will funnel prospective clients outside of the website to double check them, so this section is low-priority.
  • Finally, I edited some color combinations in the footer to ensure they are WCAG compliant.

USING BREADCRUMBS AND CTAS TO FUNNEL USERS further INTO THE WEBSITE

A key concern uncovered in the stakeholder interviews was that a lot of users reached the website through organic social media leads and would therefore enter the site through blog posts or similar. The current Blog post entries successfully funneled users by suggesting exploring related case studies, but lacked a way to access the collection of articles, which I added.


I also added CTAs to give prospective clients the option to view all projects, or to view the services provided.

Presentation

Heading 5

I presented the above findings and recommendations to the stakeholders. In addition to the solutions illustrated above, I also suggested:

  • Adding a contact page to meet user’s expectations for transparency and information
  • Since it’s a big aspect of the company’s work, giving “Webflow Capabilities” a more prominent role in the services section (it is not currently mentioned in the home page)
  • Changing some of the Home page copy to be more “on the nose” - for example the Testimonials section’s wording implies that this is what this is about, but this kind of low-context delivery can add up to cognitive fatigue for the user, and should therefore be presented more clearly.
  • Similarly, the same section presents a row of awards the company has received, without any explanatory note or tooltip, making their presence seem ill-considered. They would benefit from a short, descriptive title such as “2020 Winner: top 10 NYC web-design agencies”.

6. The Project in Review

limitations, Lessons learned, and improvements

Heading 5
JOURNEY-MAPPING

I made a very convoluted journey-map (not included here) to help me visualize user flows, using FigJam. While this was useful to organize and understand the flow of information, making a digital one wasted time where a rough, hand sketched one would have served the same purpose.

CONTACT PAGE

Time limitations are always a factor. While I included the recommendation for building a contact page in order to increase transparency and clarity, I didn’t have time to build a high fidelity prototype of this. With more time, I would have liked to have included this in the finalized project.

UI

At the time of this project, my confidence in my UI skills and in my authority to suggest UI changes was significantly lower, so I kept UI improvements to a strict minimum. With more experience and confidence, I would give some further UI recommendations.

Competitor Analysis

Since this project, I have conducted a more extensive Competitor Analysis review (view it here). An important insight I took away from this is that industry giants such as Pentagram and Attic Salt are generally not a good source of inspiration. That’s because, being so renown, they rely on their reputation to communicate, and do not use the website to express their personality. In a way these sites leave a very corporate impression which works well for a company that is large and known, but less so for companies trying to distinguish themselves.