Brooklyn Sauceda AET 333 Studio 3/1/23
This is a behance on the design pipeline of a website where information on companies and their chain of production. Inspired by websites such as "GoodOnYou" but more in-depth and more concentration on home goods than fashion.
So for a basis I had concepts for this website before and had a general idea of colors and name for the website:
The logo had bright neon colors that strain the eyes but the general idea of rounded squared lettering and using a pixel texture to tie technology and the environmental image together were there.
the name eco-mmerce is a play on the "eco-" additive to "ecommerce", really driving the message of this website's goal to inform a consumer online on the practices and standards companies have and can adhere to in their chain of production while bettering that companies impact on the planet.
Here below is a very rough prototype of an item page for the website. Mainly just trying to get a general idea and format for how a page were to look.
The colors here are way too bright and accessibility was not the main focus when creating this prototype. I immediately knew this prototype would change for the accessibility standard I wanted to reach.
I planned my schedule out ahead of time and followed my schedule accordingly. I did not have to change my schedule due to the unfortunate ice storm that hit Austin, I instead cut my development of multiple design layout and pages for the Figma prototype.
Beginning the planning with Trello I developed a KanBan-like board to keep everything organized and break down my process. I started general and worked down.
Below is the general deliverable I wanted to complete:
I then broke down the steps for documenting the design pipeline and what to keep in mind.
I then broke down my aspects of the project needed such as shape, color, typography, imagery. All design aspects for my website and the documentation mentioned above would naturally be filled.
I further split the verification and design process for my elements of the website.
Below I created another process post detailing my updates as I went and incorporating my new colors and fonts.
And then I developed specific topic posts for those elements and verifications. Below is the typography and what I chose.
Here I am updating the design to be accessibility friendly to dyslexic and colorblindness specifically and from the research such as the British Dyslexia Association, Verdana and OpenDyslexic were good options to make reading easier. Which for an information hub website- the ease of reading is essential.
Planning the color scheme I wanted to keep with greens and blues to match the logo but also keep with the environmental message first and foremost. I added darker colors for the body text and header for higher contrast and gave myself a simple palette to use colors if I needed such as the dark greens and browns.
In verifying the contrast I used numerous websites such as color contrast checker and a colorblindness simulator I used to check to see how I think my contrast would fair for people of different color blindness.
Another contrast checker I used to verify my selection.
I really appreciated the simulator so I can somewhat understand how someone else would see my website.
I then made a copy of the text that would display on the website and tried to match how the layout would go in Google Docs.
My goal is to welcome the viewer and explain the goal and purpose of the website, how it works and so on. I incorporated engaging language to emphasize the idea and passion of what we're doing here; to learn and open up transparency.
After finalizing my selection for colors and text I incorporated shapes and style. Shapes in reference to UI/UX elements for the website and Style for colors selected for icons created and images needed for visuals.
For the imagery needed I wanted to create a diagram for the text of the "Our Purpose" section and wanted to emphasize the unknowns in a chain-of-production.
Below is the diagram with the text to tie the message.
And to finish my design I reinvented the logo for Eco-mmerce. I had the general idea for what I wanted and even tried a different symbol, but the leaf seemed to make the most sense iconography wise. I darkened the text and gave a sharper edge to the text. I also tried without the pixel texture and I felt it wasn't as tied together as I wanted. Below the logos are from beta to final order.
I then started the second part of designing these components- building the prototype. I had never used Figma prior so I was unsure of what I could do, but I built the home page prototype. I used OpenDyslexic as my main text for the exaggerated visual difference in lettering and Bolded as well as increased text size of my headers.
while designing the components I was able to add Fixed components that would stay on the the screen regardless of where the viewer scrolls, so with accessibility in mind I added a Text resizer to my home page. Unfortunately due to time, I was unable to make the resizer function but having it there for the design and staying fixed communicates the function. I also made the header fixed so the viewer can always select "home and be redirected back to the top of the webpage.
Here is the home page entirely pictured. Credit to Iconify for the icons of the text bubbles and paper verified by the "search below" section. I also credit below these photographers for their use of images from unsplash (a plugin for Figma):
Jason Briscoe for kitchen photo
Sidekix Media for bathroom photo
Mathew Coulton for pet food photo
Eco warrior princes for garden tool
Jerry Wang for toy photo
And finally below I have the prototype embed into this, but if it is not working I have the link here. Thank you for reading the Design Pipeline for Eco-mmerce!
