Page 1

AMIT SRIVASTAVA

UI.UX DESIGNER


I AM A...

CREATOR VISIONARY INNOVATOR LEADER DESIGNER


PHARMASOFTWARE UPGRADE This project involves the digital transformation of a legacy system to an online solution. As part of phase one of the project, the stock management modules of the legacy system is to be developed as an online solution. This includes a product search catalogue as well as inventory management and reporting. In addition to leading the user experience for this project, it is also my role to be an advocate of UX and design thinking overall. This project is currently in progress in the development phase.

ABOUT THIS PROJECT

MY ROLE

UX LEAD

UI DESIGNER

PROJECT

AGILE /SCRUM

ATOMIC DESIGN

TECHNOLOGY

REACT.JS

FRONTEND DEV

WEB

HTML / CSS

APPLICATION

BOOTSTRAP

UX PROCESS

STRATEGY

RESEARCH & ANALYSIS

DESIGN

DEVELOPMENT


UX STRATEGY At the inception of this project, a strategy was documented containing items such as the UX strategy. This included a number of elements including implementing best UX practices, designing how the user reacts to the product, ux vision as well as implementation and usability testing plans. A number of documents were prepared in regards to this and shared within the project team (developers, testers and product owners).

DEVELOP MVP*

TEST PRODUCT

MAKE CHANGES

WITH 5 USERS

BASED ON FEEDBACK

(minimum viable product) ITERATE

x4

DEPLOY ON LARGER SCALE

implementation strategy for product rollout

best practices were outlined in the ux strategy as guidelines and shared on JIRA


RESEARCH AND ANALYSIS A number of tasks including mapping user flows and user stories, interviewing users, competitve analysis and designing user experience maps were performed during this phase. Additionally, as the lead UX designer, I was also responsible for conduting workshops with both internal and external stakeholders. I was also involved with investing a number of development and other technologies for the development and post development phases of the project.

1

Competitor Analysis

EASY TO FOLLOW GUIDANCE

PRELOADING ELEMENTS

Annotated samples of what to include in our product

Competitive Analysis

Analysis

UI Library Used

Strong Focus on Branding Limited by Google’s Material Design

Google Material Design

Opionated Design Sophisticated Reporting Wizard Strong Focus on Branding Steep Learning Curve

Lightening Design System

Requires Training Overwhelming Front Page Good Table structures Shortcuts make it easy to use Clean Design, visually pleasing

Competitive Analysis on trends and technology

Intuit Harmony Ecosystem


2

User flows

TESLA Business Portal – Searching for a product PHASE 1

START

Retailer opens Business Portal

Barcode Search?

Y

Portal Displays product page

Retailer adds product and supplier to local database

Portal Displays list of results

Retailer selects product from results

END

N

User

MNPN Search?

N

Descrip�on Search?

N

PDE Search

User flows and decisions mapping out the user journey throughout the product

3

Interviews with Users and SMEs

I had a number of interviews with the aimed users of the product as well as a number of subject matter experts in the industry. This helped to identify what was most critical from a UX point of view.


4

UX Workshop

As part of advocating for UX and shifting the company culture to embrace UX, I presented and executed a UX workshop. This involved various members of the organisation including developers, testers, product owners, BAs, customer support and training as well as management. The presentation inclued UX considerations to take into account in regards to the project I worked on as well as interactive brainstorming and discussions with all members involved.

Presenting what I had learnt from my user research

Discussing some best practices for components


Discussing some potential pitfalls

Discussing potential software options for development

Some initial ideas were thrown around in the form of wireframes


DESIGN The approach to the design phase was to begin with wireframes which would then be designed into high fidelity prototypes. As stakeholders placed an emphasis on the look and feel of the product from the onset, I presented high fidenlity prototypes as opposed to low ones. My approach to ensure the best design was presented and eventually implemented was to develop a total of three high fidelity designs parallelly and take the best elements from these. Through discussions with both my internal project team as well as external users, a combined design was produced.

PROTOTYPE 1

PROTOTYPE 2

PROTOTYPE 3

Parrallel Design Process

MERGED DESIGN

ITERATE DESIGN


1

Wireframes

Selected wireframes were converted to digital after an initial discussion with the internal project team.


2

Prototypes developed

The three prototypes were shared with the internal team as well as selected users to get feedback. Each design had a different approach and included different elements. From the feedback received a merged design was developed.

MINFOS PRODUCT CATALOGUE Search or scan product by barcode, description, PDE or MNPN

SEARCH

SELECT

Use the Minfos product catalogue to search products. You can also use your in store scan gun to search by barcode.

View or select your product from the list of table resutls.

SEARCH MINFOS

ADD Now you can manullay add and subscribe to this supplier and product in your local Minfos system.

PRODUCT CATALOGUE

Search or scan product by barcode, description or PDE

SEARCH


Welcome to the Minfos Product Catalogue. Use this portal to efficiently search through our master database and confirm your supplier and product details. Learn more about this service here.

Search or Scan product by barcode, description or PDE

SEARCH

Recently added products

Telfast chld elix 150ml 1

Telfast decong tab 6

Telfast tab 120mg 10

