JavaScript Disabled


We detected that JavaScript has been disabled on your browser. If you want to enjoy full functionality of Plogged and have a wonderful surfing experience on this website you need to enable JavaScript on your browser. Without JavaScript Plogged might not function properly.

Lobab Brand Identity and UI/UX Design | Plogged
Lobab Brand Identity and UI/UX Design

Lobab

Brand Strategy / Brand Identity Design / UI/UX Design

Client

Lobab, which is an Arabic word that means "Book Extracts", is known for it's provision of book extracts of nonfiction books as an alternative to reading hundreds of pages of what a single book could be.

Problem

Lobab had vision of a product with the aim to make reading a habit for people. They were in the process of building the product/marketing website and mobile app for their idea but needed a visual identity as the foundation for their brand.

Solution

We designed the visual identity for Lobab. It included a Logo, Typography System, Colour Palete, Stationery Design, Brand Guidelines, Graphic Elements and Social Media Kit.
Lobab Logotype
Lobab Logotype
Lobab Logotype Construction
Lobab Graphic Element
Lobab Circle Element
Lobab Circle Element
Lobab Colors
Lobab T-Shirt
Lobab Typeface
Lobab Typeface
Lobab Arabic Typeface
Lobab Brand Guidelines
Lobab Street Poster
Lobab Typeface
Lobab Stationery
Lobab: Read On-The-Go
Lobab Outdoor Billboard

Would you like to also design the UX/UI for Lobab?

After successfully completing the visual identity for Lobab, we were tasked with designing the UX/UI for the their Marketing Website and Web App from scratch, which will includes screens for the End Users, Affiliates and the Administrators/Super Administrators. So how do we go about this?
1
Meeting and Collaboration.

Collaborate with the Project Manager to get insight on the product, analyze and explore UX solutions, develop strategy, and define users journey.

2
Creating The UI Style Guide.

Create a consistent guidelines to be used through out the web and mobile platforms to ensure a cohesive product design and User Experience.

3
Design. Review. Deliver.

Create Wireframes and Prototypes, review then improve results where necessary, and hand-off product designs to developers.

Lobab UI Style Guide
Lobab Landing Page 01
Lobab Landing Page Final
Lobab About & Lobab Careers Screen
Lobab Pricing & Lobab Pricing for Teams Screen

Book Reader

The Lobab book reader has tools take will make reading and taking notes easier than ever. With this reader you can highlight important insights, take notes, adjust text size, and switch to dark mode. You can also read and listen to audio simultaneously.
Lobab Book Reader
Lobab Book Reader - Night Mode
Lobab App: Onboarding
Lobab App: Setup Library
Lobab App: Read/Listen Flow

The Result

By the end of our 8+ months partnership with Lobab, a solid foundation for success was laid for Lobab to ride on. We helped Lobab visualize its idea from scratch. A working prototype of the Mobile App, Website, Web App, and Administrative Suite was designed alongside a visual design system which the team used for consistency throughout their journey to launch their first product.

We have continued to partner with Lobab and collaborate with their development to bring the product to life. We will share their success story as soon as they launch.

Visit Lobab's Website