Page 1


ePharmacy CLIENT

Health & Pharmacy C AT E G O R Y

Mobile App UX/UI Design WORKS

2.5 Months (2019) P R O J E C T D U R AT I O N


Purpose

Convert our current facebook & viber customers/leads to use the app to purchase/order medicines. The app has multiple in-built features for current as well as future users, such as; Medicine Reminders, Upload Prescriptions, Bulk Order & Schedule Order. Combine pharmaceutical products & lifetsyle products to create an app which has is useful.

Role

As the sole designer for this project, I created the UX Documentation which included: User Research, Analysis, User Flows, Information Architecture etc. We had partnered with Quest Pharmaceutical to get research materials for the app, which I was involved with as well.

UX Challenges

Integrating medical and lifestyle health products in one app, while still making it seamless & easy to use. As medical products have different laws regarding the distribution, there needed to be safeguards placed in the app to avoid any illicit activity. This posed a challenge to create a user journey which was secure & reliable.

UX Goals

Create a seamless & easy-to-use experience for users. Also, formulate a strategy that would allow the company to create a system for ordering medicines & lifestyle products without breaking any laws placed by the government. Lastly, correctly using the data obtained from our users and creating a more friendly and minimal User Interface.


Process

Ideate • Sitemap

Discover & Define

• Information Architechure

• User Research

• User Flows

• Moodboard

• Card Sorting

• Problem Research • Competitor Analysis • Data Gathering

Design • Lo-Fi Wireframes • High-Fieldity Mockups • UI Stylesheet • Prototype • Usability Testing

Competitor Analysis

With the goals in mind, I gathered information about the ecomerce market in nepal and identified a baseline to set a realistic expectation.

Findings • None of the general ecommerce platform in Kathmandu has a upload prescription feature & medicine products. • All platforms seem to be linked with multiple vendors which leads to lack of trust in the quality of products. • None of them provide a free delivery service for medicine or any products.

Findings • Despite having the necessary features in both website and mobile app, they only target normal households which results in a low number of users. • It lacks a lot of brand awareness.


Target Personas PERSONA 1

PERSONA 2

Demographic

Samrachna Adhikari Job: Web-Developer Work Hours: 9am - 6pm Location: City Area Education: Higher Education

Ankeat Karki Location: Abroad Education: Post Graduate

Goals

Receive medicines in time without the need to go to a store.

To make sure his elderly parents receive medicine in time in his home country and create a schedule and reminder for them to take their medicine on time.

Get medicines for herself and her family, without disturbing her work schedule.

Challenges

Frustration

Busy Work Schedule

Being Abroad

No one to help with buying medicines

Parents in their old age

No current service available to provide such service

No current service available to provide such service


Card Sorting Features

Nishit Rajbhandari

Rushal Amgai

Samrachna Adhikari

BUSINESS

STUDENT

DEVELOPER

General Medicine Baby Products Wellness & Fitness Devices Ayurvedic Medicine Family Care Personal Care Upload Prescription Prescription Folder Popular Products New Products First purchase discounts Wishlist Schedule Medicine Order Online Payment Medicine Reminder Biometric Login

High Priority

Low Priority

This was achieved by conducting a small session where individuals were provided with a document listing components of the app which I had decided upon. Then each of the individuals were told to pick either high or low priority based on their needs in their current life situation. The data obtained from this test helped me to create a well designed information architecture. Based on those results, the layouts were decided but few were changed according to stakeholders goals.


Brand Awareness

Features required by the Stakeholders

The purpose of the brand ePharmacy is to increase its brand value by increasing its customer base.

These are the features the stakeholders want have in the first launch. These decision overru of the user tests and card sorting, as they we requirement

10,000+ Current Userbase from the aid of facebook, instagram, offline & website.

1,00,000+ Userbase to reach through the aid of the mobile app by the end of 2022.

• FIND MEDICINE • WISHLIST (PACKAGE) • FAMILY WELLNES (CHANGED TO PRESCRIPTION FOLDER) • DEVICES • GENERAL MEDICINE • UPLOAD PRESCRIPTION • BABY PRODUCTS

