E-Commerce in Egypt – The Tipping Point: Episode 1

Episode 1: Identifying the stakeholders & controlling forces

Being at the heart of the E-Commerce scene in Egypt and while working on the preparations for robusta’s upcoming E-Commerce Summit 2018 (contact me if you’re interested in participation) I can’t help but keep asking myself what’s left till the market reaches its tipping point in Egypt. Inspite of having one of the highest social media penetration rates in the world with more than 33 million users on Facebook alone massive increase starting 2011 and between 2014 to 2017,  E-Commerce in Egypt hasn’t reached anywhere near the global E-Commerce growth rates for the obvious reasons like, for starters, the fact that the Egyptian customer is still hanging on having to see and feel the product they’re buying to make sure it’s good and being afraid to use their credit cards online and fearing their goods won’t be shipped (aka Egyptians have trust issues).

Being half engineer and half consultant, I couldn’t help but tackle this from a merely analytical perspective and run a quick mostly qualitative assessment of both the market stakeholders and controlling forces through a series of upcoming blog posts in an attempt to at least present the problem and try to find practical solutions and get you, the customer, the business owner, the rising entrepreneur, the big brand and anyone who believes, like me and everyone at robusta, that there’s a great future and opportunities yet to be snatched in the business of E-Commerce in Egypt, to weigh on this matter and give each other pieces of our mind, turning this from the thoughts of one individual to a discussion among those who are concerned and who knows what else. For starters, Identifying the stakeholders is mostly straight forward; however, identifying the controlling forces can get a little bit tricky.

Out of our experience at robusta for the past 4 years with several E-Commerce implementations, some of which are true models for successful case studies, I believe the most critical mix to look at of stakeholders and forces would be:

  1. Supply: that would be the retailers and product providers. Think B.TECH.
  2. Demand: that would be the end consumers. That’s everyone of us, the end users.
  3. Mediators: in some cases there’s a marketplace acting as a mediator bridging the supply & demand. Think Souq, Jumia, Edfa3ly, etc..
  4. Technology: that comes at the core and probably the key contributor to E-Commerce over the traditional brick-and-mortar retail and distribution.
  5. Logistics: though a key pillar of traditional retail, E-Commerce adds an additional layer of complexity to optimize on cost and meet customers’ expectations.
  6. Customer Service: in a global world that truly brings international E-Commerce players as close to local consumers as local players, customers expectations have truly hit the roof
  7. Marketing: between the classical 4Ps and the need to go almost fully digital, marketing becomes one of the key barriers to new entrants to the market to realize the full potential of the market
  8. People: most analysis would overlook the role of knowledgeable workers, management capacities and small business owners setting and E-Commerce strategies and respective implementations.

In the following series, I will look at each of the aforementioned and attempt to do an assessment of the current status of each in an attempt to look at the missing jigsaw pieces and anticipate the moment in time where they all click and unleash a huge potential of an economy on its own that can be a critical driver for economic development as it does not only develop the retail business but obviously creates lots of jobs on the logistics, customer service and significantly contributes to the development of the technology and financial sectors.

Would love to get thoughts on this as I plan to break it down into a series of detailed analysis of each of the aforementioned and I’m quite flexible to adjust for a more inclusive perspective that’s hopefully one step forwards towards the market tipping point.

I believe other perspectives looking at the topic could also be quite enlightening, one of which would be the study of the evolution in other more developed markets and the different phases it has gone through until it reached maturity.

5 Design Tips for a Successful Black Friday Campaign

It’s that time of the year again and Black Friday is upon us. The sales are everywhere; there’s something new everywhere; deals here and deals there; but what makes customers buy off of one website over the other? We’ve gathered our fair share of easy tips to help your e-commerce platform maintain a successful Black Friday campaign.

Stay true to the brand
Avoid visual clutter by using simple designed ad banners with clear call to action. The designs should stick to the brand identity which makes the user related more to the website.

1

2

Help your users get to what they want
Listing all products in the sale next to each other is overwhelming. Use categories to help the users navigate to the right section of the website, as well providing filters to narrow down the range of products displayed.

After clicking on the black friday banner, the page displayed include products featured as deals of the day, hottest deals and a list of categories which have deals.
After clicking on the Black Friday banner, the page displayed include products featured as deals of the day, hottest deals and a list of categories which have deals.

Make your discount percentages pop
Offers and discounts are great driver for the shoppers to take the decision to purchase a product (link). Discounts are the core of Black Friday campaign. Featuring those discounts visually and in percentage has a great impact on the experience.

45

Tell the users the what they will really pay before they click “checkout”
61% of users abandon their cart and the checkout process when they realize that extra fees are too high. Deceiving the users by using a website wide banners promoting free shipping which isn’t the case when they proceed to the actual checkout, leaves a bad impression.

Macy’s promotes free shipping in the header and in the product page but when the user tries to checkout, they add shipping fees anyways.
Macy’s promotes free shipping in the header and in the product page but when the user tries to checkout, they add shipping fees anyways.

Get to know your users better
Black Friday is a great opportunity to observe your users behaviour and their shopping patterns through analytics and usability studies. Note down what negatively affects the experience, handle it and iterate. Read more into how to do a low budget usability analysis of an e-commerce website.

