top of page

Berlin connection is a new online platform to learn the German language. Nadine Zoll the founder of this company wanted feedback from an 
UX UI perspective on the website.
 

PROJECT OVERVIEW

Flag 2@2x.png

MY ROLE

Solely responsible for

UX / UI Solutions

Wrench@2x@2x.png

TOOL KIT

Google Form, Adobe XD 

sector@2x.png

SECTOR

Information Technology 

Clock 1@2x.png@2x.png

TIME

15 Days 

(Still in Process)

Group 171.png

PROBLEM 

The current website has a lot of content, hence the design has been heavily compromised on text hierarchy, readability, and navigation. As a result, visitors find it difficult to find the information they are looking for.

APPROACH

A suggested solution would be to first identify the most severe problems and address them to help improve
user experience for existing customers, which will also be beneficial to increase the number of new visitors. 

Identified and detailed the first and most important sections to redesign  

Landing Page

Screenshot 2021-10-28 at 14.09.07.png

Price Comparison

Screenshot 2021-11-02 at 09.52.25.png

Review

Screenshot 2021-11-25 at 10.28.43.png

The pool of problems

Screenshot 2021-10-28 at 14.09.07.png

2

3

1

5

4

Issue 1: NAVIGATION BAR

  • It contains unnecessary sections which can
    be clubbed together

  • The readability of the first three words is
    very tough

Issue 2: Less uniformity in the body copy

  • Numeric information has been mentioned at some places in the text and sometimes in numbers

Issue 3: Background Image

  • If the target audience is between 
    25-40 and 55-75 then the current Image
    is representing only young people

Issue 5 : Clickable things are not clear

Issue 4 : Missing attention to individual elements

  • Icons and text both are clickable which can cost users extra time

  • The subscription button is clashing with 3 top icons, hence it's not getting enough attention.

What are the goals of this landing page 

1

Improve Navigation to avoid confusion and create more clarity 

2

Add readability and tidy up the layout so visitors can read and understand the information about the product easily.

3

Improve business goals by making subscription plans more visible 

HMW

How might we increase the awarness and visibility of full product offering

How might we make users feel confiedent that they can find all the desired information

Ideation: Figuring out all possible solutions

Readability 

  • To increase readability use flat colour in the background 
    and enough colour contrast

FAQ

  • Mostly FAQs are placed at the bottom of the website, especially when the website is not long enough to scroll.

4

2

1

Navigation Bar

Screenshot 2022-09-08 at 14.11.56.png

Club all services together

1

Screenshot 2022-09-08 at 14.55.49.png

  • Meet, Podcast, Forum and Corporate are all services, which can be clubbed and shown in scroll function

  • Terminology 
    Services / Programms / Products

3

Log In

  • To avoid confusion usually, Register and Log IN can be offered as two options so users can decide fast.

Screenshot 2022-09-08 at 14.56.05.png

Recommended
Navigation Bar

Screenshot 2022-09-08 at 14.50.16.png

2

Product information

Screenshot 2022-09-08 at 14.17.31.png

1

2

3

Icons

  • Icons should be supportive
    to convey the text rather than overpowering the message

Typography

  • Text Heirarchy with different weights can help to convey information 

Intuitive

  • Buttons should be clear enough to click

Recommended
Solutions

Group 183.png
Group 200.png

3

CTA

4

Screenshot 2022-09-09 at 13.14.29.png

Once the user clicks on the
"Subscribe here" button.
He gets to see the plan to select

Screenshot 2022-09-15 at 13.47.18.png

Text "Explore Subscription plans
give the idea to the user that
there are multiple plans to choose

Via meet-up Platform, new joiners can try one session, which is sensible to put on the website too, to attract new customers

Exploring Layouts

Web 1920 – 2.png
Web 1920 – 5.png
Web 1920 – 7.png

Feedback on layouts

Web 1920 – 2.png

Positive

  • The social media icons as a speech bubble

  • Layout with clear visual heirarchy

Negative

  • Lot of  black colour dominance

  • Due to  black & white effect  the image has lost the mood of the situation.

  • Happy with the navigation Bar

Web page_1.png

iteration 2

Web 1920 – 14.png

Icon Style

icon style.png

iteration 1

Refining the design with a grid system and making it responsive

Used 12 Columns with 20 px Gutter width and 76 px  columns size for the website screen to make it pixel perfect and adapted to the Mobile screen to make it responsive 

Screenshot 2022-09-21 at 12.18.53.png

Used 12 Columns with 20 px Gutter width and 25 px  columns size for the mobile screen

3

Screenshot 2022-09-22 at 13.53.54.png

Price Table: The pool of problems

Screenshot 2021-11-02 at 09.52.25.png

1

Issue 1: Missing information hierarchy

  • Due to the same font size and weight,
    the subscription plan looks text-heavy
    and it is difficult to differentiate between
    three plans

2

Issue 2: Missing visual contrast

  • Vibrant Colour panels are competing with
    each other

  • Due to less visual contrast the most important 
    information doesn't get enough attention

3

Issue 3: Sign up Button ambiguous

  • Does user has to sign up to buy subscription?

HMW

How might we support user to find the difference between three plan quickly

  • This information differntiates all three plans which users should easily notice at first glance

Screenshot 2022-09-12 at 12.03.24.png

  • This information contains details of the course which are same for all

Screenshot 2022-09-12 at 12.03.47.png

  • The cancelation policy is the same for
    each plan so it can be placed outside the plan also.

Screenshot 2022-09-12 at 12.03.55.png

Recommended Solution

price.png

Review

Screenshot 2021-11-25 at 10.28.43.png

This section will be uploaded shortly.

bottom of page