Remaining

89,000+

Note: Full indepth data is not disclosed due to NDA


Stakeholder Goals

Since ePharmacy is a product of Amnil Technology, the stakeholders wanted to use the clientele under the umbrella of Amnil to sell the products in a bulk order system. Providing products like first aid, devices, disaster kits and many more. This way the company could reach both the corporate market and the household market.

y

ted to uled many ere a must

Our Products Regarding the line of lifestyle products we have in our catalogue. We wanted to have diverse products from local and international brands to provide to our customers. Rather than using multiple vendors, epharmacy licensed multiple products from US, India, China & Malaysia. This allowed epharmacy to have authentic licensed product without having the issue of counterfeit or bad product reviews due to the incompetiecenies of the vendor. This helps to have a premium & affordable catalogue of products, whilst maintaining the brand image and its trust towards our customers.


Key Features Timeline

Phase 1 • • • • • •

E-Commerce Order management Profile Edit Medicine Reminder Biometrics Upload Prescription

Phase 2 • • • •

Family Welln Feature Prod Package (Wi Store Prescri


ness ducts ishlist) iption(in app)

Phase 3 (in progress) • Prescription Folder (Rework family wellness) • Google, Samsung & Apple calendar Integration


Site


Map


User Flow

Efficient and easy product search User Interaction

Internal System

Search product name

Based on keyword/tags

Others

User is redirected to Medicne Search Page

User clicks on the product

User selects quantity

User click on ‘Buy Now’

User click on ‘Add to Cart’

The product is directly added to cart and user is redirected to the checkout page.

The product is added to cart and user can keep adding more without being redirected.

Use checks out of cart & confirms their order location

A


A

The system redirects the product request to the warehouse. Once the order is confirmed, the admin sends the request to the delivery department to deliver the product.

Mockup 1

Description

Mockup 2

Mockup 3

• Search by symptoms is turned off since suggesting medicine based on the symptoms without doctor prescription does not comply with the health laws in Nepal. • Auto-suggest medicines using their generic & composition name in order to create a advertisement system to promote sepcific medicine brand with similar composition to the top of the page. • Quick Product view for medicine is different from others in order to separate the product type while searching. In order to achieve this, the product contents were separated by using photo & icons and with different product specification details as seen on the mockups 2 and 3. • Different icons with different shades of blue were designed for the different medicine categories to give a more calming look and not overwhelm the user.


Ordering medicine by uploading prescription Due to the government law in place regarding selling medicines through any ofine /online portals, there needed to be steps created to follow them. In order to solve this issue we had to create a step by step process starting from the user ordering, reviewing & checking out to delivery.

User Interaction

Internal System

User Opens the App

Uploads Prescription

Select images from gallery or take picture from camera

Pharmacist receives the uploaded prescription & reviews it

If the user submits invalid prescription or anything irrelevent; the pharamacist disapproves the upoloaded image.

If the user submits valid prescription; the pharamacist lists down the medicine and quanity then send the lisitng to the user to review it.

The user reviews the list of products to either add, remove or edit the listed medicines.

A


A

Once the user approves the medicines, it will be added to the checkout cart.

B

The pharmacist provides a form for the user to sign and verify the content of the prescription one more time for security purposes.

The user will then be able to order through the cart page. The ordered item is delivered to the user.

The user can delete or edit any item present in the cart.

The user then places the order and will be able to pick payment gateway to pay for it.

Then the user can pick the delivery address or the current address the user is in.

The system receives the order and it is queued for delivery. The delivery person will be with a pharmacist to deliver & verify the order and the prescription.

B


MOCKUP FLOW

Upload Prescription Mockups are in a sequentials order.

Mockup 1

Mockup 2

Mockup 3

Mockup 4

Mockup 5

Mockup 6


Mockup 7

Mockup 8

Mockup 9

Mockup 10

Mockup 11

Mockup 12


Usability� Testing 1