These are just simple design tips that you just can’t overlook; however, an awesome and successful Black Friday campaign (or any sale for the matter) doesn’t only stop at these, without proper marketing, a secure website that actually works, great effort exerted by your customer support team and the right partners to get your goods to the customer, you don’t stand a chance in this highly dynamic season.

4 Things Shaping the Future of Online Shopping


future_shopping

Looking back at the last 10 years, tracking the evolution of the different technologies has become quite challenging of a task; one reason why is the speed of said evolution, another could be the immense number of new tools, practices and technologies surfacing in a single month let alone a year or two. However, if this has to tell you anything, it’s the fact that the current generations are aiming at surpassing themselves in terms of achieving the impossible and in return leveraging the experience of living from the tiniest detail to the greatest.

When it comes to one thing that has definitely evolved in the past few years in human lives, it’s definitely the shopping experience. Since we’re now almost always online, our mere day-to-day interactions online produce an incredible amount of big data which, with the increasing power of computing, is used to make our experience, as customers, richer, more seamless, more entertaining and of course more fulfilling to our needs.

Imagining what the future could be like could appear to be easy from afar yet remains difficult because you never know what the next breakthrough is or where it is coming from. However, if the future is anywhere, it’s lying right in the palm of our hands, the smartphone. Think of all the things made easy by having your smartphone on you, countless, right?! Consumers are now engaging with brands on various channels through their mobile phones, be it social media with the brand itself or finding inspirations from influencers or with the brands’ e-commerce platform.  The sheer number of clicks and actions a customer has to go through to go from engagement to purchase is still hindering. Brands have been reinventing the customer experience through mobile by distributing their online presence between e-commerce and mobile apps for more reach, all you have to do is scroll, but it is not yet enough, carts are still abandoned and needs are yet to be fulfilled in a better way.

We imagine a future with less friction and an even more seamless experience and we think the next 4 things are what will be taking our shopping experiences up a notch or a few in the next few years.

AI2

Machine Learning and AI

With the help of machine learning and AI, your desired product will find you not the opposite, since a unique experience is all about being personal, an experience tailored just for you, right? If you think online shopping still lacks the presence of someone there to turn to for inquiries and questions, chatbots are now developed and equipped with all the information anyone would need, ready to answer all your questions and might even take over the whole customer support as we know it.

Augmented & Virtual Realities

You will be able to find all the info and reviews you’d be searching for to determine whether you should purchase X or Y as you point your phone towards the product using AR experiences online or in-store. The lack of the sensory element in online shopping will be a thing of the past, overcome by creating engaging buying experiences using VR though which you can see the product, place it where it fits, try it on and customize it to your taste.

stock-photo-fingerprint-landscape-created-in-a-graphical-fashion-with-hard-shadows-d-illustration-447676723 copy

Digital Fingerprinting

You won’t be afraid to share your personal information to make a purchase online because you won’t have to when you can present your unique digital fingerprint for authentication, reducing the number of steps needed to checkout and leading to higher conversion. Digital fingerprints will also be of great help in avoiding fraud in online transactions protecting both retailers and customers.

online-shopping

Personalized Payments

Online payment is still such a hurdle to many, right? Personalizing payments should come as a natural evolution to personalizing the whole shopping experience. Retailers will be providing means for customers to decide when and how much they’re willing to pay, gaining not only their loyalty but also the certainty to come back for more.

As a retailer, are you ready for the future? Are you ready to engage the customer on more than meets the eye? The survival in this game will be not only for the smartest, but also for the first and not necessarily the best anymore. Hop onto the train of the new first and you’re guaranteed a notice from a customer overwhelmed by choices yet holds the upper hand all the way and is always looking for only what calls their name.

UX in E-Commerce: Web vs Mobile (Pt.2)

In part one of this post, we reviewed the differences between a desktop web and mobile design throughout an e-commerce website. We reviewed some of the important pages including: home, category, product and cart page.

In this post, we continue the journey through another four key screens.

Search (5/8)

Search functionality is one of the most crucial features that should not be only included in the e-commerce website but also implemented in the most efficient way. The usability of this functionality doesn’t only lie in the interface of the search bar but also in how smart the search is.

Web view:

00-search-web1

01-search-web2

Amazon search got it right. Just from generic keyword like “Laptop”, it offers suggestions related to everything a laptop needs as well as the ability to search in a specific category.

Mobile view:

02-search-mob

Emphasizing on how important the search is, amazon mobile design uses the entire width of the screen to display the search bar as well as being thump friendly. The suggestion list height doesn’t extend more than the space above the keyboard.

Search Result (6/8)

Next step, after having a smart search, is having a usable search result page. That includes a clean display of products, sorting, filtering and different display options if needed.

Web view:

03-searchresult-web3

At first glance, Amazon design may seem noisy but you can easily comprehend how the page is designed in blocks and each block serves a specific functionality.

  • Block 1: Showing number of results found, the keyword I used in the search, sorting and display options
  • Block 2: Filters
  • Block 3: Search result. This is the most important block and that’s why it takes the most space.
  • Block 4 & 5: show ads, promotions or sponsored content.

Mobile view:

04-searchresult-mob1

05-searchresult-mob2

Amazon mobile design is very clean and organized. It starts out with a message that includes the keyword used in the search, followed by the search result count, link to filters and the result products. Sorting and filtering options are included in another screen due to the variety of options.

Checkout (7/8)

