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.
Converting Visitors the Write Way.
%20(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.
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
.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.
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
%20(2).png)
Problem
-
Brand graphics distract from the copy. Graphics are not applied in an intentional way that supports brand message.
.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
Problem
-
Navigation and information architecture hides key CTA and login button for beta testers and is inconsistent with standard navigation patterns.
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
.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?
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.
.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.
.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.