Multiple user testing was conducted in order to figure out the usability aspect of the app. So, various low-fidelity mockups were created to test the layout & content. The test was conducted with not more than 60 people.

Changes Based on User Data Search Component

Feedback Initially the search field was placed below the banner for easy access. But after user testing, instead of a field just an icon was placed on the top nav as many users; especially in the age range of 22-28 found the search function irritating and difficult to use. Their reasoning: “It felt very cluttered and made it confusing”. It was an issue that needed to be dealt with as the majority of the users gave similar reasonings. Despite being in an easily visible area it didn’t make it easy for people. Many of them preferred the search functionality of facebook, amazon, daraz, etc.

Outcome We let the users test again the app with the given changes. We were given good feedack as they found it more easier due to its familiarity.


My Account Screen

Feedback Initially there was a settings and a profile page that included multiple settings. The setting icon was placed directly in the main bottom nav & the profile icon was at the top right corner. But after user testing, we realized that settings got barely used. So, the setting icon was replaced with the profile at the bottom. This allowed users to use this functionality more as it included offers, updates, reminders and other features of the app as well.

Outcome After the changes, the feedback were fairly positive as people critiqued ‘My Profile’ page was more important for them. Also, it made it easier for them to discover new features of the app whcih they hadn’t discovered yet.


Usabilityďż˝ Testing 2

After the first launch, we collected data from multiple users in the span of 3 months. Based on that, several designs & features had to be removed or revised due to bad design and development execution in layout and language.

Changes Based on User Data Medicine Reminder Feature

Feedback The design was initially added to allow users to check for reminders. But, the feedback wasn’t as expected, as several users commented that it felt like an unnecessary feature. Also, they found using apple,google or samsung calendar was much more efficient for them.

Changes We decided to integrate google, samsung & apple calendar with the app. Also, we turned the reminder feature as a secondary feature rather than a primary feature.


Review Feature

Feedback After a 3 months time period, the data obtained for the review feature was interesting. As we had planned to provide only authentic products with a centralized catalogue, users loved the products we had and trusted us. So, in the last 3 months we found that the review system wasn’t used as often. As per data, more than 500+ users would spend less than 10 seconds on the product page and quickly buy it.

Changes So based on the data and various factors we decided to change the review system to a rating system in order to just allow the users to rate the products they received rather than review them in a descriptive manner. In order to let the customers rate the products, the customer would be notified on their phone via in app notification after their purchase. To rate the product they can directly rate from the buttons integrated in the in-app notification, which directly updates the the product rating without having to open the app itself.

Family Wellness Feature

Feedback This feature was pushed to be a primary feature after the ecommerce component. But It was poorly received due to its description & the steps nvolved. This feature was created for users to save doctors notes/prescription, however many users thought it to be under the product category or just a family record.

Changes Due to the overwhelmingly negative feedback, we decided to remove it in the phase 2 update and rework it for the phase 3 update as a new feature. The new design would work as a folder structure, where users can create multiple folders and upload notes or images.


UI Styl


lesheet


Tattva Nepal CLIENT

Pashmina/ Cashmere C AT E G O R Y

Website UX/UI Design WORKS

1 Week (2019) P R O J E C T D U R AT I O N


Client Requirements

The main purpose was to create a website with high focus on the Tattva brand and creating premium aesthetics throughou the website.


n ut

In Collaboration with Samrachna Adhikari

Role I did this project in collaboration with Samrachna Adhikari, who was responsible for the development of the app. I was tasked with creating the sitemap, user research, documentation, UI iterations & Hi-Fi Mockups.

Goal The goal was to design a website with a good presence aligning with their branding guidelines. Also, making it scalable to incorporate additional features like ecommerce in the future. The website needed to have a more international design aesthetics as Tattva were marketing their products to the Spanish and Italian consumers.


Purpose

