t
h
i
s
o
p
q
r
s
d
o
c
u
m
e
n
t
u
v
c
o
n
s
i
s
t
s
w
o
f
x
y
v
t
h
w
o
s
T
h
LIO: STUF FT
H
z
y
e
u
r
k
q
a
t
p
r
p
o
w
a
s
n
m
d
o
n
e
l
k
f
o
r
j
t
h
e
c
l
i
e
n
t
s
i
T
------> DE Y-SIG C N N FA
A
ID
ND C O M ID A PIL E D
IT
w
FO RT O P
SO
T HA T I T L O O KS
who knew what they wanted & they cared about design, they were the usual clients who don’t treat designers as screwdrivers. P.S. - All’s well that ends well
Ne
E
Tu
Neetu Patel
“Find problems, solve them and align those with goals”
I have an industry experience of almost a year in different intervals & in different fields like visual merchandising, Graphic design & UI visual designer(majorly GD & UI). Over this time period, I have worked with different clients and various industry/freelance projects. With every project I take up, I make sure that I add something new in my bag of experience which would help me in the long run and help me broaden my horizon.
Contents 01
CloudAccel Website UI Redesign of Cloud computing service provider website
02
1-14
Hoppend App UI Design UI of a Bar stock exchange app to ease the party experience
03
15-32
Design Elements Logo Design Logo design for the frontend store for the interior decor company
33-40
website UI
1
CLIENT: CloudAccel WEBSITE: https://www.cloudaccel.io/ PROJECT TYPE: Website UI COMPANY I WAS WORKING WITH: Think Digital Parent Company - Think Tankers
3
ABOUT CloudAccel deals with web services related to cloud computing & mainly focuses on various services of cloud migration for clients ranging from mid to large enterprises. CloudAccel provides strategic & tactical guidance and helps to foresee preventable pitfalls & project overruns. FOUNDED: 2017
HEADQUATERS: Boca Raton, Florida, US
SPECIALITIES
Cloud Services, Cloud Strategy, Cloud Migration and Cloud Optimization BRIEF
Align the overall look and feel of the redesign with what the brand stands for and offers OBSERVATIONS
- The visual language was dull & not congruent - Graphics were not very professional. - The number of website pages was more in comparision to the website content. - Services were divided into categories and were on different pages. - The visuals had no connection to the content. - Icons were very basic.
4
SITEMAP
Home
Why CloudAccel
Cloud Migration
Cloud Optimization
Case Studies
Knowledge
Strategy
Optimization
Contact Us
Efficiency
Architecture
Low Cost
Security
Readiness
Governance
Devops
5
Wireframes
CloudAccel final website wireframes
6
Colour Scheme & Typeface
Montserrat ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz 1234567890
Text
Pantone 446 C
Secondary
Pantone 158 C
Background
Pantone 663 C
Pantone 7683 C
Primary
7
Icons
ACCELERATE
ARCHITECHTURE
AVAILABILITY
TRAINING
DEVOPS
EFFECIENCY
KNOWLEDGE EXTENT
GOVERNANCE
LOW COSTS
OPTIMISATION
QUALITY
SECURE
SECURITY
STRATEGY
CLOUD
8
Mainscreens
CloudAccel final website (Full Home page)
9
CloudAccel final website 1
10
CloudAccel final website 2
11
logo
CONCEPT CloudAccel logo is a combination type of Logomark & Logotype consisting of a cloud shape, speedometer, speeding lines and digital circuit connection symbol and the word CloudAccel. The logo reflects the purpose of cloud computing services along with the use of bold colour combination enhancing the brand image. Being a combination type allows for greater freedoms to creatively represent the brand while ensuring the company name is associated with it. TYPOGRAPHY & COLOUR SCHEME
ROBOTO BOLD
PANTONE 715 C
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Logo Keywords: Speed, Speedometer, Cloud & Digital
PANTONE 158 C PANTONE 7540 C
CLEARSPACE
X X
X X
To ensure the usability of the logo, it must be surrounded by a minimum amount of clear space. This isolates the logo from surrounding elements such as graphics, text or patterns that may detract attention & lessen the overall impact. Using the logo in a consistent manner across all applications helps to both establish & reinforce immediate recognition of the CloudAccel brand.
12
Process breakdown
Previous website of CloudAccel with the old logo
13
1
2
3
4
5
6
From left to right 1. Logo options 2. Wireframe 1 3. Wireframe 2 4. Website colour option 1 5. Website colour option 2 6. Services wireframe
14
APP UI
2
CLIENT: Hoppend PROJECT TYPE: App UI COMPANY I WAS WORKING WITH: High Speak (As part of Graduation project)
17
ABOUT Hoppend is an app for every 21 plus who is always up for booze wants to steal a few hours from their busy life and chill for a while, maybe by chilling with friends, meeting new people and enjoying good music. Hoppend is a bar stock exchange app which compares all the Clubs/Bars and lounges around you and provides you with necessary information like alcohol prices, Club rules and timings, events, DJ/Artists playing etc. This App is basically intended to make the partying experience better, less time consuming & hustle free. SPECIAL FEATURES
Drinks, Clubs, Events, Make a bid, Buy the Bottle & Book a surprise BRIEF
Design UI for a Bar stock exchange app enhancing and easing the club/party experience in order to increase footfalls in clubs. KEY POINTS
- The visual language should be playful - Graphics & colours should a little vibrant - The colours shouldn’t be very stark as the app will mostly be used in clubs - The UI should be relatable to all the age group entering the club - Users should be directed to the club to avail all the services - Design & icons should be clean & with clear usability
18
TARGET AUDIENCE
The app is targeting every individual who is 21 above and likes to drink and have fun in a club/bar. Clubs/Bars are usually filled on weekends. Out of hundred, there is a 30:70 ratio of crowd i.e. 30% of the crowd is there on the weekdays and 70% crowd over the weekends. The apps aim to increase the crowd over the weekdays. METHODOLOGY
An online survey was made to specify the target consumers, a sample size of 40 responses of people from different age groups and the work of fields were studied. There were a lot of problems which were results of the survey and the survey is the major source of the background study of the consumers. PROBLEMS WE FACE
There are so many problems faced by people who desire to go to a club but get stuck due to the following reasons: - You are not able to finalise a place - The alcohol prices - Unaware of the upcoming event - Space in the club - Crowd mix of the club - Proximity to your house & Opening and closing timings WHAT WE DO
So to tackle a few of the above problems people usually end up doing the following things: - Either we go to a different bar (or clubs) apps/websites to compare the prices of alcohol/food. - We check the ratings on zomato - We call individual bars/clubs to know the cover charges, artist playing, types of music and offers - Check the distance on Google maps and go to Ola/Uber for booking cabs
19
HOW HOPPEND HELPS
Hoppend provides with relevant information, making less time consuming & clearing all the hustle and doubts regarding the club/bar such as: - Search according to mood, location, artist playing, music genre, drinks, clubs, events, trending & offers - Compare Alcohol prices in different clubs/bars - Buy a bottle and have it/stock it up within a given time period - Book a surprise for friends/family - Get to know about the upcoming events/artist/DJ happening in the coming weekend/weekends - Search opening& closing timings of the club, Patrol timings - Cover charges information &Transport/pool options(e.g. Ola/Uber) - Club capacity (Current/ Overall)
USER PERSONA 1
Tiasha Graphic Designer, 23
NEEDS
Tiasha recently joined a new job in a multinational company. She has to take her friends out for a party and today drinks are on her, but her budget is low. She is struggling to calculate the estimation of the treat and is tired of switching in between apps i.e. zomato to google maps to clubbing apps to search for the best deal. GOALS
On hoppend she can compare the booze prices in different places and can also get to know about the music/artist performing. She can pre-order everything when the fluctuating prices are low and have an amazing time with her friends without worrying about the budget in the bar/lounge.
20
USER PERSONA 2
Mr Bansal Businessman, 45
NEEDS
Mr Bansal is a businessman. He regularly indulges in get-togethers and business parties at popular bars/lounges. He wants to bid a few bottles and tries his luck at this. GOALS
On Hoppend, he bids 15 whisky bottles at the desired price and to his delight wins the bid. He gets a reason to show off in front of his business rivals and also gives a taste of his business skills to others for networking. USER PERSONA 3
Onir Web Developer, 32
NEEDS
Onir recently got married. It’s his first marriage anniversary with Tanya. Onir gets a last-minute meeting call from his boss without getting time to prepare for their special day. GOALS
He decided to check the Book a surprise option on hoppend and he chose the occasion, music, lighting and table accordingly. He was relieved as within 5 min he arranged a surprise without spoiling his special day’s plans for Tanya.
21
SITEMAP Home
What’s happening
Events
Book A Surprise
Drinks
Drink Types
Orders
Clubs
Club Types
Club Details
Make A Bid
Buy the Bottle
Order Details
Nearby
QR code
Profile
By Location
Notification
Favourites
Trending
Offers
Payments
ID Proof
Referal
22
wireframes
Screen Size: 660 X 375 pixels
23
24
Colour Scheme & Typeface
Century Gothic ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz 1234567890
Background
Pantone 419 C
Secondary
Pantone 7417 C
Text
Pantone 656 C 20%
Pantone Black 6 C
Primary
25
Icons
DRINKS
CLUBS
EVENTS
MAKE A BID
BOOK A SURPRISE
BEER
HOME
ORDERS
QR CODE
PROFILE
NOTIFICATION
REFERAL
CORONA
WHISKY
VODKA
WALLET
BANK
CALENDER
CARD
UPI
26
Screens Final Frames 660 X 375 pixels
27
28
app flow APP HIERARCHY
App hierarchial pattern provides direction to the app by providing information regarding the flow of the app. Below mentioned are three parts of the app which consists of the main features of the app namely HOME, HAMBURGER & PROFILE; there are features marked under these categories which makes space in these categories. An app flow with set hierarchy is a very essential part of the process of making design for an app as it gives the idea of what comes next and whether any feature is repeated or not. HOME PAGE
HAMBURGER
PROFILE
Drinks
Offers
Favourites
Clubs
Payments
Payments
Events
Wallets
Offers
Make a bid
Book a surprise
Referal
Buy the bottle
Make a bid
Adhar
Book a surprise
My bottle
Help
Orders
Stock up
FAQs & Links
Qr code
Refer a friend
Logout
Notification
Help
Profile
Terms & Conditions
Search
About us
Cart
Drinks: Alcohol prices as per fluctuating stock rates. Deals based on Alcohol prices. Clubs: Trending/Nearby/Location-wise clubs with relevant details about the club. Events: Upcoming activities in clubs, artists, Event calendar of all the clubs. Make A bid: Open bid on Alcohol bottles/pegs/shots with their bidding amount. Buy The Bottle: For the cluster willing to buy bottles as per fluctuating stock rates. Book A Surprise: A go-to & convenient surprise arrangement for friends and family for any occasion along with the customised table, mood, lighting etc. Favourites & Notification: Favourite Artist, Club, Event, Drink etc will be notified for getting the best deals What’s Happening: A blog with all the page 3 updates related to events and activities happening in various clubs along with an “All about last night” section.
29
logo
CONCEPT Hoppend logo is an emblem type which comprises of the word “Hoppend” in a circle. Hoppend is the combination of two words hop & end, which basically symbolises the sole purpose of the app by ending the hop from one app to another with an extra P for tipsy effect The word has been put in the circle to indicate the overall experience that the app provides. Along with it, the logo looks like the top view of the cap of the bottle. The colour combination is kept bold aligning with the brand personality. TYPFACE & COLOUR SCHEME
SQUARE721 BT BOLD ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
PANTONE NEUTRAL BLACK C PANTONE 656 C 20%
Logo Keywords: Happening, Booze, Junction, Nitery, Buzz, Party, Inn, Chill & Social
CLEARSPACE Provided space to preserve the integrity & visual impact of the
X
Hoppend logo. The clear space around the logo is an integral part of
X
X
its design. As it ensures that the logo can be seen quickly & clearly, uncluttered by other logos, symbol, artwork or text. The minimum required clear space is defined by the measurement “X” as shown, which is a typographic unit measured from the baseline
X
to meanline. This measurement is equal to the height of the letter “P” in the logo.
30
process breakdown
Logo options & Hoppend screens
31
32
Design elements
3 CLIENT: SR Space Designs & Concepts PROJECT TYPE: Logo design COMPANY I WAS WORKING WITH: High Speak (As part of Graduation project)
35
ABOUT Design Elements is the branch of SR Space Designs & Concepts, which is an interior decor construction unit and wants to launch a front end store for their construction unit. Design Elements is a one-stop furnishing brand which comprises of all the A to Z items required to build a house into a home. The brand provides with experts who can provide wise advises with regards to the queries of the people and help them to set up a home. PARENT COMPANY: SR Space Designs & Concepts Llp
SR SDC is a Limited Liability Partnership firm incorporated on 02 June 2017. Their main business division is into furniture design & have expanded their range to furnishing, decor, lighting, dining & various other departments. Their core idea is to provide sustainable housing & furnishing. TARGET CONSUMERS: Middle class to Higher middle class COMPETITORS: Home town, Home lane, Elevate, Room therapy, Seating world,
Young wood & Livspace BRIEF
Design a logo for an interior design company with overall home furnishing & decor and align it with the core value of the parent company.
36
Process KEYWORDS
Kitchen, Wardrobe, Home, house, Walls, Perspective, Door, Space, Dimensions, Faces, Corners, Enclosure, Indoor, Edge, Door key, Timber, Stay, elements LOGO BREAKDOWN
+ Design
=
+ Chimney & Table
Elements
Design Elements
Concept: The logo is a combination of abstract and letter type logo. It reflects the vibe of a interior decor with the use of chimney & table in order to show the purpose of the company. It consists of a slight hint of letters “D” and “R”. The single and bold orange was taken to show the warm & welcoming feel of the brand. The overall look is kept simple in order to enhance it’s classiness. COLOUR
=
+ Monochrome
Pantone 165 C
Colour logo
After going through multiple discussions and combinations of name of the brand representing the decor comapny, “Design Elements” was chosen. The elegant vibe was enhanced with the choice of colour as orange is bright and represents warmth, creativity and enthusiasm which aligns with the core of the company.
37
CLEARSPACE
X
X X X
TYPEFACE
NEUTRA TEXT DEMI
NEUTRA TEXT BOOK
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
1234567890
CONSTRUCTION
38
visual identity
39
From left to right page: 1. A stack of Design Elements visiting cards 2. Stationery branding of Design Elements 3. Design Elements logo at the bottom of a folded page 4. Design Elements wax seal stamp 5. Storefront/ facade of Design elements (Above all are mockups to represent how the designs would look like in the real world)
40
THANK YOU!! We have reached the end of the document, I appreciate your patience, time & consideration.
PORTF OLIO - Neetu Patel