Designing the mobile e-commerce experience for one of Saudi Arabia's largest retailersDesigning the mobile e-commerce experience for one of Saudi Arabia's largest retailers

Jarir Bookstore is Saudi Arabia’s largest retailer of books and consumer electronics, with over 37 branches across the Kingdom. UXBERT Labs worked with Jarir to design their new mobile application and deliver a mobile e-commerce experience that is visually appealing and simple to use.

Flagship Application for a Flagship Retailer

1 WWW.UXBERT.COM

Project Challenges

While an established and trusted brand, Jarir faced the same challenges as most retailers in Saudi looking to enter the digital commerce market. Local e-commerce customers tend to have trust issues about the security of online payment and a lack of faith in unreliable delivery services.

Specific to Jarir, with their abundance of branches, many customers we interviewed felt it was easier to simply head into a nearby store to buy a product rather than rely on making the purchase online. And if they were to use online services, it would be to reserve the prod-uct so they could come in to the branch to pay and pick it up. With convenience being one of the most commonly cited reasons for online purchases, the view of offline shopping at the physical retail location being the easier option was an additional barrier to overcome.

2 WWW.UXBERT.COM

Therefore the challenge was to not only create designs that were visually appealing, they had to deliver an experience that increased trust and made the process of finding and purchasing a product so simple, it would be preferable to making the purchase offline.

An abundance of branches meant many users said they found it more convenient to simply run into their nearest Jarir store rather than rely on online purchase and delivery services.

Development of the application was the responsibility of a third-party team. Miscommunication between design and development teams is always a potential source of risk to any project. When designing a complex e-commerce app requiring detailed interac-tion and visual design guidelines, that risk is magnified. We knew that our transition design documents and interaction maps needed to be compre-hensive while also being extremely usable and simple to understand. While time consum-ing work that would add more strain to what was already tight project schedule, it was necessary in order to ensure successful implementation of UXBERT Labs’ designs.

3 WWW.UXBERT.COM

What We Did Stakeholder Interviews

Expert Usability Evaluation

Information Architecture

UI & Visual Design

Competitor Analysis

Wireframing & Prototyping

Interaction Design

Iterative Usability Testing

Improve user journeys through the app in order to offer an amazing experience

Increase conversions and reduce cart abandonment by designing a stream-lined and usable checkout process

Facilitate increased revenue by intelli-gently incorporating cross-selling into the app’s design

Develop an intuitive information architecture that makes it easy for both first time and experienced users to find the products they’re looking for

Inspire and delight users with a polished visual interface that increases brand loyalty and satisfaction leading to increased trust

Primary Objectives

4 WWW.UXBERT.COM

Our ApproachAt UXBERT Labs, we implement a user-centered design (UCD) process to all our projects, ensuring that business goals and user needs are at the core of our work. The key feature of the process is that it involves users throughout the design and develop-ment process. Thinking about design in this way helps us to ensure that every design decision we make is based upon an explicit understanding of the user’s tasks and environ-ment, addressing the whole user experience.

UXBERT Labs UX Process is iterative and keeps the user at the centre at all times.

5 WWW.UXBERT.COM

Research & Information ArchitectureIf the purpose of user-centered design is to ensure we design for the end user, it’s research that tells us who that person is and what they need and expect from the product. User research ensures we design for the user and not for ourselves and that design decisions are made on the basis of data rather than opinion.

By analysing mobile applications already in the market we collected insights into the experiences Jarir’s competitors were already providing to customers. With this we set initial benchmarks to compare the existing Jarir app to, as well as guiding our subsequent research approach. Expert usability evaluations were conducted on both national and international (Souq, Amazon) competitors whose mobile applications Jarir’s mobile app would be competing with both directly and indirectly.

Expert reviews were conducted on direct and indirect Jarir competitors such as Souq and AmazonExpert reviews were conducted on direct and indirect Jarir competitors such as Souq and Amazon

