Sustainable Shopping

Inspiration

Many people have the urge to support local small businesses but it is often a lot of effort trying to identify each of these more sustainable businesses individually. Therefore, a showcasing platform bring all these small businesses together would benefit both the consumers and the shop owners greatly. This is particularly relevant during the pandemic, when it's increasingly difficult to sustain small businesses. Moreover, encouraging purchase of environmentally friendly products aids both awareness and positive contributions to combat environmental threats. We think it is also important to aid actions of social responsibility in the form of charitable donations as many people don't find the time and tend to forget about such causes, hence why we have included a donation feature to relevant charities.

What it does

Advertising sustainable products and feeding information into how and why a product is sustainable, is not only educational but also promotes sustainable shopping. Considering the global environmental threats, it is crucial to not only educate, but make the alternative options more accessible. This explains the incorporation of both artistic and educational displays to attract users in our web app proposal. The additional point system doubles the extra pennies spent following rounding up to nearest £ at checkout. These points are converted into vouchers from sponsors or money for donations to charity, thus environmental aid is awarded by actions of social responsibility. This also helps people set aside money for donations. With these ideas, we designed our user interface to demonstrate how we can navigate between the basic different pages an online shopping app would have, for example: welcome, log in, homepage, product checkout and my account page. Keeping the user in mind, we developed 2 My Account pages, separated by buyer and seller variables, to ensure the content displayed is relevant to the user. Here, the customers are able to view their points, vouchers and donations. We included navigation tools to follow user interactions, for example navigation following clicking. Directory is entirely dependent on the user actions, so if they have ticked the 'I am a seller' at the sign up page it leads them to their seller account page to view their stats, instead of the default homepage for shopping.

How we built it

We split the work between user interface and backend development, exploring new technologies such as justinmind and Node.js/React.js respectively.

On whimsical brainstormed web designs for a basic user interface, but it lacked interaction and demonstration of navigation. Instead, we discovered a suitable software for our design, justinmind. Following discussion, we thought it would be more suitable and accessible if our main idea was focused to be launched on a mobile, so we developed our initial idea to a mobile design on justinmind. Experimenting with and researching widgets, enable understanding of the fundamentals to successfully visualise and improve our design in both efficiency and aesthetic perspectives. Our main approach around this was implementing events and conditional arguments prior to the event, allowing us to create an event with multiple conditions. For example, red hidden text will show if checkbox for Terms & Conditions is not checked, but if checked and 'I am a seller' is also checked, it will navigate to the Seller Account Page, and lastly if checked but 'I am a seller' is left blank it will navigate to Homepage. This design was finalised, with the considerations of the users' aims and marketing purposes for buyers.

We just started building the frontend using React.js, our goal was to copy the design from justinmind and replicate it on a webapp, which could then be migrated to a mobile app using React Native. The backend would be created in Node.js, using the Express framework. We planned to use MongoDB to store our users and the relevant data for each account. E.g. we would have a products table with all products and each product would have a name, price, image, type (and any other relevant details) and be linked to a seller in our seller table. Our home page would display all the products in the products table and there would be options to filter by type, seller, colour etc.

Challenges we ran into

Initially among us we had very limited knowledge of coding and had never designed a web app before, so were unsure of where to begin as we struggled to identify what would be suitable within our skillset. We had a couple of ideas that we brainstormed before realising that the complexity was a bit advanced for our current skill level. This lead us to spend too much time discussing, so we incorporated a time management framework to help us decide and assign suitable roles.

Accomplishments that we're proud of

The sample app on justinmind for showcasing our ideas definitely!

Learnt basics of design development and its frameworks. Understanding basics of software such as justinmind and flutter and we are looking forward to developing this knowledge and our skills in these areas.

What we learned

The tools that we used to created our submission had never been used by us before, for example justinmind and Node.js/React.js. We learnt and practiced logical reasoning approaches to navigate new interfaces for our submission. For some of us, introduction and implementation of new design concepts such as frontend, backend and user interfaces supported the overall design framework.

Understanding each others backgrounds and having an open mind for brainstorming is key to developing the most suitable idea and implementing it by assigning suitable roles to members of the team. The importance of practicing good communication and time-management in collaborative coding is the key to a successful project.

What's next for Sustainable Shopping

Completion and optimisation of the app.

Further steps: reach out to shop keepers for being listed on the app, look out for sponsorship for our prizes and charity donation. Choosing the charities that we support. Increase publicity in the local community or by featuring on sustainability-focused media, such as magazine or website. Set up individual circles (version?) for each county/city.

Built With

• flutter
• javascript
• justinmind
• visual-studio
• whimscal