lets-connect-bg
lets-connect-man
lets-connect-girls

DA Studio, web development company in dubai, introduces Let’s Connect

The virtual programme is comprised of fun and easy activities in each category, curated for everyone to participate in, regardless of age, gender, background, or ability.

CLIENT

LetsConnect

DELIVERABLES

Design & WebDevelopment

LIVE WEBSITE www.letsconnect.ae
lets-connect-c1-1
lets-connect-c1-2
lets-connect-c1-3

ABOUT LETS CONNECT

Let's Connect is a website powered by Ma'am Authority of Social Contribution in Abu Dhabi. Let's Connect is a first-of-its-kind virtual programme in Abu Dhabi aiming to virtually connect communities and conduct social inclusion programmes among Abu Dhabi residents. Community engagement initiatives are led by ambassadors representing four categories of interests: Health & Wellness, Community, Arts & Culture, Business & Coaching

  • Health & Welliness
  • Community
  • Arts & Culture
  • Business & Coaching
monitor-mockup

PROBLEM STATMENT

Adding Rich content including Videos, Pictures & Social Media Content under all 4 categories. A dedicated section for Volunteers, Partners & Media Center.

lets-connect-c2-1
lets-connect-c2-2
lets-connect-c2-3

CHALLENGES

Complex Design with a lot of animations, in both languages English & Arabic with Right to Left & Left to Right Support.

solution

SOLUTIONS

  • An Interactive & responsive Home Page Design with animations, sliders & videos.
  • Embedded Social Media (Youtube, Facebook, Tiktok & Instagram) Posts on Category Pages.
  • Volunteers Feature where users see benefits for being a Volunteer and Can Apply for that.
  • Media Center that includes Blog Posts & Media About the events Partners page to show all list of partners.
  • About Us Section where Users see list of Ambassadors & know about Lets Connect Initiative.
  • Multilingual Support For English And Arabic with RTL & LTR support.

DESIGN PROCESS

01 DISCOVER
  • User Interview
  • User Research
  • Competitive Analysis
02 DEFINE
  • Empathy Map
  • Journey Map
  • Persona
03 IDEATE
  • User Flow
  • Card Sorting
  • Information Architecture
04 DESIGN
  • Wireframe
  • Visual Design
  • Prototype
05 TEST
  • Usability Testing
  • Userflow Testing
  • Design Testing

USER FLOW AND WIREFRAMING

It is a wireframe that closely resembles the end product. It fills in the details that were left out in the low-fidelity wireframes.

reason is the spacing looked odd without that adjustment. Sure, that change does add a lot more white space to the bottom, but that's what that taught me. To not be afraid of empty spaces as we are using the brand identity background image all over the website.

temp1
temp2
temp3
temp4
labtop

IMAGE AND FONT OVERVIEW

We noticed that the typeface needed to be larger in the visual design, large enough to be read well. Due to the picture overlay.

HOME

However, we included a card in the graphic design to encourage people to join in program. This streamlines the design by providing the user with a clear choice along with all of the event specifics. This method of showing cards adheres to the program's easiest-to-understand design.

labtop2
labtop3

BACKGROUND IMAGE

The reason for this is that without the spacing appeared weird. Sure, that alteration gives the bottom a lot more white space, but that's what it taught me. Because the brand identification background picture is used throughout the website, don't be frightened of empty spaces.

Process Model:

Agile Methodologies (Scrum).

Tool Used

tools

Design: Zeplin, Figma

Website: Wordpress, PHP

Project Duration

10Weeks 18+Web Pages

BRANDING

BRANDING

Color Palette
Brand Typface

Aa

SF Pro

AaBbCcDdEeFfGgHhIiJjKkLMmN
nOoPpQqRrSsTtUuVvWwXxYyZz

0123456789
!*@$%&#)/.,

Title

Heading

Lead Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry
Paragraph Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry
Button Learn More

HIGH FIDELITY MOCKUPS

mockup-lets-meet-1
mockup-lets-meet-2
mockup-lets-meet-3
mockup-lets-meet-4
mockup-lets-meet-5
mockup-lets-meet-6
mockup-lets-meet-7
mockup-lets-meet-8
mockup-lets-meet-9
mockup-lets-meet-10