Tattva is a pashmina/ cashmere brand with scarves & sweaters as their main products. Their main target markets are Madrid & Barcelona, and all their sales have been done through various markets like; exhibitions shows & personal friends circle. From their financials, the revenue stream has been increasing just by being involved in those mediums. But their brand name didn’t have much of a presence nor any credibility. Thus, they wanted to create a proper brand strategy which included a Brand book, website & Marketing Strategy. This led to me being involved in the designing of the website to cater to the European audience to brand Tattva as an authentic Nepali Premium Cashmere/Pashmina brand.

Home


Si te m ap Product Gallery

epage Our World Contact

Tattva & You Product Page


Work Ti


imeline


Moodboard After gathering a few designs similar to the design I was aiming for, I created a moodboard that I used along the way to inspire myself.

by Zh

Dribbble, Behance & Awwwards are my go to website to get inspiration for aesthetics & brand centric designs.

Brune


henya Rynzhuk

by Wesley van ‘t Hart for Balkan Brothers

ello Cuccinello

by Jake Sunshine

Louis Vuitton


Hopnepal CLIENT

Booking C AT E G O R Y

Website UX/UI Re-Design WORKS

1.5 Month (2020) P R O J E C T D U R AT I O N


Purpose

Redesign their current website, make it more user friendly and implement an easier user flow for bookings & membership registration.

Role

I played the role of the UI/UX Designer. Creating the early UX Documentation for the website, developer notes and user flows of the booking & payment flows. Also, the redesign of the website with the current UI trends in mind as per request from the client.

UX Challenges

This was my first time designing a hotel/tour package booking website with an in-built payment system. So, I had to do a lot of research for each feature and the various flows of the website. Also, the website had a high traffic blog that needed to be redesigned and still have a flow as per the client requirements.

UX Goals

Create easy navigation to different features in order to provide a seamless experience without losing track of the information. Giving the website a more visually appealing UI & better interactions.


Process

Ideate • Information Architechure

Discover & Define

• User Flows

• User Research • Moodboard • Data Gathering

Design • Lo-Fi Mockups • High-Fieldity Mockups • UI Stylesheet • Prototype

Features • Hotel/Homestay Booking • Tour Booking • Membership System • Blog • Partner Administrator • Third Party • Payment proceesing • Flight API Integration • Tripadvisor review • Social media • Email Newsletter


Moodboard


Work Ti


imeline


Site

Lo

Homepage

Sig

About Us

About Nepal

Blogs

Advanced Search

Hotel Results

Home

Homestay

Blog Article Flights

Privacy Policy

Ho

Hotels

Tours

Terms & Conditions

Hotels

Hotel Page

Hom


Map

og In

User Page

gn Up

omestay

estay Results

Tours

Flights

Tours Results

Flights Results

Dashboard

Bookings

mestay Page

Tours Page

Flight Form

Reviews My Favorites My Property

Logged In

Not Logged In

Pre-Filled Form

Booked/Purchased Details

Log In Wall

Booking/Reservation Form

Log Out


User Flow

Searching for hotel, homestay, tour package or flights flow

Search Engine

Load Website

www.hopnepal.com

Search

(Google,Bing, DuckDuckGo)

Social Media

Hotels

Homestay

Tour Packages

Flight Deals

(Facebook, Twitter, LinkedIn)

Enter/Select Valid Details

No

Yes A Hotel Page

Location name

Homestay Page

Check In-CheckOut

Location name

Number of Guest

Number of Guest

Sort By

Sort By

Our Top Picks

Our Top Picks

Lowest Price First

Lowest Price First

Highest Rated

Highest Rated

Nearest From

Nearest From

(based on the search location the nearest registered landmark will appear)

Filters

Check In-CheckOut

Price Range Facilities

Star Rating Room Facilities

(based ont the search location the nearest registered landmark will appear)

Filters

Price Range Home Sharing

Star Rating Facilities

Complimentary Breakfast

Complimentary Breakfast

Non-refundable & refundable

Non-refundable & refundable

Select Hotel

View Hotel

Select Homestay

View Homestay


A

Tour Package

Location name

Tour Start

Flight Search

Flying From - Going To

Number of Guest

Returning Date

Sort By

Sort By

Our Top Picks Lowest Price First Highest Rated