Implementing a usable checkout process decreases abandonment rate and guarantees a solid conversion. However, the process is lengthy and requires too many information, especially from first-time users. We will not go into details of the process but rather look at it from a bird’s-eye view and how it looks like on web versus mobile design.

Web view:06-checkout-web107-checkout-web2

A common practice in design a checkout is to include the following:

  • Remove all elements that aren’t related to the checkout process like website header, that includes search bar, categories and any extra links.
  • Include a progress bar indicating the number of steps, current and completed steps.
  • Emphasize on the security of the process.
  • Provide support for the customers, in the form of live chat or help line.
  • Call to action buttons are the most prominent visual element.

In B&H checkout design, the desktop size can afford to include all the following practices in the same screen as well as order summary always present of the right side of the page.

Mobile view:

08-checkout-mob2

09-checkout-mob1

B&H mobile checkout disregards almost all the practices followed in the desktop design due to the limited space. However, it depends on how the process should flow smoothly where users can only focus on one task at a time and that is what they can currently see from the long one-page checkout.

Post-checkout & Account (8/8)

As important as the checkout process it, the follow up process is also crucial. If the follow up is frustrating, so will be the customer and will avoid any future transactions on the website. This includes creating a new account on the website as well as the page displayed after a successful checkout; the thank you page.

Web view:

10-account-web1

11-account-web2

B&H promotes their users to identify themselves before checking out. It provides different options including guest checkout and social media login. Following a successful checkout, user receives an invoice with their order details as well as the ability to track that order. It also promotes guest checkout to create an account by only providing a password.

Mobile view:

12-account-mob1

B&H mobile design is almost identical to the web design but accommodates to the small screen. This is due to the importance of every elements used in the web design.

Lessons Learned

The most obvious obstacle when designing for a mobile screen is the limited space available. This limitation drives designers to either compromise some content and accommodate to it. This can only be achieved by defining a hierarchy of importance to the content and which should be the most accessible in order to have a usable mobile experience. This indicates that each platform has its design needs and capacity which can be limiting but that doesn’t mean usability should be compromised.

UX in E-Commerce: Web vs. Mobile

There is no argument about how e-commerce has integrated itself in our lives in the recent couple of years. Online shoppers now have access to e-commerce websites through different platforms; laptops, tablets and smartphones. Although it’s the same shop, where the user goes through the same journey, the experience quite varies between bigger and smaller devices and how your users interact with them.

In this post, we are going to explore this user journey and the differences in interactions between a 14-inch laptop and a 4-inch smartphone. This inspection will only include comparison between the view of the website from a desktop view and mobile browser view (responsive version).

The journey

The e-commerce website visitors aren’t all the same when it comes to familiarity level with the shop. Some are frequent visitors, beginners or first-timers. Thus, every user will take a different path. For example: a frequent user will probably go through a much faster checkout experience, since their info is already saved in the system, rather than a new user that still needs to provide their payment and shipping info.

However, we will go through some of the main screens that most of the users will probably go through which are

  • Home page
  • Category page
  • Product page
  • Cart
  • Search
  • Search result
  • Checkout
  • Post-checkout & Account

Home page (1/8)

Similar to shop window display, you showcase products, discounts and offers in this page. Users should be able to tell if they can buy what they want just from skimming through this page, otherwise they will abandon the website for another alternative.

Web view:

Web view - Source: walmart.com
Source: walmart.com

 

Walmart focuses on listing ads, offers and campaigns in the home page. This makes the page look more lively and active which is a great attention grabber for the shopper.

Mobile view:

01-home-mob101-home-mob1

Source: walmart.com
Source: walmart.com

Similar to the web, ads and offers can be found but in a much more compact design using the slider to make it more usable for the users holding their phone and using their fingers to interact with the screen. A common practice is to list all the shop categories in the home page of the mobile view for accessibility and exposure to display as much information as possible in a such a limited space.

Category page (2/8)

This page includes listing of all the products related to a specific group. Users would make use of this page if they are hesitant about which product to buy and/or would like to view multiple options or if they just came to browse without a specific destination or purpose in mind.

Web view:

Source: nordstrom.com

Source: nordstrom.com
Source: nordstrom.com

Nordstrom helps their users decide on the product they want much faster by guiding them, using big and flashy imagery indicating subcategories. Once the user clicks on a certain subcategory, they are redirected to a clean display of products side by side, as well as all the relative information they need to view.

Mobile view:

05-category-mob1

Source: nordstrom.com
Source: nordstrom.com

Due to limited visual space, the subcategory filter is replaced with a button that opens a list of all the subcategories, followed by products display identical to the web view.

Product Page (3/8)

Web view:

Source: gilt.com

Source: gilt.com
Source: gilt.com

Product images are the closer the shopper will get to the actual product. Using clean and high-quality images enhances the experiences tremendously. That’s why Gilt web design capitalizes on product images without excluding relative information like price, color options, quantity and product specifications details.

Mobile view:

09-product-mob1

Source: gilt.com
Source: gilt.com

The information included in this view is identical to the web design; however, all elements are resized, aligned and placed accordingly to provide readability and usability on mobile.

Cart (4/8)

Web view:

11-cart-web1

Source: sears.com
Source: sears.com

Source: sears.com

Sears makes use of the big screen by including a lot of details regarding the shipment and offers, as well as the product information.

Mobile view:

Source: sears.com
Source: sears.com

