alex-cosmas / sfl

Take home Interview challenge for UX Developer Role at SFL

Summary break down of my submission for the UX Developer role at SFL.

Total time taken*

18 - 20 Hrs (Including research and design)

Project Details

Deadline:

Monday, 6th September 2021 (by noon).

Instructions

Exercise 1:	Please follow the instructions in the attached document with the name SFL CODING CHALLENGE and come up with a Figma website design and its prototype. (Only three pages are required for the Figma exercise).
Exercise 2:	Please follow the instructions in the attached document with the name SFL CODING CHALLENGE and come up with a web app for our evaluation.

Project Scope:

		*Status**
Create visually pleasing landing page with a carousel of three (3) animated images of different types of confectionaries of your choice.	(Demonstrate color selection and aesthetic eye).	75% Done
Must include dynamic call to action component.	Demonstrate button placement and overall layout, HTML 5 and CSS skills assessed here).	Done
Bio page with fictions profile of baker.	Must include experience, smiling face with chef garb.	Done
Must cake order form built in React JS with at least names, email and phone number.	Must include validation of the above and a submit button that pops a Sweetalert alert component requesting confirmation before order.	Done
A small product listing of three (3) types of cakes (Red Velvet, Black Forest and Chocolate fudge cake) one (1) Blueberry Muffin one (1) Raspberry Bramble with stock picture of each and a small three paragraph description.	Must include stylized price with toggle between Japanese Yen or Bitcoin symbol. (Demonstrate use of flex grid and sizing and conditional rendering).	Done
A brief checkout page with summary of ordered items with quantities and total.	(Extra marks for good design and UX).	Done
A Contact-Me component with fictitious phone number and address.		Done

Theme Colours:	Cream white, Beige and dark Chocolate. (Use liberally).
Font:	Any delightful font must include both sans and sans-serif font that don’t conflict.
Font Size:	Any of your choice.
Images:	Any stock image (Watermarked images are ok too).
Languages:	HTML, CSS, SASS and React JS for form.
Design:	Responsive.
Frameworks:	Bootstrap, any font library, any image library and prebuilt templates allowed but frowned upon if not well executed (better if custom).

How to clone and run the application.

First, install your node dependencies using

yarn

 # or

npm install.

Secondly, run the development server using:

npm run dev

# or

yarn dev

My Process.

I first sketched a simple flowchart and a site map with pen and paper.

I later translated the flowchart to low fidelity wireframes with Invision Freehand.

Used Figma to create a functional prototype.

Translated the designs into code using NextJs & TailwindCSS.

For state management between the components, I used Xstate.

Considerations

What is tomorrow a new feature is required or need to be disabled? How easy will it be to add or remove?

Will the app crash because a feature was removed and how easy will it be add new things to the app without having it crash.

Choice of layout.

I went for the stacked layout because I could easily extend the application as per need without going back or rebuilding the entire app.

Efficiency.

Ability to build reusable components which allows making designs easy and specific through layouts.

Below is a a link and an image of the wireframes for my solution.

https://projects.invisionapp.com/freehand/document/QDgwcg6Od

.Prototype Links

https://play.tailwindcss.com/cUgXVWPjZS?layout=horizontal

Active Link