Role(s)
UX/UI Designer
Timeline
Three weeks
Tools
Figma, Adobe Photoshop, Adobe Illustrator, Lightroom, GSuite, Trello
Team
Blu Bunton
The Problem
The current website for The Frances Modern Inn falls short in capturing the essence and allure of the property, leading to missed opportunities in attracting and engaging prospective guests.
The Solution
A comprehensive website redesign is needed to showcase The Frances Modern Inn’s exceptional potential and unique offerings. Through captivating visuals, engaging storytelling, and intuitive navigation, the new website will effectively communicate the inn’s distinct character, creating a compelling online presence that entices visitors to explore and book their stay.
Duties
As a solo project, I completed each step of the process from end to end. I conducted user research, UI analysis including heuristic evaluation, annotations, color accessibility analysis, and audits. I conducted competitive analysis, user testing, and made iterations based on findings. I created wireframes and prototypes for each stage of the design. Finally, I presented the case study to the stakeholder.
Proto-Persona
Heuristic Evaluation
Heuristic Evaluation Checklist
Key Takeaways:
- While the primary goal is present, further refinement is necessary to achieve its full potential.
- The color scheme is predominantly a single gray color.
- Use of white space is poor. Content is either cluttered or there is too much white space.
- Users are hit with walls of text especially on mobile.
Website Annotations
User Focus
First thing the user sees is blurry images that have confusing purpose. First impressions are key!
Lack of hierarchy and contrast between sections makes for difficult scanning. Two introductory headers.
The Events menu option is not immediately visible on larger screens. Missing affordance for the user.
Development Focus
Navigation bar is not proportionally spread out. The right side has a larger margin than the left
Image does not fill entire block leading to misalignment.
Text is not inline with one another on the amenities cards
Competitive Analysis
Competitive Advantage
Call to Action(CTA)
Competitors strategically placed multiple call-to-action (CTA) buttons on each page, clearly indicating their purpose and guiding users to take specific actions.
Imagery
Each competitor excelled in using images that tell a compelling story. They understood the power of visual storytelling, recognizing that an image can convey a message more effectively.
Navigation
The navigation was streamlined and user-friendly, ensuring ease of use. Additionally, some websites implemented breadcrumbs, enhancing the overall user experience and making it more enjoyable.
First Impression
Competitors excelled at creating captivating above-the-fold sections that instantly captured and held users’ attention.
Ideation
Value Proposition
My solution is to redesign the website with a concise and eye-catching design that captivates users. It will provide an easy booking experience while effectively showcasing the unique offerings of the hotel. By building user confidence through an engaging and user-friendly website, I aim to increase the likelihood of bookings and enhance the overall user experience.
Feature Prioritization
After brainstorming some ideas as well as identifying features that competitors utilized. I then created a feature prioritization matrix to put into perspective of future implementations.
Lo-Fi Wireframes
Prototype
Desktop Prototype
Next Steps & Future Considerations
- Proceed with the redesign of remaining pages.
- Conduct thorough user tests for each page to gather valuable feedback and insights.
- Continuously iterate and refine the design based on user feedback, ensuring optimal usability and satisfaction.
- Seamlessly develop and implement the redesigned website, incorporating the desired enhancements and improvements.
- Integrate new features that enhance the user experience and align with the overall design goals.
- Iterate and fine-tune the newly implemented features based on user feedback and make necessary adjustments.