Unlike the web design, the limited space forced the design to include only the product information. The only consistent principle in both web and mobile views is making the “checkout” button the most prominent visual element.

Lessons Learned

There are no differences in the content present in both web version and mobile version of the websites. The only difference is how it is presented. Web users interact with a bigger space using a mouse or a touchpad, while a mobile user has access to small screen and is able to navigate using only hand gestures. That difference in interaction requires different types of design elements to ensure usability on either platforms.

The journey isn’t over yet. We will be exploring the rest of the screens in part 2. Stay tuned!

Secure Redis Server

Install Secured Redis on Ubuntu Server 14.04, 16.04 LTS

Redis is a secondary database that is useful for session storage as well as performing background jobs like sending emails, user notifications,..etc.

In this blog post you will learn how to install a stable & secured version of redis by the following steps:

1. Install stable version of Redis

To install Redis, first make sure the tcl package is installed.

sudo aptitude install build-essential tcl8.5

1.1 Check for the latest version of Redis and grab it into your /tmp directory.

cd /tmp wget
http://download.redis.io/releases/redis-stable.tar.gz

Now extract it.

tar xzf redis-stable.tar.gz

Then configure it and install it.

1.2 Installing the server

In the same directory you extracted the redis stable version, write in your terminal

cd redis-stable
make
make test
sudo make install

Then configure an instance and add it to your boot sequence

cd utils
sudo ./install_server.sh

Now test your installation:

sudo service redis_6379 start

Check it through its command line interface:

redis-cli

You now have Redis installed and running. The prompt will look like this:

redis 127.0.0.1:6379>

Type in ping, and the prompt should look like this:

redis 127.0.0.1:6379> ping
PONG

To set Redis to automatically start at boot, run:

sudo update-rc.d redis_6379 defaults

2. Secure the installed Redis

2.1 Binding to localhost

By default, Redis server is only accessible from localhost. However, if you followed the tutorial to set up a Redis master server, you updated the configuration file to allow connections from anywhere. This is not as secure as binding to localhost.

Open the Redis configuration file for editing:

sudo vim /etc/redis/6379.conf

