Project Details

Role & responsibilities
Lead designer, responsible for brainstorming, wire-framing, prototyping, visual design, and (eventually) QA of final build. 

About this project
While at Joss & Main, I was given the opportunity to not only start a redesign of the brand's e-commerce app, but to completely toss the existing app and start from the ground up. This process started at the very beginning: defining objectives for the redesign, brainstorming and defining user flows, wire-framing user experiences, and then adding a thoughtfully executed, on-brand visual design on top. While I designed the experience for both mobile and tablet devices, for brevity I have just shown the iPhone design process.

Please note: This project ultimately remained a design exercise, as, after my departure from Joss & Main and Wayfair, the team decided to ultimately move in a different design direction.

Brainstorming & User Flows

Post it notes, whiteboards, draw.io & brains
At the beginning of this project (and throughout, as I've wanted to get into the nitty gritty details of how a back end operation may parse some data), I spent a lot of time with a whiteboard and/or a stack of post-it notes, mapping out how the app would function.

Sketching

Paper & pencil
For each screen or series of screens in a user flow, I sketched many scenarios to get ideas down on paper before they flitted out of my mind. This was especially useful in parsing out how an interaction would work—I was able to start answering questions like, "What happens when this drawer opens?" and "How do you get from screen A to screen B?"

Wireframes

InDesign early on; Sketch in later phases; InVision throughout to demonstrate user flows
I used wireframes as rough blueprints of how information would be arranged on each screen or screen type. These were vital in nailing down how much space would be devoted to different elements, making decisions on hierarchy and functionality, and giving myself a starting point when it came time to build out a visual design. I also used the wireframing stage to explore further the way the user flow would work, and regularly created Invision prototypes out of my gray-box outlines.

Visual Design

Photoshop to start; Sketch in later phases
I created a compelling visual design that evoked the Joss & Main brand—elegant & refined, but always gracious and welcoming—after the layout of each screen was (mostly) finalized in the wireframes. Since functionality had already been determined in earlier phases, I was able to spend time getting into the nitty gritty of the details so that the design would be thoughtful and delightful.

Home Screen

Event Screen

Product Detail Screen

Search