Filters

Price Range Activities

No. of Travellers

Flight Duration Departure

Filters

Arrival

No Charge Fees

Tour Type Departure Dates

Economy Only Price Range

Select Tour

Departing Date

View Tour

Airlines Stopover

Departure Dates

Select Flight

Book Flight


Becoming a member flow

Search Engine

Load Website

www.hopnepal.com

Sign In

(Google,Bing, DuckDuckGo)

Social Media

(Facebook, Twitter, LinkedIn)

Already a Member?

No

Sign Up

Facebook | Google Yes First & Last Name Email ID

Facebook | Google

Password

Captcha Email ID

Password

Check Email

Homepage

Confrimation Link

User Name Dropdown

My Dashboard Reviews

My Favorites

Bookings My Property

Log Out


Booking & payment for hotel/homestay flow

Search Engine

Load Website

www.hopnepal.com

Select Preferred Hotel/Homestay

(Google,Bing, DuckDuckGo)

Social Media

(Facebook, Twitter, LinkedIn)

Select Rooms/ No. of People

Check Avaibility

No

Yes

Logged In

No

Change Details

Fill in the form details Sign In

Yes

Basic Details

Hotel/Homestay Details

Booking Saved

Payment Details Added VISA/Mastercard

Booking Details Emailed


Booking & payment for tour package flow Search Engine

Load Website

www.hopnepal.com

Select Preferred Tour

(Google,Bing, DuckDuckGo)

Social Media

(Facebook, Twitter, LinkedIn)

Select data, Guests & Porter

Check Avaibility

No

Change Details

Yes

Logged In

No

Fill in the form details Sign In

Yes Basic Details

Tour Package Details

Payment Details Added VISA/Mastercard

CCV if logged in

Booking Saved

Booking Details Emailed


Booking & payment for flight flow Search Engine

Load Website

www.hopnepal.com

Search Flights

(Google,Bing, DuckDuckGo)

Social Media

(Facebook, Twitter, LinkedIn)

Select Desired Flight Change Details

Flight Details

Logged In

No

Fill in the form details Sign In

Yes

Basic Details

Payment Details Added VISA/Mastercard

CCV if logged in

Booking Saved

Booking Details Emailed


UI Styl


lesheet


Tidings Personal Project PROJECT

Article C AT E G O R Y

Mobile App Logo & UX/UI Design WORKS

4 Days (2020) P R O J E C T D U R AT I O N


App Concept Summary

Tidings is a content based app, which focuses on articles, news, stories while also providing a way for content writers to earn money. The app has free & premium features which users can subscribe to.


Personal Experience

I got an idea of starting this project, while I was thinking about how to create an app that could provide good content to the readers as well as creators. So, I decided on doing news/articles based apps that were exclusive to iOS only. The reason for the exclusiveness was more of a personal reason to learn how to use the iOS design system and to learn the various type of interactions that could be used to enhance the app experience. I also wanted to try designing a dark mode, which I had never done before. I had researched some articles for microsoft outlook, viber and facebook. I learned the difficulties faced by designers to balance the light and dark mode. There were many issuesI had to face in order to pick the right colors and proper range of black to make it easy on the eyes while still maintaining the quality of the design. In order to plan out the business strategy of the app I took into consideration the various platforms similar to it such as; Medium, New York Times & Wall Street Journal. It helped me understand the various ways to engage the users through multi-categories, official news, fun stories and much more. To figure out how these components worked, I wanted to plan out multiple use cases to expand on how each of them performed.

Process Discover & Define • App/User Research • Business Strategy • Use Case

Ideate • User Flow

Design

• Sketches

• High-Fildelity Mockups

• Information Architecture

• Protoytpe


Moodboard


Features • Membership System • Subscription & Bookmarks • Article Editor • Viewer / Editor Mode

iOS Exclusive

• Third party payment System