Locate this line and make sure it is uncommented (remove the # if it exists):

# bind 127.0.0.1

2.2 Configuring Redis password

Configuring a Redis password enables one of its two built-in security feature – the auth command, which requires clients to authenticate to access the database. The password is configured directly in Redis’s configuration file, /etc/redis/6379.conf, which you should still have open from the previous step.

Scroll to the SECURITY section and look for a commented directive that reads:

# requirepass foobared

Uncomment it by removing the #, and change foobared to a very strong and very long value. Instead of foobared, make a more complex password using one of sha algorithm types like:

$: echo -n "yournormalstring" | openssl sha1
f44f60738a2ecbc060a7fe974371997137ac4e69

Store this key just in case. Then alter your redis conf file to be:

requirepass f44f60738a2ecbc060a7fe974371997137ac4e69

After setting the password, save the file, and restart Redis:

sudo service redis-server restart

To test that the password works, access the Redis command line and try to write ping, you will get this (error) NOAUTH Authentication required. Do not panic, it is normal as in the next example, until you get the OK acknowledgment:

$: redis-cli
redis 127.0.0.1:6379> ping
(error) NOAUTH Authentication required.
redis 127.0.0.1:6379> auth f44f60738a2ecbc060a7fe974371997137ac4e69
OK

N.B. Do not forget to alter your applications to use the new password accordingly.

Enjoy using a secure redis!

Troubleshoot

In case of any misbehaviour, you can remove the password from the conf file and shutdown redis manually, but you need to make the following:

  1. Comment the require password line in the redis conf file.
  2. Go to the redis console
$: redis-cli
redis 127.0.0.1:6379> auth f44f60738a2ecbc060a7fe974371997137ac4e69
OK
redis 127.0.0.1:6379> shutdown
redis 127.0.0.1:6379> quit
  1. start the redis service, and it is now without a password
sudo service redis_6379 start

 

Developer Communities: All You Need to Know

What are Developer Communities?

Developer communities are places where we can

  • Share and brag about our work
  • Ask questions and find help
  • Follow for news
  • Make new connections and meet new people in the development field

They’re all about “finding solutions” and building up new experience, closer aligned with a community of practice than a community of any other type.

Communities you have to be following

In our field, there are A LOT of online communities that focus solely on development like

We also have other channels that are superiorly active like

  • Facebook tech groups/pages
  • Reddit tech subreddits
  • Google developer groups
  • Twitter

Huge companies and enterprises building products for the developers to use started to realize the importance of actively participating in the community through seeking the developers themselves. A new role has emerged called “Developer Evangelism,” where a developer evangelist is someone participating in the community in a way that makes him advertise for a product while making it sound exciting to others and without being intrusive.

You can find developer evangelists all around you. They are the people you follow on Twitter for news, who write tutorials on their blogs telling you how to do something. Think of them as social and brand influencers of all things technical development. Examples are countless and include

In Egypt, most of the tech communities are driven by individuals and not by companies or organizations. The role of developer evangelism hasn’t really matured enough yet. Instead, big companies who build ready-to-use “solutions” (like Oracle and Microsoft) advocate these solutions to other companies; not to developers

We have a big chance of taking the lead in the tech communities through focusing on the “Individuals.”

Why you should actively participate in developer communities

Developers in general show interest in participating in tech communities because it’s a way to create new connections. Connections are important because they mean

  • New technical knowledge
  • New job opportunities

How you can start contributing to the community TODAY

 Before you start contributing, there’s a set of skills you need to know that you have to work on along the way

  •  Be extremely eager to learn
  •  Be an excellent communicator through verbal and written communication
  •  Enrich your technical competence in your areas of interest
  •  Be an excellent listener and have the capacity to discuss anything

There are mainly 2 channels you should be focusing on…

 1. Online communities

   These will massively help you grow your technical knowledge and will show you how others discuss things and communicate with each other. Most importantly, they will highlight your weaknesses and allow you to work on them at your leisure.

 2. Offline/Local communities

  These are where you start having impact on others, sharing as well as always learning along the way. You start to advocate and give advice.Take care that you should be open to all opinions even those that trigger you and those you think are worthless though.

Benefits of having a leading role in local communities

  •  Your technical knowledge will grow significantly.
  •  You become more confident in the work you do and start enjoying it more and more.
  •  People start to idolize you as an expert (careful about that).
  •  You build relationships with other developers, entrepreneurs, and companies. Your connections grow beyond what you ever thought they could.
  •  You dedicate sometime everyday to reject the job offers you are getting via LinkedIn and emails 🙂

Benefits that the organization you belong to gains

  • With the growth of your technical knowledge, your organization is directly affected by the quality of the work that you perform.
  • Customers will have more confidence in your organization’s work.
  • Your organization starts attracting more customers.
  • Your organization starts attracting candidates who are eager to learn because they want to work with “YOU”.

Where you should start first

 1. Online

  • Participate in online discussions like Stackoverflow, Reddit, Github
  • Build something that you know will benefit other developers.
  • Write down articles on your personal blog, organization blog, Medium, WordPress giving your personal insights and ideas on a particular problem
  • Check local communities like Facebook tech groups and help others whenever you can through comments and answering questions whenever possible.

 2. Offline

  • Check for student activities and offer your services as a mentor/speaker at universities.
  • Offer to help those who are trying to give back to the community either through organization or through metorship/speaking (RailsGirls Cairo)
  • Find and attend local meetups and show your will to participate in organization and speaking. If none is available, start building your own community with the help of your friends and colleagues.

Bro tips

  • A good advocate is someone who is technically superior. Keep reading and learning and trying. Question your work and methods. Seek excellence.
  • Be kind to others around you. Their age, color, gender, religion or technical capabilities should never matter. As long as they are not toxic, you should stand at the same distance from all.
  • Listen carefully and don’t underestimate anyone. You would be surprised by the ideas and the work of the people you frankly think they aren’t as good as you.
  • Always be humble.
  • Give without waiting for a return. Good deeds pay off in ways you cannot imagine.
  • It’s a long-term investment that takes time. Be PATIENT and always enjoy the ride.

Improving The UX of E-Commerce Websites Without The Big Bucks

In the past few years, online shopping is becoming much more established with offline businesses realizing the importance of having to be online as well as many users especially millennials turn to online shopping as their primary destination with the help of smart phones. E-Commerce conversion rates have been increasing across different devices; desktops and mobiles (smartinsight). Even though more and more people are shopping online successfully, the user experience of most websites is not up to par.

Baymard.com: The dots are color-coded in accordance with their usability performance, with red dots indicating “poor” usability, yellow representing “acceptable,” and green “good.” The benchmark average is denoted with a back circle.
Baymard.com: The dots are color-coded in accordance with their usability performance, with red dots indicating “poor” usability, yellow representing “acceptable,” and green “good.” The benchmark average is denoted with a back circle.

User experience (UX) is “a person’s perceptions and responses that result from the use or anticipated use of a product, system or service” (ISO 9241-210). Your users should be able to fully understand what you offer and how to get it. On an E-Commerce website, it might seem obvious that it sells laptops but they can’t find the right or enough information they need to actually buy the laptop they wanted.

Better understanding of your audience leads to less frustrating design which in turn leads to higher conversion rate. Therefore, performing a user experience evaluation, every now and then, is essential.

What is UX Evaluation?

User experience evaluation denotes using different types of methods and tools to assess how well the users can learn and interact with the product or website. In case of an E-Commerce website, it is when the user is able to navigate the shop, find the product they desired and successfully checkout.

There are many different methods that can be used to perform a UX evaluation that yields quantitative and qualitative results. A lab user testing is an example of a quantitative method that involves recruiting real users, assigning them to perform tasks on the website and observing their behaviour to document the results in the form of metrics.
Examples of qualitative methods are cognitive walk-through and heuristic evaluation which relies on thorough inspection of the website by an expert and assessing how well the users perceive the design.

Cognitive Walk-through

A cognitive walk-through is an approach used to evaluate the usability of the website from the perspective of first-time user with a specific intention.

The evaluation starts with the assessor defining a user task(s) then inspecting how the user would execute these tasks on the website. For example, a college student wants to buy a new laptop to use for studying. One of the scenarios to perform that task on an E-Commerce website would be as follows.

  1. User visits E-Commerce website through direct URL then scans homepage for “laptop” or “electronics”. He finds a “laptops” link in the header and clicks it.
  2. User visits the category page with many laptops on display and option to filter and sort products.
  3. User visits different product pages then clicks “add to cart” on the laptop he liked.
  4. User is content with his choice and wants to checkout. He visits the cart and clicks on the “checkout” button.
  5. User goes through the checkout process.

Throughout that scenario, the assessor asks the following four questions per each new step:

  • Will the user try and achieve the right outcome? The user was able to find the laptop he wants and successfully select it and proceed to checkout.
  • Will the user notice that the correct action is available to them? The “add to cart” button or the “checkout” button was easy to find.
  • Will the user associate the correct action with the outcome they expect to achieve? Whenever the user clicks on a link or button, they were redirected to the right page.
  • If the correct action is performed; will the user see that progress is being made towards their intended outcome? The user able to keep up with the checkout process.

By answering these questions through every step of the scenario, the assessor can point out the flaws in the experience design. One of the benefits of this method is that it is a considerably cost efficient compared to other methods.

Heuristic Evaluation

Another means of user experience evaluation is conduction of heuristic evaluation. A set of heuristics is chosen and the website is reviewed to assess how the design is violating these heuristics. One of the frequently used sets of heuristics used is Jakob Nielsen and Rolf Molich’s 10 Usability Heuristics for User Interface Design.

Nielsen defined each of the following heuristics in detail so we will be discussing them from an E-Commerce point of view.

  1. Visibility of system status

Users should always be able to tell what is going on at any point in time. They can identify what page they are viewing. If the website is loading, it should say so.

Pages in amazon have clear title indicating what you should be expecting.
Pages in amazon have clear title indicating what you should be expecting.
  1. Match between system and the real world

The most iconic application of this heuristic is using the cart icon on the “Add to Cart” buttons. Users are already familiar with their real-life surroundings so they relate faster to your interface if you use the same elements.

2-1 2-2

Cart icon, cart icon everywhere
Cart icon, cart icon everywhere
  1. User control and freedom

People don’t like to feel stuck or helpless. User should be able to undo or redo any significant action on the website.

Walmart notifies me of deleting an item from the cart and provides me with a clear “undo delete” action.
Walmart notifies me of deleting an item from the cart and provides me with a clear “undo delete” action.
  1. Consistency and standards

Consistency creates a sense of comfort where the user is confident about the identity of every element in the design. An example of that can be represented in the fact that all buttons should look similar and no other element should look like a button. Consistency isn’t only about in-website consistency but also in using design elements that are familiar within your industry.

4-2

Both Walmart and Amazon are using the common terminology “Department” used even in physical stores.
Both Walmart and Amazon are using the common terminology “Department” used even in physical stores.
  1. Error prevention

The design should keeping error-prone actions to a minimum. If you are asking the user to enter their credit card number, the field should be designed to accept only 14 numbers.

Thanks Walmart for the heads up. No time wasted when I try to create an account and then you tell me that password isn’t valid.
Thanks Walmart for the heads up. No time wasted when I try to create an account and then you tell me that password isn’t valid.
  1. Recognition rather than recall

The human brain is limited to process few items at a time but there are too many information that you need to convey. That’s why recognizing something is easier than exerting the mental effort to try and understand it.

Walmart grocery shopping cart includes product images with quantity always displayed right next to the products which makes it easier to review what I added rather than remembering it.
Walmart grocery shopping cart includes product images with quantity always displayed right next to the products which makes it easier to review what I added rather than remembering it.
  1. Flexibility and efficiency of use

The efficiency of an E-Commerce website is mostly about how easily the users can find the products they want. Having a sensible and familiar navigation and categorization makes the experience much smoother. You’d expect to find mobile accessories within the same category as mobile phones. Then, there is also the efficiency of the checkout process which is how the design incorporates the other heuristics.

Souq.com checkout progress bar indicates how easy the checkout can be and how much I have progressed.
Souq.com checkout progress bar indicates how easy the checkout can be and how much I have progressed.
  1. Aesthetic and minimalist design

Less clutter makes your products stand out which helps the user focus better on what is really important. In addition to having your products photographed in a very good and clear way, minimalistic display doesn’t overwhelm the user to the point of leaving the website.

8-1

Ebay came a long way with their redesign even if it’s not the most visually rich design but took into consideration how crucial aesthetic is.
Ebay came a long way with their redesign even if it’s not the most visually rich design but took into consideration how crucial aesthetic is.
  1. Help users recognize, diagnose and recover from errors

Users don’t want to deal with problems so if something goes wrong that they can’t handle, they’d probably give up on your website. Always offer the reason for the problem and how to solve it in a clear and understandable language.

Clear instructions from Amazon to why I can’t add the product to the cart and how to fix this problem.
Clear instructions from Amazon to why I can’t add the product to the cart and how to fix this problem.
  1. Help and documentation

Your users will always need help, not because of the lack of good design but maybe because of unforeseen accidents or they might have a concern that is not addressed. Similar to a real-life store, where you can ask a shop assistant for help, having an online and available customer support boosts the efficiency of your platform experience.

10-1

Souq.com offers customer support phone number. On the other hand Walmart offers a help page with FAQ.
Souq.com offers customer support phone number. On the other hand Walmart offers a help page with FAQ.

Once the assessor evaluates the violations to these heuristics, he assigns a severity rating to it. The higher the severity is, the more the violation affects the experience negatively. This helps to organise usability problems and decide on the priorities of fixing them.

The Takeaway
As your main source of conversion is your users, the evaluation should be based on their behaviour and perception. While some methods are costly more than others, there are methods that are efficient with less effort. Performing a user experience evaluation before, during and after designing your E-Commerce website surely brings out potential usability problems to light so that you can treat them head-on eliminating the risk of losing customers and consequently money and definitely contributes to better conversion and an increase in sales.

Android RTL Support

The majority of mobile apps are designed LTR (Left to Right), that is because the vast majority of the world languages are written from Left to Right and only a small number of languages are written from Right to Left such as Arabic. Most of mobile developers never worry about this issue since most of the apps are not intended to target users from regions using languages written from Right to Left also because it was not as easy as it is now to support both directions. As the competition started heating up, it became important to globalize the apps and provide localized versions in order to reach more users and improve app downloads. Moreover,  the rise of mobile apps development in these Arabic-speaking countries made it crucial to provide RTL support.

It is very easy to provide localized versions for different LTR languages in android apps by just providing another strings.xml file under values-XX folder where XX is the language code which contains all the translations for the strings used in this app.

Android 4.2(API 17) released in 2013 has provided full Native support for RTL layouts; it has become very easy to take advantage of this feature and all you need are just few simple changes in your code.

How to start:

First of all, in your Manifest.xml file, you need to declare under the <application> element android:supportsRtl=”true”

Use Start and End layout properties instead of Left and Right, respectively. In LTR layouts, start means left and end means right; however, in RTL start means right and end means left.

Examples for these properties are Padding, Margin, TextView Drawables, Gravity, LayoutGravity, and layout alignments.

In case you need a custom layout in for RTL, just provide the layout with the same name under ldrtl qualifier

Drawables:

Usually the icons you are using are direction independent, so you will not need alternative drawable for RTL; however, there are some cases where you will have to, for example, the back button.

Normally for LTR this is how it looks like:

Screen Shot 2017-02-13 at 10.26.39 PM

If you use the same button for RTL this is how it will look like:

Screen Shot 2017-02-13 at 10.26.54 PM

While what you need is this:

Screen Shot 2017-02-13 at 10.49.45 PM

You can achieve this by mirroring the icon using an external tool and add the new icon with the same name in drawable-ldrtl folder, or just use the forward navigation button and change it’s name in “drawable-ldrtl” folder

In case your minimum SDK is 19, you can use android:autoMirrored=”true” attribute in vector drawables where as the name implies will automatically mirror the icon vertically in case the direction is RTL

Text appearance:

For more control over the text appearance, you can use these attributes

android:textAlignment — attribute for setting the alignment of a component’s text.

android:textDirection — attribute for setting the direction of a component’s text.

Use gravity for textAlignment which is default for the root view. The gravity determines the alignment, ALIGN_NORMAL, ALIGN_CENTER, or ALIGN_OPPOSITE, which are relative to each paragraph’s text direction

Use locale for textDirection which makes the paragraph direction is coming from the system Locale.

To apply these attributes you can add it each textview or globally by adding it to main AppTheme in styles.xml

<item name="android:textAlignment">gravity</item>
<item name="android:textDirection">locale</item>

To know about the variations of textAlignment and textDirection attributes check

https://developer.android.com/reference/android/R.attr.html#textAlignment

https://developer.android.com/reference/android/R.attr.html#textDirection

Application Language Preference:

All the mentioned-above is sufficient to provide RTL layout and in case the app is supposed to follow the device’s language then nothing more is needed. However, in case the user is supposed to be able to choose a specific language, then few more lines of code are needed.

To change the Locale of the application programmatically use the following

String langCode=”ar”;
getContext().getApplicationContext().getResources().updateConfiguration(changeLanguage(code)),
getResources().getDisplayMetrics());
public static Configuration changeLanguage(String code) {
  Locale locale = new Locale(code);
  Locale.setDefault(locale);
  Configuration config = new Configuration();
  config.locale = locale;
  return config;
}

