After completing the RMIT's Web Programming course with an HD grade, you feel very motivated and decide to found a start-up specializing in mobile and web application development. Despite its small size and lack of experience, your company aims to compete directly with larger firms by providing innovative design, enjoyable UI/UX, and timely support service. Now, the only thing you need is to have very challenging projects to prove your start-up's worth.
By actively participating in networking events and knowledge-sharing workshops, you've increased significantly the number of people who can recognize your business name and logo. Founded only one month ago, your start-up has successfully built and launched more than 10 small and medium websites. You feel OK but not so exciting. You want to do something that can scare you!
Eventually, you get one today.
Your client is a multimillionaire and world-class serial entrepreneur. She has created and sold businesses in diverse industries as education, health-care, and event management. This time, she intends to build an online mall where store owners and shoppers around the world can easily sell and buy products. Seize this opportunity to make your brand unforgettable.
There are 4 main user roles in this online mall:
Mall admins: these are users who can do every stuff on the website, such as setting mall renting prices and commission percentages, deciding which ads to display, backing up and restoring data, etc.
Store owners: those people rent virtual spaces from the mall owner. The rented spaces are used by store owners to manage their products as well as to provide shopping interfaces to shoppers. Products' names, prices, categories, descriptions, images, etc. are controlled by their respective store owners. Store owners have to pay the mall owner renting fees periodically and commission fees every time they sell a product successfully.
Shoppers: shoppers are people who browse, search, view, and buy products listed in the mall/stores. Shoppers can keep track of their favorite stores and products. They can also view their past transactions.
Guest: guests are similar to shoppers, but they can browse, search, and view products only. To be able to save favorite stores, products and buy products, guests need to register shopper accounts (and hence become shoppers).
In this first stage, the client wants you to design and implement UI/UX parts of the mall using HTML & CSS. To attract as many visitors as possible, the client wants the new website to support at least 3 types of device:
- Desktop computer:
1024pxor higher width - Tablet:
768pxto1023pxpixels width - Smartphone:
767pxor lower width
Here are some places where you may need to provide different UI component arrangements for different device types:
- Navigation menu bar: always-visible horizontal navigation menu on desktop computers vs. alternating between visible and hidden vertical navigation menu on tablets/smartphones
- Input form: a label and its linked input field may be positioned on the same line on desktop computers, but they should be placed on 2 different lines on tablets/smartphones
- Layout: a multi-column layout on desktop computers may collapse into a one-column layout on tablets/smartphones
Even though Google Chrome has been selected as the main browser to test this mall, the client believes there may be many people who visit the mall using Safari, Firefox, and MS Edge. She expects the same support for those alternative browsers. After explaining to her that it is very difficult to achieve the above conditions perfectly, she agrees to test your work with the latest version of those browsers only. The summary of supported browsers is given below
- Chrome
- Safari
- Firefox
- MS Edge
More requirements are listed below:
- Website colors need to be professional and consistent across pages. The color combination should be eye-catching
- There should be enough contrast between background and text colors. The text should be legible on all devices
- Easy navigation between pages. Links and normal texts should be easily differentiated
- Accessibility needs to be enforced, e.g. always use the "alt" attribute to describe images; use the fallback mechanism for videos/audios/fonts to ensure at least visitors see something; etc.
- Follow SEO guidelines to make the mall website search engine-friendly. Use semantic elements whenever possible.
More specific details provided on RMIT Canvas (Login with RMIT ID)
Yabe online mall e-commerce website: https://kuri-team.github.io/yabe-online-mall.github.io/ (main branch)
- Instructor: Tri Dang, PhD. @TriDang | website
- Student: Mike Vo @miketvo | website
- Student: Doan Yen Nhi @doanyennhi
- Student: Du Duc Manh @rider3458
- Student: Tran Ngoc Anh Thu @tnathu-ai