Design Sketches For Local Farm Shop Mobile App

Goals of the Assignment

1.You are to develop at least two different initial concept designs that would meet the requirements of the Local Farm Shop. These designs will be wireframe only designs at this stage.The Local Farm Shop case study is located in Interact Resources. You need to read this case study before starting this assessment item.
You will prepare a presentation for the Local Farm Shop to display your concepts as well as discuss both concepts and the recommended design.
 

1. Sketch two (2) alternative interface designs for the Local Farm Shop problem. These designs should be for a web page as viewed on a standard 60cm (24 inch) PC monitor with a suitable screen resolution. It is recommended that you use the Balsamiq Mockups or other wireframe tool for these concept designs. (60 marks)
2. As part of your presentation, you should indicate why these designs are a good solution for the Mountain Artists Cooperative. The presentation should recommend one of your designs for further development and state why this design is recommended. (40 marks)

There are two goals in this assignment:

• The first is to exercise your user interface design abilities. Creativity in balancing usability with the constraints of the interface will be essential to successfully completing this assignment.
• The second is to start thinking about WHY you chose and used certain designs or design patterns. You need to be able to discuss why your design is a good solution to the problem.
   

The design sketches for this assignment can be hand drawn. But, if you do use hand drawn sketches, then you need to ensure that they can be easily read when they are scanned into your presentation. It is highly recommended that you use the Balsamiq Mockups tool for the final copies of your concept designs.

Remember that you are sketching a concept design for an interface. Your designs are concepts that you are presenting to your client. They should not be accurate to the pixel-level.

Rationale

This assignment aligns with the following learning outcomes of this subject:

• be able to identify and explain the importance of the principles of design in relation to the design of an interface;

be able to design a user interface to meet a given set of requirements.

Presentation

• All designs are to be presented in a slideshow format. You are to use either PowerPoint or Google Slides (download in .pptx format) for your presentation.
• All designs and design discussions are to be presented in a single slide deck. All design sketches or wireframes are to be embedded into the presentation. You should consider using the speakers notes section of the slides for any additional commentary on each slide.
• You should be prepared to present your solution as part of a tutorial.

Interact Resources :

Local Farm Shop Case Study

A local farm shop needs to design a mobile app for their customers to provide online services and to expand their market. Their main products categories are food, gifts and wine. In addition to seeling farm products they run a small restaurant and provide catering as well. The customers can also book their restaurant for small functions like birthday parties. It can accommodate a maximum of 50 guests. Currently, they cater only the local customers and they expect to expand their business by introducing a mobile app. At this stage they expect to trial with only private customers, not the corporate customers.

Below is a description of the mobile app to be designed. The mobile app design should include drawings done using a pencil/mock-up application to perform the below functionalities by the users:

1. Register themselves in the system with their personal details including contact details and address (residential and postal). Also, allow them to update their details.
2. View loyalty discount details, special offers, etc.
3. View product categories.
4. Search for products.
5. View individual products.
6. Order products by adding products to the shopping card. At this time the customers are allowed to register themselves (or if already registered update their contact/delivery details) and to make payments by a credit card.
7. View location details.
8. View facilities including the restaurant.
9. Book the restaurant for a party.
10. Login/logout

The farm owner expects to provide a highly useable app with an excellent navigation and useability features so that more customers attracted to the online farm shop. The farm owner has commissioned you to design this mobile app and evaluate the useability of it initially with few users or by experts. If the initial design is successful, they expect it to be implemented and roll out to the public.

Note: you need to focus only on the useability and functional aspects of this mobile app to satisfy the functional, useability and business requirements. No need to focus on technical, hardware, software, network and other details.

1. Introduction

            The Mountain Artists Co-operative is a retail that sells food, gifts and wine online. The report provides the details of the online business of the organization. For the business of the organization they would require a website and the wireframe designs of the website has been provided in this report. The organization also have restaurant that can be booked for the around 50 peoples. Hence, there has to be an option of booking the restaurant for the users who visit the website. In addition to booking tables for 2, 3, 4 the entire restaurant can also be booked for hosting events and parties. Two alternatives for the website development have been provided in this report and the possible recommendations have also been provided in this report. Both the designs have been made keeping in mind the requirement of the organization. However the designs are different for both the wireframes.

2.1. Wireframes

                                             

                                                                

                                                               

                                                              

                                                         

                                                           

2.2. Labels of wireframes  

The wireframes have been designed according to the following labels:

• Homepage
• Login and registration
• Shop Page
• Product page
• Payment

2.3. Description of wireframes

The following pages have designed for the wireframe:

• Homepage
• Login and registration
• Shop Page
• Product page
• Payment.

