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