Telfast tab 120mg 30

Telfast tab 180mg 10

Telfast tab 180mg 30

Telfast tab 180mg 50

Telfast tab 60mg 10

Telfast tab 30mg 20

Telfast tab 180mg 60

Telfast tab 180mg 50

Telfast tab 180mg 30

The merged design consisted of different elements across the three designs. For instance, the landing page was taken from the third prototype, and other pages (such as the search results page and product details page) were taken from the other design prototypes. Once the combined solutions was designed, this was further iterated with feedback from the internal team as well as some users. Other pages which were not the promary focus on the product (such as 404 erro pages or the about us page) were developed using the style and template applied to the merged design.


DEVELOPMENT I expanded beyond my role as a UI and UX Designer and was directly involved with the frontend development of the web application. After the development team put the elements on the page, I was assigned the responsibilities of styling the page with the righr colours, padding and spacing which I had designed in the original mockup. I worked collaboratively with the development team in a virtual environment to implement and deploy the final web application.

1

Web application

Initial wireframes for the landing page of the product.

Initial wireframes for the landing page of the product.


2

Web Development

Bootstrap 3 was used for many styling elements including the margins and padding, as well as the column grids. The foundation framework used here was react.js.

In addition to using the bootstrap grids, I was responsible for defining the media queries to ensure the web application was styled correctly for mobile and tablet devices.

Working within a team environment I ensured my code was kept to best practices. Testing through the platform was also executed before being passed.


3

Development Strategy

The technology used for this project included react.js as the overarching framework and bootstrap for the styling and css elements. The development methodology and exexution was atomic design, which broken the overall application into components which are then developed seperately and tied together through the web page.

Atomic Design, created by Brad Frost, is the development modal we used.

My involvement with this was to break down my design mockups into smaller components such as atoms and molecules which I then applied the frontend styling to. This methodology allows us to scale up larger applications through breaking down designs into smaller reusable components throughout the web application.

4

Atoms and Molecules

Molecules search bar 1

3

Search or Scan product by barcode, description, PDE or MNPN

Atoms:

1

text input feild

2

description text

3

2

search button

Components are broken down into smaller elements

SEARCH


Search Results Table 1

2

PRODUCT

BARCODE

MNPN

Telfast chld elix 150ml 1

9319733001958

92372

SUPPLIERS 4

Supplier Details 3

Name

Supplier Code

PDE

A.P.I. Retail file

01163

294586

C.H.S. Pty ltd

03097

299955

Symbion pty ltd

06080

423602

Sigma company ltd

19090

861542

Swaps

19260

TEL 28

Chempro head office

CHEM1

861542

Atoms:

5

1

table headings

2

table row

3

child row

4

expand / collapse button

User Stories

In addition to the molecules designed, i also prepared user stories for how users should interact with the different compents.

Scenarios search bar Create Searchbox No autocomplete. When there is no text in the searchbox Then the hint text is displayed in the searchbox. WHEN the searchbox contains the text "blah" AND the enter key is pressed THEN the onSearch call is fired with the term "blah" WHEN the searchbox contains the text "blah" AND the search button is pressed THEN the onSearch call is fired with the term "blah" GIVEN the searchbox is on the page THEN a search textbox is displayed AND a search button is displayed with text "Search"


Cake house

MOBILE AND WEB E-COMMERCE This project involved both the user interface design and the user experience optimisation for a local bakery looking to introduce new digital products for their company. The bakery required an ecommerce website as well as mobile applications to expand its reach to its local audience. I was the lead UX Designer and project manager, where I worked directly with management, product owners and customers of the organisation. I was invloved end to end on this project begining with preparing the sales presentation and presenting to key decision makers.

ABOUT THIS PROJECT

MY ROLE

PROJECT

TECHNOLOGY

UX LEAD

UI DESIGNER

WEB

MOBILE

APPLICATION

APPLICATION

HTML / CSS

MAGENTO

PROJECT MANAGER

BRANDING

UX PROCESS

SALES

RESEARCH & ANALYSIS

DESIGN

TESTING AND OVERSIGHT


SALES PRESENTATION As the lead user experience designer and project manager on this project I was involved with this project from the initial project proposal phase. The deliverables here included a project proposal presentation outlining the proposed product features, technologies used, teams engaged as well as budget and timelines for the ecommerce and mobile application. As we won this project, this was a sucessful presentation with the client.

Application Features Sell Products

01: Data Collection Potential Data Requirements

Shopping Cart

Product ID

Delivery From Supplier Name

Name Delivery

Custom Cake

Supplier Contact

Category

Orders

Sold Date

Date Arrived

Display Item

Date of Expiry Birthday

Discounts

Reminders

and Promotions

Our Process to acquire data will be thorough and complete to ensure all the relevant product information will be entered into the Android and iOs applications.

Analytics

This information will be real time and dynamic

05: Analysis

06: Social Media Marketing Product Analysis

1

1

Through the use of sales information,

Social Media Marketing will be integrated into

data analysis will be performed

6

the Aroma App.

on the which are the highest and

Leader in the market in regards to technology

lowest selling products. 5

Sales Analysis

2