(includes iPadOS, MacO

• Biometrics Authentication • Weather Report • Light/Dark Mode • In-App Notification • Only using in-app notification to update the users to the latest news & articles.

Freemium Model

Why pick iOS? Swift I want this application to support all apple devices and provide a seamless experience. Swift makes it easy to develop for iOS, MacOS & the newly introduced iPadOS.

• Seamless experience throughout its ecosystem • iOS users are more likely to spend on app & in app purchases than anrodi users, based on the data supported by Statista. • Projects an image of an good product being an exclusive app as a brand • Provide High Security

Sec


• Read the latest news on any provided category • Read up to 30 staff articles a month • Follow any writers • Bookmark favourite articles

FREE

• Dark mode feature

OS)

NRs. Cost

300/month

• All features from the free subscription • Unlimited Reading Content • Sync with all your Apple Devices

PREMIUM

cure

• Exclusive access to events by Tidings • Create private bookmarks folders • Remove ads

Become a writer

INDIVIDUAL

VERIFIED

COMPANY

IN-HOUSE

• Individual status can be obtained by anyone. • Verified status can be obtained after publishing 50+ articles and earnings are based on number of followers, views, likes & page view rate. • To achieve the company status, one has to be directly applied through the company verification process. • In-house status for tidings personal writers.


Information Architecture Login Page

Sign Up Page

Main Page

Username

Username

Search

Password

Email

Side Navigation

Remember me

Password

Categories

Forgot Password

Sign Up (Button)

Trending News

Log In (Button)

Sign In (Link)

Upgrade Plan (Button)

Become a Member

Personalized Collection Latest News

Side Nav

Weather Report

Profile Page

Article Page

Side Navigation

Banner

Picture

Content

Home

Writer Name

Categories

Subscriptions

Bookmarks

Collections

Share

Settings

Settings

Bookmark

Upgrade to Premium Log Out


Features Paywall model for the app

• Providing customers a digital subscription service with a freemium & metered paywall model. This will allow users access to read 10 articles per month. I had thought of keeping a hard paywall system but it would not be as immersive to users as the app is more focused on user based content and less on news. It is better to let the customers read a few articles in the beginning and have them subscribe to a premium subscription. The reason is because the hard paywall system has been more effective on News Portal Websites from the data obtained from WP & WSJ, from the data accumulated from the recent years. Today over 80% of the news we see is through digital media from countries and cities with access to the internet. • Regarding the pricing of the tidings app; premium subscription is about NRs. 300 or $3.55. The average cost of digital publication per month for a freemium paywall model has been $3 - $9. So, the cost seemed perfectly feasible for many users when getting a yearly subscription. The best example would be the website Medium which provides similar services but at a pricing of $5 per month. • The reason for making it exclusive for iOS is to not allow it to be used in browsers as some users could bypass some of the paywall system through various add on browsers. Also, I decided to browse through the application storing their email information and the amount of articles read based on their account to prevent exceeding the number of articles via a VPN. There may still be ways to counter them but this would limit users at the least and push them to subscribe to tidings to read the content.

Actors Involved

• User • System

Preconditions

• The user has successfully logged in by Gmail or Apple ID. • The user has passed through the user onboarding screens. • User has determined his preferred set of topics. (Around 4 at least)

Post Conditions (Outcomes)

• System lists out articles based on topics picked by the user. • When the user exceeds reading 10 articles. The system displays a message “You have reached the limit for reading articles from this account.” which blocks the user from reading articles. It also has a button which directs the user to the payment page.


USE CASE 2

Populating the Readers Feed with Latest/ Popular Articles

• The readers feed was based on the edge rank algorithm introduced by facebook & instagram which factors its content ranking based on affinity, weight & time decay. Therefore, I wanted to replicate a similar logic in the Tidings App. • There were various factors which affect the prioritization of each article.These factors were: the connection between the writer & reader, followers, readers geo-location, length of articles, likes, shares & how long users spend reading articles.


Case 1

