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.
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
PROBLEM STATMENT
Adding Rich content including Videos, Pictures & Social Media Content under all 4 categories. A dedicated section for Volunteers, Partners & Media Center.
CHALLENGES
Complex Design with a lot of animations, in both languages English & Arabic with Right to Left & Left to Right Support.
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
01DISCOVER
User Interview
User Research
Competitive Analysis
02DEFINE
Empathy Map
Journey Map
Persona
03IDEATE
User Flow
Card Sorting
Information Architecture
04DESIGN
Wireframe
Visual Design
Prototype
05TEST
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.
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.
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.
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