6 WWW.UXBERT.COM

An expert usability evaluation involves having a certified usability professional examine the mobile interface and it’s various dialogues, judging its compliance against a recog-nized set of usability guidelines. Usability is a quality attribute that measures how easy an interface is to use. The guide-lines used for an expert review are established on the basis of scientific research into user behavior and human-computer interaction.

More than typical ‘competitor research’, analysing the competition’s applications against usability principles enabled us to understand how easy the interfaces are to use, rather than simply relying on subjective opinion.

Usability tests are one-to-one research sessions with real customers. Tests consists of the user performing a series of representative tasks (finding a product, comparing different products, making a purchase) while being observed by an experi-enced moderator.

An UXBERT Labs moderator reviewing video recordings of a usability test session.

7 WWW.UXBERT.COM

We conducted tests on both the existing Jarir mobile app as well on the competitor apps that were reviewed by the usability evaluator. Users were recruited for testing based on target customer profiles provided by Jarir. These tests identified usability flaws in Jarir’s existing design as well as those of competi-tors. We uncovered insights into how users actually behave and the frustrations they encountered when using the app. More specifically, we were also able to see where and why they failed to achieve their goals (and hence why the business loses a sale).

The gold standard of usability evaluation, usability testing enables us to observe what users actually do, and not just what they say they do, which is often not the same thing.

Each user invited to a usability testing session also took part in a user interview. These interviews were more exploratory in nature and helped our researchers to build empathy while simultaneously uncovering pain points customers face that wouldn’t be uncovered from testing alone. This approach helps us to reframe our own perspective of the problem to point the way to unrealized possibilities for design and innovation.

The feedback from these interviews were collated and used to create a series of User Perso-nas to be used as a tool to connect the different stakeholders to their target customers. Based on research about behaviour and user goals rather than demographic data alone, each personas developed acted as a fictitious identity to reflect different target user groups. While depicted as a specific person, they were in fact synthesised from observa-tions of the broad range of users who came in.

8 WWW.UXBERT.COM

We use personas because the average user doesn’t exist. Using them helped our designers to create designs for different kinds of people by having a specific person in mind.

An example of a persona of Jarir’s target customers

As with any multi-product retail e-commerce app, Jarir’s mobile application needed to cater to multiple user goals and therefore journeys. Data collected from user research provided insights into each of the steps through differ-ent journeys a user would take using the app. This data helped us to better understand user behaviour while emphasizing the important intersections between the user’s expectations and Jarir’s requirements.

The most effective way to communicate these insights to the different stakeholders of the project was using user journey maps. User journey maps are a visual interpretation of the overall relationship with a business from the user’s perspective over a period of time and across different channels.

9 WWW.UXBERT.COM

Mapping begins with pen and post it notes allowing for it to be a collaborative process.

Once the user journeys have been mapped out, they’re digitized to allow for easy sharing and access

Through this high level approach, we were able to understand the key tasks users wanted to do, the context of those tasks and what sort of functional requirements would help enable those tasks. The maps we created illustrated the context of each step, progression between different steps, devices used, functionality users expected, their emotional state at each step and any pain points they encounter.

10 WWW.UXBERT.COM

UXBERT’s polished client deliverable version of a journey map.

From these insights, we were able to feed the info into our design decisions to develop solutions to the pain points. Approaching the user journey from this perspective helped us to consider the entire experi-ence as a whole, which in turn delivered designs that focused on long term relationships with Jarir’s customers built on consistency and trust.

11 WWW.UXBERT.COM

On a mobile ecommerce platform such as the one we were designing for Jarir, how easily users are able to find the information they’re looking for (items, product descriptions, delivery information, etc.) would be key to the success of the app. Just as important, in order to meet business requirements, the information architecture also needed to facilitate exploration within the app. Users had to be able to browse and discover related products simply while always knowing where they are within the app. Deficiencies in information architecture would cost Jarir money. Both in terms of lost customers because they couldn’t find the product that they were looking for, as well as missed opportunities to cross-sell relevant products to interested customers.

