OUR ROLES
UI/UX Designer
Full Stack Developer
THE CHALLENGE
We were paired up with a team member and each of us had our own ideas for each section of the site. We sat together for a week of planning which also involved us creating a CRUD Map so that we could better outline what components were needed and what challenges our guest may have maneuvering our site. My teammate Emily took on ownership for the planning and design of the Travel blog. I took ownership in planning and design for the e-commerce portion of the site.
PERSONAS
CRUD MAP
Before we really dove into the designing we created a CRUD (Create, Read, Update, and delete) Map. This helped use under stand what functions our users (Blogger, Reader, Store Owner) would need access to and at what capacity.
Below are our results:
It all started with pen and paper…
After all of our key components were discussed and marked out. First we created a rough sketches of our wireframes with pen and paper to play around with how we wanted to layout our components before the Lo-Fi versions in XD.
LOW FIDELITY WIREFRAMES
BRANDING
THE OUTCOME
The day finally came where we presented our completed site to a room full of our family, friends and Critics.
The site features blog posts that can be filtered, photo gallery and with an online store, shopping cart, and checkout functionalities. The entire site is size-responsive built with React, JavaScript, Bootstrap, HTML and CSS. Below are shots of the E-commerce portion of the site. The Frontend and Backend coding for the project can be found in the shared repository here.
