top of page

Initial Design Concepts -- Sketches: Figma & Adobe XD.

Cluster 'A': User Experience -- Flow of Information, Number 01.

Sketches--FigmaA1.jpg

The complete dual case study projects all began with the following sketches. 

The first notion which came to mind was to imagine while visualizing as to 'how' a website experience starting point would look like.

The inevitable result was a simple, yet directive-natured welcoming page. It is the access point for the complete user experience.

The second notion was to list all of the stores which are connected to a central website hub. To access a store of choice, the user just needs to select the store by adding a checkmark into an empty square.


 

Sketches--FigmaA2.jpg

After selecting the store location of choice, the user is then directed to the specific store website.

You will immediately notice, that the user-customer selected what is identified as store number two (2).

On the main / home page, their is a brief history of the store which pertains to the store of origin and how the selected store came into materialization / fruition.

On the same page, there is the highlighting of the top product choice for the past month based or determined by total sales tabulated.

At the bottom of the page, there is the mentioning of a direct store contact number. For, if customers experience any problems or merely need assistance, all he/she would need to do is contact the store management.




 

Once redirected to the store page, the user is then provided a clear and specific list of available products. 

The choice options all center on the main categories: a. beverages, b. coffee products, c. sandwiches, d. snacks or delicacies, e. muffins, f. cupcakes.

Once the customer determined the product category
, he /she would checkmark the option and then be redirected to a list of variety applied to the category of choice.

At the bottom of the page, there is a question as to whether the user/customer is an active customer or not. If the user would select 'Y': (yes), he/she will then be redirected unto a database for current customers. The information which is stored includes name, physical address, city and state, contact number, and email address plus whether he/she receives the monthly newsletter and archive of prior products ordered with predesignated payment information listed.




 

This rather odd-looking page is nothing more than a clear and simplicit description of product variety options.

In essence, each product of choice includes a brief description of the product itself with the most important aspect being the ingredients used and final tabulated charges for the same product.




 

This page also identified as 'product 05' is nothing more than the updated order itself.

It includes the actual product selected plus the accompanying charges including designated taxes to be collected.

At the bottom of the order, there are three vital fields: 1) subtotal charge, 2) taxes incurred, 3) total transaction charge.






 

This page also identified as 'checkout 1 - 06' is nothing more than the final point before payment is made via cash, debit card, or credit card, etcetera.

It includes the actual product selected plus the accompanying charges including designated taxes to be collected.

It also includes the customer information plus the determined transaction method with vital transaction information.

At the bottom of the order, there are three vital fields: 1) subtotal charge, 2) taxes incurred, 3) total transaction charge.






 

Cluster 'B': User Experience
-- Journey Number 01.

This graphical image represents the user-customer in the process of choosing his/her products of choice. The actual device that is intended is that of a smart tablet with no specific manufacturer type identified.





 

Sketches--FigmaB1.jpg

This graphical image represents the user-customer in the process of deciding whether to contact his local bakery and order his favourite product of choice. 

His name is Patrick Smith, a 40-something year old university professor with an love for pastries.





 

This graphical image represents the user-customer in the process of deciding whether to contact his local bakery and order his favourite product of choice. 

In brief, it is nothing more than an illustration of the daily act of users even potential users choosing to order from one's local bakery, cafe, etcetera.






 

This is what ought to be considered as the menu selection-option page.

Notice, that products are listed within a corresponding category. Applicable to (beverages), for example, there are: Iced Tea, Coffee, Water-- i.e., size option for each. Applied to (snacks), there are: Doughnuts, Muffins, and Cake by the slice, to name a few.






 

This page identifies the customer, Patrick Smith, patiently waiting to leave and pick-up his order. He cannot wait for 25-minutes to pass before he heads toward the bakery. His taste buds are salivating and are about to explode. 

This page also identified as 'checkout 06' is the final point before payment is made via cash, debit card, or credit card, etcetera.

It includes the actual product selected plus the accompanying charges and designated taxes to
be collected.

It also includes the customer information, as well as the predetermined transaction method with vital transaction details.

At the bottom of the order, there are three vital fields: 1) subtotal charge, 2) taxes incurred, 3) total transaction charge.






 

Cluster 'C': User Experience
-- Journey Number 02.

Sketches--FigmaC1.jpg

This graphical image represents the second-of-two user experiences. This image demonstrates the user quite enthused over the end of a work day, and his decision to order his favourite snacks from his local bakery.

The customer name is Patrick Smith. A 40-something year old professor. He is married with two children. He is an unapologetic caffeine addict. Also, he cannot get enough of strawberry and blackberry pastries.  






 

This is the welcoming page for the second user journey experience. The initial question presented to the customer-user is if he is an active customer.

If the option selected is 'yes' then the customer is reouted to the bakery customer archive-database.

If the option selected is 'no' then the user-csutomer is routed to a page which inputs his or her personal information, etcetera. 


 




 

With the customer having selected the option of 'yes' for an active customer, he is then routed to the customer archive-database which reviews his documented information, etcetera.




 

Cluster 'D': User Experience --
Flow of Information, Number 02.

Sketches--FigmaD1.jpg

This image applies to a responsive website design. Unlike the previous sketches, this image pertains to a user experience that is consistent between technological devices used to access the local bakery user experience.

Note, this image is for a mobile application vantage point. The main emphasis is on the functional flow of information that is contingent on the action prompts selected by the user-customer.




 

This image applies to the 'About Us Page' for the responsive website design.

It merely provides details i
nformation for the local bakery.

 


 

Sketches--FigmaD4.jpg

This image applies to the 'Our Staff Page' for the responsive website design of the local bakery.

It merely provides details about each employee or staff member working with the local bakery. It covers the employee name, position filled, and contact information.


 


 

Sketches--FigmaD5.jpg

This image applies to the 'Customer Archive Page' for the bakery's responsive website design.

It applies back to the option-prompt that the customer identifies himself/herself as 'Yes', an active customer. After selecting the 'Y': yes option, this page is then the access point which leads into the customer database.

Note, the user types in the (username), the (password), and an option to save information.  

 


 

Cluster 'E': User Experience -- Responsive Website Design, Number 01.

Sketches--FigmaE1.jpg

This image applies to the 'Home Page' for the bakery's responsive website design, once again.

Yet, it applies or focuses more on the user experience.  

 


 

Sketches--FigmaE2.jpg

This image applies to the 'About Us Page' for the bakery's responsive website design, once again. Once again, it applies or focuses more on the user experience.

It focuses on relevant background information for the overall bakery network which includes information on the home page for the first bakery opened along with vital information for each individual bakery within the designated cities and states.

Email:

Follow (my) UXD Vision:

  • LinkedIn
  • TikTok
  • Facebook

Phone:

+1 (682) 233-3894

Voice/SMS-text.

+1 (469) 226-3103

WhatsAppBiz.

bottom of page