Kim uses the app once or twice a week to get updated on the articles written by the 3 writers he has subscribed to. Ashim posts one article on a daily basis; • Users love reading his articles because they are very short, quick to read. He is a fairly popular writer with a good amount of followers but his articles do not have a long read time as they are usually short. Suman posts 2-3 posts on a daily basis; • Users do not read much of his articles as they are very long, but he is required to write for his studies. The articles being long, the users browse through them quite quickly. But he is a very popular writer in Tidings with high followers, likes, user span time, etc Romit posts 2-3 posts on a weekly basis; • Users love reading his articles despite them being long as it piques their interest and they wait for his articles on a weekly basis but he is still not as popular as Ashim. Based on these data, let’s assume the reader opens the app on a Saturday and the last time he had opened was last saturday. Tidings restricts random articles to be displayed on Kim’s feed when he starts following writers besides on the explore section. In the Latest Articles section, Ashim’s article has more priority thanSuman’s and Romit’s. This is based on the daily posting habits, along with his articles being read by Kim at a high rate. These factors allow an article to be prioritized more than that of other writers. Romit’s article also has a high rank of being favored by the system, as Kim has a high reading time span with each of his articles despite Romit uploading them only a few times a week. Now, regarding Suman’s articles, since he has a large number of articles being posted on a daily basis itself, his articles will also take Kim’s category preference into consideration and the number of likes and overall users reading timespan. This is just a basic example on how articles will be given prioritization.

Case 2

In this case, Kim has just downloaded the app but hasn’t followed any writers. He has only picked the categories he is interested in during the user onboarding process. Kim is introduced in the homepage with a list of popular writers in a horizontally sliding UI. This is followed by the articles based on the category picked by Kim. Here it displays articles based on these criteria; likes, shares, reading time span & writers status.


Sketches


Animation

https://dribbble.com/shots/7339634-News-App-Interaction


Squick Personal Project PROJECT

Food Delivery C AT E G O R Y

Mobile App UI/UX Design WORKS

3 Days (2020) P R O J E C T D U R AT I O N


App Concept Summary The design is focused more on real-time usability rather than unique design experimentation. The style of the app is simple and clean giving more focus to the images and the restaurant’s name. I conceptualized some features like scale ‘Aa’ which increases the font-weight and multiple component size accordingly, without sacrificing quality & experience of the app. As the app is fully dependent on text, images & numbers, the app would be much easier to navigate for users with certain visual impairments. Another important feature is the ‘Split Order System’ - It allows users to order (same or different) menu items for themselves and a guest by creating 1- 2 new temporary user profiles to deliver to. This feature is especially useful for multiple delivery orders to different locations by the same person such as for college students/teachers & office workers.

Proc

Discover & Define • App/User Research • UX Mapping

Ideate • User Flow

• Information • Sketches


Personal Experience The idea of the application came to me while I was using the foodmandu app at around February. To me it felt like the app could be made better & improve on various features as a whole. So, I planned out this app concept with a few screens. I have always relied on user persona, clientele information and basic user research as my primary source. So, I decided to learn user experience mapping which would help me relay emotions & frustration of each step of the user journey while solving them one at a time. I wanted to use this project to learn new processes & understand various ways of understanding a customer in a more detailed way.

cess

n Architecture

Design • Lo-Fi Mockups • High-Fi Mockups • Protoytpe


Competitor Analysis

There aren’t many companies throughout Nepal which provide food delivery service, who have established themself as an established brand. I wanted to study them & try to figure out in a detailed way the workings of a food delivery service & how could I learn to improve the users overall experience.

Findings • Between Foodmandu and Bhoj Deals, Foodmandu has a big presence in Kathmandu as a go to food delivery service. Both of them provide customers services to order food through their website & app. • Foodmandu has better user experience & visuals compared to Bhoj Deals. They also have a high number of restaurants operating with them. • Regarding the app, Foodmandu’s app is updated on a monthly basis based on real time user data.


Features • Category Classification • Multiple Restaurant Items Selection • Specific Date/Time Delivery System • Split Order System • This allows customers to deliver similar items or different by creating 1-2 new user profiles to deliver to. • Customers can drag items from their cart to the other profile cart just by ‘drag n drop’. This will not remove it from your cart but only duplicate it to the other profile. • This feature is useful for multiple ordering for college students/teachers & offices.

