Abo Shnab

Project Overview

Abo Shnab is an appointment, scheduling and reservation app that helps people easily reserve a date to get a haircut from a wide range of barbershops or by requesting an in-place haircut.

My Role

Design user flows from user stories, design and produce various user requirement specifications for various interactive screen layouts, create product look and feel this includes illustrations, icons, a general style guide and collaborate with business and engineering team to prioritize for production roadmap.

Deliverables

• Task Flows

• User Flows

• WireFlows

• Look & Feel

• Branding Assets (Logo, Illustrations, Guidelines and Design System)

• UI & Final Mockup

• Prototype

Analyzing user stories

You can write here as much as you want, this text will always look nice, whether you write longer paragraphs or just a few words. Click here and try it out.

Thinking on Paper

This is high-level thinking on how a user might finish a task to achieve a specific goal at the end of the journey, so this means we are thinking on general steps/decisions he needs to do in order to achieve the goal.

Here I'm thinking of features not screens, in the wireframe stage, we might merge more than one step/feature into one screen.

I start to ideate and think about the steps needed to finish each of the user tasks, I did more than ideate sessions until I get satisfied with the result.

Refine, Share and Finalize

At this stage, I needed a discussion with a stakeholder in order to discuss the flows, as well as make sure they are involved in the design decisions.

I shared a PDF with stakeholders contains user goals & tasks in detail including a visual vocabulary, so they can understand each of these steps and what colors mean.

Moving to User Flow

After that I moved to design the user flow diagram, this is the logic of all flows comes into one giant map, this visualizes all steps needed to be taken for each goal/task.

Initial Sketching & Ideation

Here I moved to a concrete concept that can be touched, seen and interact with, I used inVision free hand at this stage to collaborate with stakeholders in ideating on sketching screens for each flow.

Check the full-size sketching board on inVision Freehand.

Deciding on product's character

My process on this part of product's life cycle always starts with sketching - especially if the product doesn't have an identity, Through discussion sessions with stakeholders I bring a handy note where I document characteristics and words they used to describe the product, I try to use those words as a starting point to generate initial ideas and sketches.

I make a list of the needed visual items, Illustration and Icons:

• For the onboarding

• For the 2 main actions (In-Shop, In-Home reservations)

• Success Reservation

• Brand icons for the main navigation sections

to the executions...

Brand Iconset

I design a custom iconset to be used side by side with the app main sections in the navigation side drawer.

Dressing the wireframes in costumes

I used all brand & visual materials to design the final mockup of the app screens - including microcopy- taking into consideration the flows, goals and tasks from the previous steps...

Lo-Fi prototype from the final mocksup

Prototyping is an integral part of the design process for two key reasons, Visualization for better communication with stakeholders, Feedback from usability testing and from the team, I did a quick prototype using Marvel from the mockup screens to achieve these two goals...