The short version
Table of Contents
Click on any of the following to jump to that section
I was approached by the Adobe live team to come on to their Behance stream as their featured designer. The project involved was to show off Adobe XDs responsive resize capabilities by designing something that translates from a mobile to a desktop platform.
I then created a made up client "a cookie delivery service" as the project bases. I then created a mood board, sketches and designed the wireframe and visual design live on stream as the host and I took questions.
The below work is my progress from pre-work to live stream demonstration which the overall duration was about 5 days.
The Project
-
The client is a cookie shop that would like to have a new website that will enable customers to order their cookies for delivery or pickup
-
The client would also like there customers to be able to shop from both desktop
and mobile
The User Flow
My next step in the pre-work was to create a flow that users would normally go through if they were to use the site. I also created it to help inform the viewers of good practice when researching for a client and how it will help inform the design decisions going forward in that it gives you and your team an idea of what you will need to design.
Comparative & Competitive Analysis
In order to convey what kind of site and conventions we need to uphold to enable users to quickly shop around the site, I needed to do some comparative and competitive analysis. I looked up a few local and non-local websites to get a sense of how it should look and what's important to consumers.
Home Page
Sketched Wireframes
After taking into account the user flow, what the client is looking for and the CC, I took the next step in sketching out what I believed would be a good starting point for the wireframes. Normally given enough time, I would preform some usability testing, but seeing as how I had a week to prepare the pre-work I dove right in.
Mood Board & Aims
In addition to the wireframes, and research I also wanted to figure out what kind of emotions I wanted to envoke and what sort of colors and look Ill be aiming for in the visuals. I thought something that was fairly timeless and retro that often conveyed the idea of a simpler time. Vibrant pastel colors for a kind of fun and happy feel to the site.
Things associated with cookies:
-
Tradition
-
Milk
-
Chocolate
What makes a cookie:
-
Crispy
-
Chewy
-
Thick
-
Cakey
-
Thin
-
Soft
Feelings they'd like to invoke:
-
Happy
-
Fun
-
Cozy
Design look:
-
Something that feels homey
-
Associated with a simpler time
-
1950-60s esque
-
Add a modern/contemporary feel to it
-
Checkered patter?
Branding Ideas
To help speed up the process of designing the visual elements for the stream, I went ahead and filled out some branding ideas for colors and types. The colors follow the idea I stated previously about fun and happy pastel colors as well as a couple that are reminiscent of chocolate or cookies.
As for the type, I wanted a heading that has a cool retro look that will pop out against a vibrant background and for the body a simple and readable font. Titles would be slightly oldworld gothic, but not quite something that would standout too much like the mighty slab header.
The Live Stream - Day 1
I wont lie, I was very nervous, however with all the prep-work done prior to coming on the stream I was able to really utilize that work and bang out some wireframes.
Home Page
Add To Cart
Shopping Cart
The Live Stream - Day 2, Desktop
After the first day was mostly spent designing the wireframe, the next step was to flesh out the visuals. I was glad I had the colors, the type, and feel all prepared prior.
I'd like to note that the below screens have almost no changes from the final design I had done on the live stream.
Home Page
Products Page
The Live Stream - Day 2, Mobile
