UI/UX Case Study: myOffers Redesign

Providing offers in Saudi Arabia App Redesign

Mostafa Metwally
Aug 31, 2018 · 8 min read

“The UI/UX case study documents the processes involved in a redesign of a mobile application made for providing offers or Buy One, Get One

The app includes a product scan feature for customers to perform a self-checkout at a physical store. This design sprint took 5-days to complete.

Project Brief

myOffers is providing a new service really the idea all of it is about get one offer from one of our multiple service providers and get one free for your companion, The challenge was is that their are already a mobile app found for it and all I have to do was to do redesign the experience and the interface with MVP new that I could provide we need to keep the product running and not to make any delay of what already been found, Their were problems in the flow problems in the navigational in the website and critical problem in easy finding and providing the MCTA in the app which is the offer code or getting the offer from any point of the mobile application.

The Design Sprint

A design sprint is a five-phase framework that helps answer critical business questions through rapid prototyping and user testing. Sprints let your team reach clearly defined goals and deliverable and gain key learning, quickly. The process helps spark innovation, encourage user-centered thinking, align your team under a shared vision, and get you to product launch faster.

Design Sprint 5 days process

The Context — Old design problems with Flow and Heuristic Evaluation.

Some of old design screens

It is increasingly difficult to reach the main Call-To-Action within the old website not for the UI but for the flow technique tried multiple times to detect what type of technique or methodology used here to complete the flow to reach main Actions and the Main CTA here, But really found that the app didn’t apply the linear flow technique or even the repetitive sea technique.

Here is how the flow was found in the old version of the app within the navigational or the Architecture founded.

The flow as it was!!!

So here how I have decided to apply the best technique that could be used for any e-commerce application that has one main goal which is getting success getting revenue all of that won’t be achieved expect by making it all easy to reach our main CTA to make all paths lead to it by making all our features provided easy and delightful in a way that make us deceive the user that Yes you are in the etc. screen click here Voilà you are now in our main CTA point also, present it in such a joyful way that make him didn’t notice that and also have fun reaching it and clicking and using it. The one linear flow that make him reach our provider screen and his offers from anywhere else in the app that’s what I have used.

Used Creatly here.

Nielsen and Molich’s 10 User Interface Design Heuristics

Visibility of system status. Never found a title in any screen and never really know the back status.

Match between system and the real world. Look at the icons represented how it could make things easy for any user to relate it to whatever he usually known.

User control and freedom. Things cannot be undone once you do it you have only one thing to do either do it or not.

Error prevention. Nothing is forgiven here.

Consistency and standards. How many icons could be found in the whole application.

Recognition rather than recall. As said the flow itself is hard to remember how to get things done, some screens have over 5 actions to do within it.

Flexibility and efficiency of use. No abbreviations could be found once you enter somethings you have to get back to do the main thing.

Aesthetic and minimalist design.

Help users recognize, diagnose and recover from errors.

Help and documentation. The only thing that could be really found within the 10 points here in the app which comes from the side menu which is accessible within the home screen only.

The Work done!

First, we started by analyzing the existing app to identify key problems and issues. As said many issues found, so how I have been solving it and how it has been applied, Users need first to access the provider list from wherever they can to reach, so we have made access to the provider screen within the home also providing the 6 categories with really easy access beside have the anther main option which is the user can see from where he is the nearby providers who can gave him such offers, One storyboard is what to eat today let’s get one and one free, Open the app scroll down from the map see full map screen where he can see pins of nearby providers who can solve his problem, Also the quick access of the providers list in each category by one scroll after the tab selected, The provider itself has been reorganized to view first the main thing we call for which is the offer, some basic info in the provider also a newly organized gallery with much more appealing of the reviews and the rate, Beside the add comment feature, And the favorite list of his liked provided beside how he see his interactions or commenting within each provider even in the profile screen or the wish-list to keep him remembering how he really have experienced the provider before.

The list of settings and static screens are organized in relative way to the profile or the user himself.

Editing the login and signup flow to be what naturally instincts users could interact with.

The aesthetics of the app has been redesigned as the traditional icons, now we have two colors to represent our identity which is the orange and cyan material colors to not to be odd in the market.

Providing app design that not let me change between the platforms lots of things or just the native things is main component of success to keep preserving consistency and standards even if you change the whole platform it self.

The Big Questions — How Might We…

At the start of the project, we had three main questions in mind.

How might we…

  1. adapt the physical store experience into a mobile experience?
  2. use a mobile app to further enhance the physical store experience?
  3. adopt mobile payment or a mobile self-checkout at a physical store?

Defining the In-store Experience

First, we define the unique experience at the physical store to adapt it to the mobile app.

  • Greeted with ‘Welcome to (the store)’ every time you enter the shop;
  • Same familiar shop layout at every outlet;
  • Wide open aisle, bright lights, neatly stacked shelves;
  • Sales and promotions throughout the year for different products each week;

User Personas and Customer Journey Map

Based on the patterns identified in the affinity map, I came out with 2 personas — one who would really love to see what he can make use of the app in his daily usage and the other who how I could plan things and get the most useful of offers thing you provided from the app itself.

User Persona 1
User Persona 2
  1. The redesign should not affect current users of the app. Navigation should be fixed to users intuitive use.
  2. New features can be added to the app for current users to use in real life
  3. Users should be able to access ‘Offers’ quickly since it is a major feature of the brand.
  4. Increase awareness of the app through in-store posters and other marketing efforts, and increase memorability within the app itself.

Feature Prioritisation Matrix

Feature Prioritisation Matrix–User Needs vs Business Needs

Hi-Fi Prototype

The branding was enhanced in the design by using the right fonts and colours. The interactive prototype can be viewed on InVision.

https://invis.io/MGNLCTKV9P4

Set Base, Sign in and Sign Up

“As you could notice I have made a new screen that called set base, Which is useful in such apps, This could be found in any service that really need to get the burden of the basics from the user mind and get him the appropriate service related to his selection”

“Even the wish-list screen I have not introduced it as a list view only, but I have introduced a feature that could relate and interact with the user by making him fill his header by himself, By adding his favorite also introducing his previous comments to keep his previous experiences in his mind always”

Full Visual Design of the mobile the sorting itself represent the flow and that’s what call a real success and ease of use.

I have 5 years of hands-on work experience in UI/UX design, rapid prototyping, and front-end development for rich Internet applications and mobile devices. I practice user centered design principles basing design decisions on user needs and business goals. Now increase my effort to learn the future mind of all of our work and it is the VR, AR & the MR also dedicate a lot of my time to learn the real relation between Agile and UX to be able to aid in applying such methodology in our place to relieve our team from creative minds, Have no limit in learning HCI but real HCI to rich my mind to apply software and products that can be useful in every mankind life.

LinkedIn Profile

Behance Portfolio

https://www.behance.net/mustaphametwally

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade