Kokum Hills
PERFECT HOMESTAY GETAWAY
UX UI Designer
An increase in user interaction by 20%, and location visibility increased by 60% on Google
Role
Ux Ui Designer
Feb 2022 - Aug 2022
Skills
-
User Research
-
Usability Testing
-
Competitive Audit
-
Card Sorting
-
Wireframing
-
Mockups
-
Prototyping
-
Design System Building
-
Content Generation and Editing
Tools
-
Adobe XD
-
Figma
-
Illustrator
-
Photoshop
-
Optimal Workshop
-
Microsoft 365
-
WebAIM WCAG
Team
-
Amit - Stakeholder
-
Shelly - Designer
-
Sam - Conservationist
Understanding the Stakeholder
-
Conducted Zoom meetings with Kokum Hills owner for stakeholder insight
-
Being sympathetic to stakeholder's vision for simple living
-
Showcasing simplistic living and educating users on the farm's flora, fauna, and water restoration efforts
-
Design approach aligned with stakeholder's vision for a user experience reflecting Kokum Hills' essence
It's challenging to find eco-friendly and device-free accommodations to stay at while on vacation
Understanding The User
Iterations made guided by user feed back helped me create designs that are user friendly
Header Iterations
-
The initial header design with a transparent overlay caused visibility challenges for menu items.
-
User feedback prompted adjustments, incorporating theme colors for improved clarity.
-
The 3rd menu option adopted a darker shade, enhancing contrast and meeting WCAG AAA accessibility standards
Location Tab Iterations
-
Previously, the address was not easily found on Google Maps, causing user uncertainty
-
In response, we've added a map with a clickable link for a more convenient and reliable user experience
-
The link redirects users to Google Maps with preloaded destination coordinates, ensuring easy location-finding
About Tab Iterations
-
Goal: Provide users with valuable farm information
-
User feedback revealed a preference for a simpler approach
-
The new design includes a brief overview, with a "More" button for detailed information on a dedicated page
CTA Button Iterations
-
The About button transformed into a user-friendly and descriptive "Read More" button, inviting visitors to explore further details about Kokum Hills
-
The details button title was vague, and the redesigned title About our rooms entices users to discover information about the accommodations
-
Revised button labels enhance user understanding and engagement
Accessibility Considerations
-
Font size ensures easy readability
-
Color contrast follows a ratio of 8 and above
-
CTA buttons feature unique, informative titles
-
Headings group paragraphs, offering content clarity
-
Headings provide a clear content outline
Design Library created for the site ties into nature
Color Library
PRIMARY
6D1FD4
9.05 AAA AA
421381
5.36 AAA AA
6B8A4C
DAE1D2
15.68 AAA AA
FFFFFF
21.1 AAA AA
000000
21.1 AAA AA
COMPLEMENTARY
481B4F
13.59 AAA AA
TRIADIC
CFB5AE
10.87AAA AA
GREYS
333333
12.63 AAA AA
GREYS
4D4D4D
8.45 AAA AA
GREYS
808080
5.31 AAA AA
GREYS
E6E6E6
16.82 AAA AA
Typography
Open Sans Bold 60 Hero Area
H1 Open Sans Bold 42
H2 Open Sans Bold 34
H3 Open Sans Bold 24
H4 Open Sans Bold 20
P1 _ Paragraph_ Open Sans Regular_20
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
P2 _ Paragraph_Open Sans Regular_18
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
P3 _ Paragraph_Open Sans Regular_16
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
My Takeaways
Impact
-
Recognition of the importance of understanding carbon footprint and embracing sustainable living
-
The idea is gaining global traction, taking root as a significant concept for implementation in daily life
What I Learned
-
Many websites rely on pre-made themes and blocks, requiring designers to adapt while maintaining the original structure
-
Stakeholder designs lacked a sticky header, prompting the addition of prominent menu sections on the main page for continuous accessibility during scrolling
-
Implemented an up arrow for users to swiftly return to the top of the page with a single click
Overcoming Challenges
-
Various factors, such as the unavailability of site media, can hinder project progress
-
Consistent effort is crucial; regular update calls and an information sheet keep stakeholders informed and provide access to visual elements and required assets for project advancement
TESTIMONIALS
Amit
Stakeholder
"Thanks for the beautiful website design! You've perfectly captured Kokum Hills' vibe, enhancing our online presence. Great job"
Shelly
Designer
"Collaborating with this Michelle on Kokum Hills was a pleasure. Her creativity and attention to detail were invaluable in crafting a website that truly captures the essence of our project"
Sam
Conservationist
"Working with Michelle on our conservation project was fantastic. Her design skills effectively communicated our commitment to sustainability. Highly recommend!"