We started with a sitemap identifying all pages of the existing app and their connectivity to help visualise hierarchy and structure of the app. Once navigational and structural issues were identified, using data collected from research, we created an updated version of the sitemap. This was the first step of laying out the IA of the new mobile app, setting out the framework upon which we would continue to build the site navigation.

Finalized site map

12 WWW.UXBERT.COM

UI, Interaction & Visual DesignWith the research behind us and a new site map developed, we moved towards the design phase of the project. Here we shifted our focus away from abstract issues of strategy and scope towards those that determine what the users would eventually experience. As with the entire process, the user continued to remain at the centre, through iterative prototyping and testing.

13 WWW.UXBERT.COM

Design begins with pen and paper. Sketches are used to rapidly put variations of different ideas on paper. Next up we hold a ‘ideation’ session with experts from different specialities (project man-agers, researchers, usability experts, UX designers and visual designers). Each team member brings their own point of view to the session after which a much clearer picture begins to emerge of will be the first iteration of the app’s design.

The sketches were then developed into digital low-fidelity wireframes. Wireframes act as the blueprint of the design, allowing us to develop a visual representation of the interface which can be used to communicate structure and information hierarchy. Once reviewed with the client team and after any subsequent changes, the wireframes were used to develop the digital prototype to be used for testing.

Sketching the first iterations of designs.

14 WWW.UXBERT.COM

Example wireframes

Wireframing also involves creating multiple variations of even the simplest details and features to be tested by potential users before we decide on one solution. Here we see multiple versions of the app header.

15 WWW.UXBERT.COM

While wireframes have a value as a tool on their own, in this process we were mainly concerned with using them to build our initial prototype. Prototypes allow us to test the usability of designs directly with users before a single line of code is written. Using prototypes we were able to quickly test and refine the app design’s navigation, content, page layout and functionality. We were able to collect usability data by testing with users early, which is what lead to the biggest UX improvements while also saving time, effort and ultimately money by reducing the need for changes later down the line after development has begun.

A key feature of the UCD process, iterative design seeks to embed design and evaluation steps into the process from the first stages all the way through to implementation. This meant that we tested multiple versions of the Jarir prototype. With each iteration, tests were run with a series of representative users, usability data collected and then fed back into the design process, resulting in an updated version of the prototype. The key was to establish a tight feedback loop that continuously improved the designs until a final version with the best possible user experience has been reached.

16 WWW.UXBERT.COM

Variations of the product details page as we go through different iterations of testing. Only once the final design has been signed off are visuals applied.

We ran three cycles of testing, with 5 different users in each cycle. Research shows that testing with just 5 users will uncover 80% of usability problems in your design. The first two cycles of testing were conducted in our purpose built state-of-the-art usability testing lab with users recruited through our database based on target customer profiles. For the final cycle of testing, we set up a mobile testing unit on the showroom floor of a

17 WWW.UXBERT.COM

Mobile usability test setup in Jarir showroom

With the skeletal structure of the application now in place, we turned towards the visual design of the UI. Visual design plays an essential role in establishing relationships between content and guiding users through actions. For Jarir’s mobile app, it was important we considered how to strategically implement images, colours, fonts and other elements in a way that would both enhance the design and engage users. Successful mobile experiences require the design to draw attention to the most important pieces of information while aiding scanning and readability.

Limited screen size and a tendency for users to be easily distracted while using mobile means we need to understand and design around what the user actually needs and what the business wants the user to do.

18 WWW.UXBERT.COM

Limited screen size and a tendency for users to be easily distracted while using mobile means we need to understand and design around what the user actually needs and what the business wants the user to do. To aid this requirement for laser like focus from the design, we began with analysing and progressively removing visual noise in the form of any element that distracted from the main purpose of the page.