Based on discount sale specials and promotional discounts, analysis can be performed on the best performing sales promotions

2

across a wider scale.

tech savvy and younger audience

Better Informed Decisions

3

Through an analytical approach, we will assist you in providing the tools and data required to help make more informed and ultimately better decision for Aroma Bakery.

Increased awareness about Aroma bakery

Outreach to the more

3

Additional source of sales and revenue through app on purchase (for specials and promotions)

4

Building for the future in the case of expansion to additional and larger bakeries around the state of Karnatka and more


RESEARCH AND ANALYSIS This phase involved gaining a deeper insight into the processes and functionality of both the mobile application and the ecommerce website. The client was looking for a solution which offered e-commerce solutions as well as improving the current branding for the bakery. The deliverables here included: competitor analysis, user and process flows, stakeholder interviews as well as a card sorting exercise to assist in the data architecture and navigation. Current company data and user interviews assisted me in this phase.

1

Experience Mapping

STAGE

PREORDER

ORDER

EAT MEAL

NOTES

“where are the drinks”

“do you have any deals?”

“mango’s the best”

“is this spicy?”

“do you do delivery?”

“its to sweet”

“that’s not really a cake”

“what drink is good with this”

“good value here”

“this menu is very big”

“the waiter’s are nice here”

“I’m confused”

“we’ll meet here again”

“where are the dry items?”

OVERALL

“It seems as though the

“There is some confusion

“Good feedback

menu is over complicated

about offerings,

from the instore

and a little unorganised for

but not to bad”

operations and service”

cake shop”

experience mapping from comments taken from within the bakery. This helped to identify some problem areas which we could address in the redesign of the web and mobile applications.


2

Information Architecture

CARD SORTING FOR PRODUCTS BREADS

PASTRY

SAVOURY

SWEET BREAD

10

SWEET TART

10

MULTI GRAIN

10

CHOCO TREAT

10

BURGER BREAD

8

MOUSSE

10

SANDWICH

3

VANILLA CAKE

GARLIC STICKS

3

PUFFS

DRINKS

OTHER

10

SHAKES

10

CRACKERS

3

7

SOFT DRINKS

10

BADAM SPECIAL

2

FRIED CHIPS

10

FRUIT JUICE

10

BADAM SPECIAL

2

10

BURGER BREAD

2

MILKS

9

MILKS

1

SANDWICH

3

SANDWICH

4

BADAM SPECIAL

8

GARLIC STICKS

2

GARLIC STICKS

5

CRACKERS

card sorting exercise to correct some of the confusion with the menu

SUMMARY SLIDES OF ANALYSIS

1.0

favourite product at bakery

Sweet Bread 25%

Chocolate Cake 23%

Fruit Juice 15%

Sandwiches 10%

? French Fries 9%

Crackers 8%

Garlic Sticks 7%

summary slide of card sorting exercise

Other 3%


DESIGN The approach to the design phase was to begin with wireframes which would then be designed into high fidelity prototypes. Initial low fidelity wireframes were developed for the e-commerce websiteand for the mobile application. After review of the initial wireframes, high fidelity mockups were designed based on the approved wireframes. In addition, a high emphasis was placed on the branding side of the web and mobile applications as there was very little existing digital branding.

1

Wireframes


2

Prototypes developed

Cake house Home

Cake house

About Us

Our Legacy

Locations

Products

Contact Us


Cake house

New Assortments of Biscuits available

Cake house

Featured Products

Cheery Cake

50

40

Add to cart

Cake house

Cake house Breads

Choco Cake Add to cart

Breads

Sort

Drinks

New Assortments of Biscuits available

New Assortments of Biscuits available Fresh White Bread 1 Loaf

70

Add to cart

Puff Pastery

Featured Products

Multi Grain Bread 1 Loaf

95

Burgers

Add to cart

Cake Orders New Assortments of Biscuits available

Cheery Cake

Kara Bread Roll

Sweet Bread

1 Roll

1 Loaf

25

Add to cart

80

50 Add to cart

Choco Cake Add to cart

40

Add to cart


TESTING Although I was not directly involved with the development of the mobile and web eccommerce applications, I worked closely with the development team to provide digital assets and oversight on the project. I was directly involved however with certain areas of testing, primarily user acceptance and usability testing. This involved observing user patterns as well as using analytical tools such as google analytics to asses how user patterns and trends. The results from the qualatitive and quantative analysis led to a number of changes to both applications.

1

Usability Testing

Cake house

New Assortments of Biscuits available

Featured Products

Cheery Cake

50

Choco Cake Add to cart

40

Add to cart


2

Branding Review

As mentioned earlier, branding was an emphasis on the project. To ensure branding requirements and standards were met, a branding checklist was put together and checked off as part of the testing.

CAKE HOUSE BAKERY BRANDING CHECKLIST NO.

CHECK

PASS

1

Company Logo colors are as per approved.

Y

N

2

Typefaces used throughout are as per approved.

Y

N

3

Images are as per branding guide and approved.

Y

N

4

Content used throughout is as per approved guidelines and standards.

Y

N

COMMENTS

Amit s portfolio 2018  
Amit s portfolio 2018  
Advertisement