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.
Project constraints
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
Project assumptions
Given that I don't work at UpBeing, 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
Findings
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:
Visual/Text Hierarcy
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.
Graphics/Personality
Current application of graphics throughout the site is distracting and does little to bolster brand personality and image.
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.
Seeing double.
.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.
Seeing double.
%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.
Nav you see it, nav you don't
Problem
-
Brand graphics distract from the copy. Graphics are not applied in an intentional way that supports brand message.
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.
FAQ Analysis
Lack of proper navigation impacts user freedom and control to return to marketing site.
If users wish to toggle different questions, they have to scroll or return to the top of the screen which can lead to users feeling lost, frustrated or a lack of control over their experience.
The switch to an external site with inconsistent branding could leave visitors confused and undermine their trust in the site/brand, leading to higher drop-off rates as users cannot easily return to the marketing site.
Careers analysis
.png)
Unclear from navigation, visitors are on the careers page
Text hierarchy and copy could be improved to inform users they are on the careers page
No clear CTA and users have to scroll to browse vacancies
Illustrations and graphics are not consistent with those on other pages and do not add value or support copy.
Careers (body) analysis
Layout, hierarchy and visual elements are overwhelming, not clearly broken into sections meaning no visual relief for visitors.
If users wish to toggle different questions, they have to scroll or return to the top of the screen which can lead to users feeling lost, frustrated or a lack of control over their experience.
Visual elements and Z-style pattern make it difficult to follow the information, signal to noise ratio could be improved
.png)
Streamlining for success
To streamline my design process and with my time and brand constraints in mind, I sought to establish a clearly 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)
A Hero Reimagined
Improved navigation and information architecture so secondary CTA is visible and consistent with established patterns
Improved text hierarcy helps guide the visitor's eye through the hero
Visual elements add to the page, directing visitor attention to the CTA button
Clear copy conveys benefit to visitor to sign up to waitlist. Social influence used to sway user's not to miss out.
Injecting Personality and Colour
By injecting colour and graphical elements in a more contained and focused way helps to elevate the information on the page rather than distract from it.
A new additional banner section and CTA signals a new section and is an additional opportunity to reinforce the idea to sign up/login.
.png)
FAQ Reimagined
Clear and improved navigation for visitors by incorporating FAQ into the existing site.
Improved hierarchy and visuals which support the information and draw users attention to actionable items (contacting support)
Additional navigation enables users to easily find the correct information
More distinctly highlighting the sections of FAQ through colour and headings reduces cognitive load on the users. Use of colour and graphics also reinforces brand identity and personality.
Careers Page Solution
Clear navigation and wayfinding for visitors (limitied by Figma prototyping to show this)
Improved text and visual hierarchy with CTA button for visitors who want to skip straight to vacancies - more in line with standard patterns.
Illustrations are consistent with overall site illustrations, improving brand reliability and trust, and layout more clearly communicates to visitor the benefits of joining the UpBeing team.
Careers (Body) Solution
I established clear text and visual hierarchy, consistent with established patterns for similar pages for improved comprehension and scannability.
Additional copy provides context and clarity for visitors to quickly assess and digest information.
Illustrations are consistent with overall site illustrations, improving brand reliability and trust, and layout more clearly communicates to visitor the benefits of joining the UpBeing team.
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?
When redesigning an existing site, it's important to question or consider the possible rationale for the existing choices.
Questioning your own choices throughout the process helps to acknowledge possible biases and eliminates unnecessary work/changes to the design.
Success metrics
Success metrics and conversion rates are crucial when it comes to website design, and especially for budding start-up companies.
By keeping these metrics in mind throughout the process, you can produce a more nuanced and tailored solution that balances user and business needs.
Realistic goals
I originally wanted to design responsively but decided to focus on perfecting the desktop version with the limited time constraint, especially having found further inconsistencies with the mobile and website views.
Setting realistic and achievable goals is important to avoid possible sacrifices on quality of output.
Testing, 1, 2, 3...
I initially wanted to conduct user testing prior to redesigning the site so as not to work solely off my own assumptions and evaluation findings. However, this wasn't possible with potential tester availability given the timeframe. So I pivoted and decided to conduct user testing of the original and redesigned versions once completed and to make adjustments at that point. Whilst I considered responsiveness throughout my design, I chose to wait and conduct this after user testing.
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.