top of page
logo_horizontal_black.png
An evaluation and redesign of UpBeing's current marketing website.

Role: UX/UI Designer

Timeline: 24 Hours

Tools: Figma

Platform: Android

THE CHALLENGE
An evaluation and redesign of UpBeing's website to improve the user experience in 24 hours.
THE SOLUTION
A scalable, quick and easily implementable design, requiring no code.
THE PROCESS
Applying heuristic, UX and UI principles and guidelines to improve the current experience.

Constrained Creativity

With only 24 hours allocated to the project, I wanted to set some constraints to narrow my scope and focus.

 

Given that the company is a start-up (and startups often have 1000 things to do at any one time) I strove to make the least amount of changes but with the biggest impact.

 

(Did I achieve this? You be the judge and let me know!)

Solution must be

On-brand with visuals, copy and layout

Integratable with current platform (Wix)

Easily implementable (no coding)

Completed in 24 hours

Assuming the Best

As I don't have insider information, I had to make several assumptions regarding marketing/product strategy and intent behind current design, product and platform choices. These included: 

Interim Site

Current site is an interim marketing site whilst they focus on Beta product

Targeting 18-45

Based on language and aesthetics, target audience are adults likely 18-45

Early Adopters

Purpose of site is primarily on conversion rates, early adopters for Beta

Waitlist Benefits

Signing up to the waitlist would result in some tangible benefit for visitors

Brand Style

Colour is engaging and lively. Brand voice is friendly and supportive.

Brevity is key

Focus on a concise setup allows for visitors to focus on core task - signing up to Beta waitlist

Evaluating the current experience

I evaluated each page of the website which consisted of the landing, FAQ and careers pages.​

From my analysis of the site, I noticed several key issues and breaches of the following UX heuristics and principles:

  • Jakob's law

  • Aesthetic usability effect

  • User control and freedom

  • Aesthetic and minimalist design

  • Consistency and standards

Uncovering the Issues

Given that I wanted to make the biggest impact with the least amount of work required for implementation, I decided to focus on the following site-wide key issues:

Text Hierarcy & Copy

Text and visual hierarchy is confusing and especially in the hero sections of each page.

Visual Consistency

Illustrations used are not consistent and do not add value or reinforce marketing copy. 

Graphics & Personality

Current application of graphics is distracting and doesn't bolster brand personality and image.

Navigation

Navigation hides CTA for login and careers page which could cause confusion for visitors.

Lack of CTA's

Lack of consideration for customer journey's. Opportunity to maximize conversion.

UX Optimization

FAQ page leads to external site and is not optimized for a pleasant visitor experience.

Delving into Design: Before and After

UpBeing_Careers.png

Converting Visitors the Write Way.

screencapture-upbeing-ai-2023-04-06-11_46_29 (1) (1).png

Problem

  • Poor text hierarchy makes it unclear where to look first, confusing the visitor.

  • Missed opportunity for persuasive copy to reel in visitors by highlighting benefit to signing up to waitlist.

UpBeing Landing.png

Solution

  • Improved text hierarchy helps guide the visitor's eye through the information for a smooth first impression.

  • Clear copy conveys benefit to visitor to sign up to waitlist. Social influence used to sway visitor's not to miss out.

Consistency is Key

screencapture-upbeing-ai-careers-2023-04-06-11_47_53 (2).png

Problem

  • Illustrations are not consistent and do not add value to copy.

  • Overall layout is cluttered and disorganized and does not conform to established patterns.

UpBeing_Careers.png

Solution

  • Illustrations are consistent with overall site illustrations, improving brand reliability and trust.

  • Layout is organized, scannable and clearly communicates to visitor the benefits of joining the UpBeing team.

Showcasing Personality; Simplifying Pages

screencapture-upbeing-ai-2023-04-06-11_46_29 (1) (2).png

Problem

  • Brand graphics distract from the copy. Graphics are not applied in an intentional way that supports brand message.

UpBeing Landing (5).png

Solution

  • By injecting colour and graphical elements in a more contained and focused way helps to convey brand personality and information more clearly on the page rather than distract from it.

Navigating to Success

Screenshot 2023-05-06 at 5.56.06 PM.png

Problem

  • Navigation and information architecture hides key CTA and login button for beta testers and is inconsistent with standard navigation patterns.

Screenshot 2023-05-06 at 6.03.14 PM.png

Solution

  • By rearranging the information architecture, the site navigation will better serve a variety of visitors, whether prospective employees, early adopters or potential customers.

From Zero to Click Hero

UpBeing_Careers.png
UpBeing Landing (5).png

Additional solution screen

Problem

  • Missed opportunities throughout site to maximize on conversions for waitlist sign ups and consider different use cases for visitors.

Solution

  • Addition of CTA button for visitors who want to skip straight to vacancies improves UX and is in line with established patterns.

  • Additional banner sections and CTAs provides breaks for the visitor and further reinforces the idea to sign up/login.

FA Who?

screencapture-upbeing-zendesk-hc-en-us-articles-8476473863053-Frequently-Asked-Questions-2

Problem

  • Site and experience are not optimized for visitors.

  • External site with inconsistent branding undermines their trust in the site and brand, and could lead to higher drop-off rates as users cannot easily return to the marketing site.

  • FAQ section is not optimized and can lead to frustrated visitors feeling a lack of control over their experience.

UpBeing_FAQ (1).png

Solution

  • Clear and improved visitor journey by incorporating FAQ into the existing site.

  • FAQ is more scannable by grouping FAQs into sections and using dropdown items to reduces cognitive load on the users. 

  • Additional navigation enables visitors to easily find the correct information

Streamlining for success

To streamline my design process and with my time and brand constraints in mind, I sought to establish a clear hierarchy and structure with foundational elements, namely type and colours. I focussed on extracting these from the existing site for a consistent approach to branding.

Typography.png
Colours (1).png

Lessons learned

I really enjoyed challenging myself and designing within the constraints of an existing brand. Trying to analyze certain design decisions helped me to grow as a designer and consider external factors that might have contributed to certain choices. Some of the key takeaways from the project for me included:

Why, though?

Questioning your own choices throughout the process helps to acknowledge possible biases and eliminates unnecessary work/changes to the design.

Success metrics

By keeping success metrics in mind throughout the process, you can produce a more nuanced and tailored solution that balances user and business needs. 

Realistic goals

I wanted to design mobile and desktop views but decided to focus on the desktop viewport. Setting realistic and achievable goals avoids possible sacrifices on quality of output.

Testing, 1, 2, 3...

I wasn't able to conduct user testing within the timeframe due to lack of participant availability. So, I decided to include this in the next phase of the project. Also, I initially wanted to build viewports for both web and mobile, but again with the time constraints, I chose to wait and conduct this after user testing and feedback.

User Testing

I plan to conduct user testing on both versions of the site, starting with the original site to implement feedback. Testing will focus on potential customers as an initial priority to validate assumptions made.

A/B Testing

I would also like to focus on A/B testing on the CTA buttons to establish any effect on which might lead to a higher conversion rate and to adjust the redesign as necessary, based on feedback.

Responsive Design

After testing, I would like to implement a further evaluation on the mobile version of the site. I would then look to adapt the design so that it will be responsive for both mobile and tablet viewports.

bottom of page