19 WWW.UXBERT.COM

Equally as important as the practical implications of visual design, there’s an aesthetic-us-ability effect that comes into consideration. Research shows that users perceive designs that look easy to be easier than those designs that don’t, even where there is no measurable difference. As such, visual design has as much of an effect on the overall experience as actual usability. Aesthetic considerations needed to take into account Jarir’s own brand values and unique personality.

Visual Noise Analysis

20 WWW.UXBERT.COM

Interaction DesignSide by side with the visual design, we developed the interaction design of the app. The key to designing usable interactions is to have an understanding of how users antici-pate and behave with technology. The aim is to design interactions that make it as simple as possible for users to perform their tasks on the app in order to meet their goals.

An example of an interaction that we added to the new Jarir design based on what we knew users expected (based on usability tests we ran) was the addition of an autocomplete feature to the search bar.

Another more unique interaction we added was based one of the biggest pain points we uncovered in the checkout user journey. Nearly all users were frustrated with having to fill out long forms on a small when adding payment details. Since mobile devices have specific capabilities, we were able to make use of the camera function to allow users to scan their credit cards and automatically fill the form,

21 WWW.UXBERT.COM

minimizing user input while also delivering an innovative solution to the mobile experience.

As the development of the app was being done by a third-party vendor, we created detailed transition maps to specify all in page transitions and transitions between pages. This helped to ensure that the care and effort put into creating the designs would be fully realised in the final product.

Wireframe of payment details and card scan pages

22 WWW.UXBERT.COM

Impact and ResultsOur final designs were a complete overhaul of the original Jarir mobile app, delivering best-in-class user experience for their customers.

On-brand visual designs complemented improved information architecture and interface interactions, creating user journeys that were quicker and, more importantly, frustration free. In addition, the internal Jarir team were provided with detailed style guides and interac-tion maps to enable them to apply our designs and information architecture throughout their digital ecosystem.

23 WWW.UXBERT.COM

Here at UXBERT Labs, it wouldn’t be overstating the case to say we’re passionate about innovation and service experience design.

We love how the rise of the app and the ubiquity of mobile devices is empowering users with information while providing a new platform for businesses to engage customers or employees.

Our designers and developers are experts in innovative service design, customer and user experience, usability engineering processes along with mobile engagement and app devel-opment. We develop apps that users can’t live without for innovative companies who understand they can’t live without mobile.

Our vision is to make the world and Saudi Arabia a more user friendly place. We are local and our client projects fund our community projects.

You can check out our community projects by following the links below: HalaYalla : www.halayalla.com Sawwagy : www.sawwagy.com

We also run a MeetUp group that gets together monthly to talk about best practices and emerging techniques in UX, watch UX talks, exchange ideas and thoughts.

You can join our MeetUp group and be part of the Saudi Arabian Experience by follow-ing this link : https://www.meetup.com/Us-er-Experience-Design-Riyadh-UX/

You can reach us online by contacting us through our email, website or our social media pages by following the links below: https://www.uxbert.com hello@uxbert.com https://www.facebook.com/uxbert/ https://twitter.com/uxbert https://www.instagram.com/uxbert/

For those of you who’d like to meet us in person, we’d love to have you over at our office! Uxbert Usability Lab606 Al Nemer Center Offices 1Olaya Street, Riyadh Saudi ArabiaPhone: +966114622211Mobile: +966534556600

http://www.halayalla.com/http://www.sawwagy.com/ https://www.uxbert.com

hello@uxbert.comhttps://www.facebook.com/uxbert/https://twitter.com/uxberthttps://www.instagram.com/uxbert/

https://www.meetup.com/User-Experience-Design-Riyadh-UX/

Check out our job openingshttp://uxbert.com/careers/http://www.halayalla.com/http://www.sawwagy.com/

https://www.meetup.com/User-Experience-Design-Riyadh-UX/