Then restart the activity to apply the changes

startActivity(getIntent());
finish();

However, if the user changed the language of the device, the app will be affected, and in order to prevent that use configChanges attribute under each <activity> element in the Manifest and list Locale and layoutDirection as the changes you would like to handle manually.

android:configChanges=”locale|layoutDirection”

This prevents the application from recreating the activity then override onConfigurationChanged in the activity

@Override
public void onConfigurationChanged(Configuration newConfig) {
  super.onConfigurationChanged(newConfig);
…
…
}

Then you can reapply the user’s configuration for the app again in onConfigurationChanged

getContext().getApplicationContext().getResources().updateConfiguration(
changeLanguage(Session.getLanguage()), getResources().getDisplayMetrics());

Fallback to LTR:

It is possible to force a certain layout direction using android:layoutDirection, it can be useful, for example, when using a ViewPager and TabLayout, the default sliding animation is LTR when doesn’t change in RTL. So a possible solution is to keep the android:layoutDirection=”ltr” and reverse the tabs orders and fragments programmatically. You can check at runtime if the layout is RTL using this method in TextUtils getLayoutDirectionFromLocale .

Another example  is the phone number field, numbers direction are always LTR which means it does not change with language direction, so a possible solution is to use Left and Right instead of Start and End or use android:layoutDirection=”ltr” for the parent view.