• Payment System • COD • Fonepay

• Email, Google & Apple Id, are the only options for users to sign up. • Apple Id & Gmail - This allows users to limit the data being collected for marketing purposes.

• Data Collected Online

• Locally/Third party saved data

• Photo

• Payment (Card, eSewa, Khalti)

• User ID

• Current Location

• Username

• Biometrics

• Password • Email Id

• In-App Notification

• Gender

• Latest restaurant additions

• Restaurant details/orders

• Special offers

• Delivery location

• Discount at saved restaurants • Notices


User Experience Map I wanted to create a user map using the UCD principle which allowed me to understand the different steps a user would go to experience the usability & efficiency of the app.

Sulav Shrestha


User

Ordering fo


Flow

ood via app


Platform • The goal of the app is to reach as many people as possible within Kathmandu valley and Pokhara. This app will allow them to navigate the food delivery market with ease. • Since Android has a majority market in both these places compared to iOS, less emphasis will be given to the iPadOS version of the app.

Age Gro

18 - 5

Locatio

Kathmand Pokha

Dev Design Platform Rather than using Swift and Android Studio to make this app for each platform, using React Native will make the mobile app faster and more efficient for cross-platform development without sacrificing the end user’s experience or application quality.


oup

55

Aesthetics • The design is focused more on real-time usability rather than unique design experimentation. The style of the app is simpler and cleaner to give the pictures and the restaurant’s name more focus. • Instead of using sharp pointed edges, rounded edges are used to give it a more calming and friendlier look. • The font of the app is also a more readable font, as to provide ease to the user’s eyes.

on

du Valley ara

Colours The colours used in this UI are mostly red & orange. It gives the UI a more vibrant and an appealing look. Also, the colours used relate to different types of food such as tomatoes, meat, red chilli, etc.


Screen Description

Splash Screen

• Appears for only 2 seconds, then transitions to Login Page (Need to click on the logo to proceed in prototype)

Main Screen

• Current Location • Scale Feature (Aa) • This feature increases the font-weight and multiple component size accordingly, without sacrificing quality & experience of the app. • As we might have users with bad eyesight, this will slightly help in a better experience overall as the app is fully dependent on text, images & numbers.

• Category/Cuisine Listing (updates according to user restaurant preference) • Burgers

• Asian

• Pizza

• Korean

• Fresh Groceries

• Italian

• Food Chains

• Indian

• Breakfast

• Chinese

• Lunch

• Thai

• Dinner

• Multi Cuisine

• Dessert

• My Favorites (Only appears if more than two Restaurant is saved) • Special Offers • Popular Near You • Local Food Chains • Ad Spot (To highlight a restaurant that wants to promote themself) • Dine Tonight


Restaurant Screen

• Restaurant Picture

• Today’s Special

• Name

• Food Listing

• Price Range

• Food Name

• Cuisine

• Quantity

• Location

• Notes

• Opening - Closing Time

• Add

• Add to Favorite

• Cancel

• Food Categories Splash Screen

• When the user scrolls through the menu from the restaurant’s profile, the restaurant name and categories are fixed on top of the app screen even when the user scrolls through the food items. • So a different screen had to be designed to showcase what it looks like when the menu page is slightly scrolled.

My Plate

• General Cart • Split Order System

Account

• Orders • My Favorites • Delivery Locations • Promotions • Profile Settings • Help


Sketc


ches


THE END.


Profile for bishrant

Bishrant Tandukar - Design Portfolio  

I'm a passionate UX/UI Designer, and this is my UX/UI Design Portfolio. I have been working in this field for more than five years, designin...

Bishrant Tandukar - Design Portfolio  

I'm a passionate UX/UI Designer, and this is my UX/UI Design Portfolio. I have been working in this field for more than five years, designin...

Profile for bishrant
Advertisement

Recommendations could not be loaded

Recommendations could not be loaded

Recommendations could not be loaded

Recommendations could not be loaded