web design Archives - robusta tech talk

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:

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:

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:

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:

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:

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:

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:

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:

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!

Arguably, one of the movies’ most famous catchwords, and despite the fact that my number 1 early-morning activity with my 3-year-old has recently been watching and reciting Toy Story at 7am on a weekend with one eye open and the other half-asleep, this post plays to a more serious note about an organization’s own journey of self-exploration…

2015 was a particularly interesting year for robusta particularly because, for a change, we rethought our strategy, structure and, believe it or not, our robustivity vision, too!

Lots of concerns have triggered such exercise. It was mostly about the pursuit of profitability, sustainability, scalability and where we see robusta in 5 years from now. It was quite regular of a discussion between the managing partners to question the scalability of robusta and if it’s ever a candidate for exceptional growth that fulfills ours and the team’s aspirations for humongous growth. Don’t get me wrong! robusta was doing quite well already but we’ve always seen robusta not as a boutique agency but rather a flagship empire and been questioning a lot the way to get there.

Inspired by Gallup’s Strengths Finder and our IGNITE Development Program designed and implemented by our good friends at Mirqah ( more on this in upcoming episodes), we decided to start our pursuit by identifying and playing to our organizational strengths.

Cutting a long story of several client meetings (more of disguised interviews), internal workshops and self-reflections, it was becoming clearer that our top 3 strengths were our solid development skills and portfolio, a strong and influential culture fueled by an exceptionally competent team and robusta’s brand equity, reputation and reach within diverse verticals. Our weaknesses have always been lack of clarity to what we aspire to become that translated into stretching ourselves too thin across several streams which eventually lead to subpar profitability.

Building on this understanding, we made some bold decisions of exiting some of our service offerings and accounts. We’ve completely abandoned Branding, Social Media, Microsoft-based technologies, and trivial/low potential tickets. The reasons why we stopped each are quite interesting and each deserves a blog post on its own. We naturally decided to focus on our leading services which are E-Commerce, Mobile, Websites and Web Apps.

We also turned around our perspective looking at our team and decided to get rid of the illusion of growth that comes with growing our headcount after figuring out this is, in most cases, nothing but a sign of lack of efficiency. Comes next naturally is an overpowering need to look after productivity and a sharply pruned work force that makes it easier to invest in our culture & human capital development.

Ironically, we’ve also figured out that there’s such a HUGE local market that we need to dominate first before crawling beyond borders. Last but not least, we’ve done what turned out to be a pretty good job standardizing and innovating our retainer-based project development/support packages.

The said resolutions automatically put us on track with total clarity on how to go about restructuring the organization to achieve what became our solid vision.

“To serve as a flagship of national economy and become one of the top listed EGX companies by 2030”

This also fits perfectly with our designated 4-fold mission towards our clients, our people, shareholders and the community.

Finally, what we’ve mostly learned the hard way is that although focus seems to be an obvious strategic recommendation for any organization, it takes a lot of wisdom and learning about your customers, competitors, team and, of course, yourself to really be able to tell what focus means and how it applies to your organization.

Tag: web design

UX in E-Commerce: Web vs. Mobile

To Infinity and Beyond