The user can view the products of the website however they need to log in in order to book the item or buy them.

3.1. Wireframes

                                                        

Local Farm Shop Case Study

                                                              

                                                         

                                                                

                                                                   

3.2. Labels of wireframes

The wireframes have been designed according to the following labels:

• Homepage
• Product Page
• Product Details
• Payment
• Booking

3.3. Description of wireframes

The following pages have designed for the wireframe:

• Homepage
• Product page
• Product Details
• Payment.
• Booking

            In this design the user needs to log in to the website for viewing the items. Hence, the payment option are automatically acquired by the system.

4.1. Advantages of interactive design 1

The main advantage of design 1 are:

• The design provides excellent user navigation, hence the accessibility of the users increase with the design.
• The design provides very efficient payment methods for thee users.
• The product display feature of the design is also very efficient.
• The design is very attractive.

4.2. Advantages of interactive design 2

The main advantage of the second design is that the homepage design is very attractive and the login feature of the website has been integrated within the same and the user is not required to visit or load another page in order to login into the website.

4.3. Disadvantages of interactive design 1

The main disadvantage of design 1 is that the design is incorporated with too much functionality and sometimes it can be very difficult for the developers to implement a large amount of functionality in their backend coding.

4.4. Disadvantages of interactive design 2

There are various disadvantages of design 2. The major disadvantages are:

• The design does not include all the functionality required by the organization.
• The payment procedure in the design is also very inefficient.
• Due to the lack of functionality in the web design the backend coders have to go through a lot of coding to implement the functionalities in the back end.
• Additionally, the contents displayed in the design are very congested and it is assumed the user would find it very difficult to look for the product.

4.5. Design principle of design 1

Design one is implemented with very apt contents. It is not at all overloaded with excess information. However all the important information required for the organization is provided in the design. This is design is also targeted towards providing the users with the honest content by the company. The design is also implemented keeping in mind that the information should conveyed to the clients with a great ease. The designing of the wireframes have been done with proper spacing in between the contents, so that the design does not look congested and are appealing to the users.

4.6. Design principle of design 2

The second design has been done with the notion of making the design compact and simple. The design generally focuses on the implementation of all the functionality is very compact technique within the webpages.

4.7. Usability goal of design 1

Functionality of Mobile App

The main goal of designing the wireframe is that the design has been done keeping in mind the ease of accessibility of the users. The business goals of the organization are also kept mind while designing the wireframes so that the attractiveness of the design attracts more clients to the website. In addition to this, the organization also aims at providing all the functionality to the users so that the users can perform all the major actions required by them in order to purchase a product. Hence, the designing of the wireframes have been done with the goal of satisfying the users and making sure that the users are able to perform all the actions desired by them.  

4.8. Usability goal of design 2

The compactness of the design is the main goal of usability for the design. The main goal is aimed toward reducing the complexity of the frontend coders.

4.9. Usability experience of user for design 1

The first design have very positive usability experience. The navigation and the functionality of design are very efficient. Additionally, the design is very attractive for the users where the product can be viewed properly by the users. The search option is also very efficient for the users, so that they can be guided directly to the product they are looking for.

4.10. Usability experience of user for design 2

The second design is very compact and the user can find a number of options in a single page. The navigation method is also implemented in the design and this, can guide the user in case the user is lost in any page.

4.11. Selection of specific design and justification

Design 1 for the development of the website for the organization has been done as the design provides all the requirements for the clients and the organization as well. The goal and the design of the wireframe design 1 is more customer oriented while the wireframe design 2 is more of a business website. However, it should be noted that the increase in customer satisfaction increases the business efficiency for any type of organization as well. In addition to this, the navigation and the links in the first are design are very prominent. Hence, it is advisable the first design is adopted for the development of the website for the organization.

4.12. Usability using the interface

For the usability of the interface the prototype is to be provided the users and they are to be subjected to a number of question. The reviews of the users would be very useful for the developers to consider the aspects of the design that need improvement. As because the design is very user centric hence, it is a must that the developers take very useful insights from the users on the usability of the interface.

Conclusion

Conclusively, it can be said that the interactive design 1 has been done with a superior user interface than the interactive design 2. This design would be helpful for the organization to implement their website designing. Design 1 provides a better design principle for the users while the second design is not up to the mark in the sense of design principle. The information about the choice of selection and the proper justification for the selection of the interface design has been provided in this. In addition to this, the report has been developed with the aim to provide the readers with a fair amount guidance during the development of a user interface. Additionally, it can also inferred from this report that the designing of any type of business process should be done with a user centric approach and that the user satisfaction is one of the major factors for increasing the business efficiency of the organization.