Screen Shot 2017-03-13 at 11.21.45 AM

Hopefully these tips could help you with your developing any application in Arabic. Please don’t hesitate to comment below if you have any questions regarding RTL support in android or anything regarding android development in general. Finally please refer to the official android blog for more information about native RTL support.

https://android-developers.googleblog.com/2013/03/native-rtl-support-in-android-42.html

Capitalizing on Technology in Charity

Charity has always been one of the fundamental themes in the lives of Egyptians. With the continuous declination of the standard of living for both the lower-middle and lower classes in the society, NGOs and people working in the charity and CSR fields are facing a huge challenge to provide an adequate support to those social classes that the country’s government is failing to provide.

Charity and community service in Egypt comes in many forms such as NGOs, CSR departments in corporates, clubs in universities, small groups of friends or even individuals. Activities in all these entities are typically more centralized around some seasons that are mostly religion-related. However, to give you a hint of how huge this theme is in Egypt, during Ramadan only in 2015 approximately EGP 30 Billion donations were collected according to the official numbers. (For more details about the economics of donations in Ramadan, we recommend this article by Omar El Shenety.)

In spite of this huge amount of spending and donations, the relationship between charity and technology in Egypt remains very shallow. From my personal experience in this field and what we have reached in robusta throughout the different engagements with NGOs and CSR departments, I believe that technology isn’t being fully utilized or even slightly utilized at a minimum level to help in the charity work here in Egypt.

During our previous engagements in robusta with lots of NGOs, we noticed that most of them are only willing to make use of technology superficially by building simple websites to use them only as an online informative tool. While on the other side there are several serious problems that are present in the current charity/CSR model that technology would really help in resolving but utilizing technology isn’t on their roadmap.

Below are some examples of the current problems and how technology can help resolve that.

Accessibility of Donating

It is such a pity that people are creating WhatsApp groups to collect money for certain cases. Meanwhile a simple web/mobile application listing the cases by their different types and with detailed information can be very handy especially when it is integrated with an online payment gateway provided by bank or independent platforms like Payfort.

Cases Reach

Lots of people sometimes want to donate money/furniture/…etc and actually don’t know where or how to donate despite the huge number of NGOs. The idea is that you want a simple way to do so which is quite feasible by a location based mobile app that detects users’ locations and can show the different cases around them with their needs. Location based apps can be used in an opposite way by NGOs to see the donors around them and get in contact with them.

Reaching out to more people around the globe

A lot of Egyptians all over the globe would mostly prefer to give their money donations or Zakah to the poor in Egypt or to help the people here to establish microprojects via microloans or similar models yet unfortunately there are no easy to use, credible and transparent platforms where they can do that. Then what about a mobile application that aggregates the cases from the different NGOs with their statuses and integrates with a payment gateway allowing people from other countries to donate their money online to specific cases.

Transparency

Any donor usually needs answers to some questions, where am I putting my donations exactly? which case am I supporting? and the more the donor pays, the more details and follow up they would expect to be provided with. This type of transparency is typically very difficult when you donate, for instance, via SMS or when you donate to an NGO via bank transfer but you aren’t sure where this amount of money was placed. The issue of transparency normally hinders some people from donating to NGOs. Again, this can be achieved by personalization of the donation experience when the user can have a dashboard listing the cases they are donating to and follow up on their progress with whatever amounts of money paid and with some history and statistics about the previous donations and cases.

Recurring Reminders and Notifications

We all usually get consumed in our daily work so we continuously need those reminders from NGOs or our friends if we pay a recurring donation to help some cases and technology definitely can help automating all of that with a combination of simple cron jobs on the server side and push notifications via an almost free service like Amazon SNS.

Follow up and Reconnecting

Technology in general will easily help the NGOs and the donors in several other aspects. One of those is following up on some cases that they donated for via SMSs or Push notifications which will definitely increase the credibility of the NGO.

Another one is reconnecting with the donors in case they are interested in helping specific types of cases when those cases appear or even sending and receiving feedback between Donors and NGOs.

Some Inspiring Examples

There are several inspiring examples in the charity world. I will just demonstrate the idea of three of them and there are others of course all over the globe.

Kiva is an amazing platform that provides microloans to different people all over the world to use them in unique and useful projects that would fit in their environment. The donations are mainly crowd-sourced and you can actually even choose to lend some people to help them do their project and then return your money back after they pay  and if you’re worried about being getting your money back, the loan repayment rate is 97% which indicates how successful they are.

Watsi is another adorable non-profit platform that focuses on crowd-sourcing donations to patients all over the world who are facing difficulties in paying for their treatments. They have an extensive database about the patients with their detailed cases, their stories and so on.

Farmraiser is a web and mobile platform that was built by robusta. It is a very good example for a community-service-like profitable platform. It is built to help organizations like schools, clubs,…etc raise funds for their campaigns by making students sell healthy food and these profits go to funding campaigns so there are four parties that are benefiting and profiting here, vendors who sell their products, campaign organizers who receive  funds for their campaigns, customers who buy healthy products and are encouraged to lead a healthy lifestyle and finally students who participate in the whole community service experience and learn to give back to their community.

There are definitely tons of other platforms with various ideas out there yet those three examples are just simple examples on the different types of platforms we are talking about and hope they would be utilized, implemented and followed instead of going for an informative website for an NGO.
To sum up, it is crucial for all NGOs and people working in the CSR field to pay attention to capitalizing on the available technologies and think creatively about new ideas that would make the lives of everyone easier and gets the most benefit out of the available tools that are already utilized by many and are becoming part of the people’s daily lives and culture.