Project Overview
Project Brief
Creating a responsive webpage
My Role
UX Research, UX Design, UI Design
Duration
80 hours
Introduction
Dairyland Ice Cream is a family owned and operated ice cream shop located in Middletown, PA. They’re a neighborhood favorite ice cream shop and Jon and Katie, the owners, love contributing to the community — Katie is also an ICU nurse at the local hospital. They’ve always wanted to have a place for people to enjoy their favorite treats (ice cream, coffee, and donuts), with their favorite people, and even their favorite pets!
Dairyland's website lacks user-friendliness due to multiple issues, including poor color contrast, inadequate information about their menu, location, and updates. Furthermore, their menu is not easily accessible on mobile devices, which is a primary source of information for users on-the-go.
Problem:
Create a responsive website and experience that users can enjoy via all platforms, easily guide their way through all the necessary information, all while having contrast and aesthetics working in their favor.
Solution:
Research Methods
Testing the usability of the current website to discover how user-friendly it is at its current state.
Heuristic Evaluation:
I followed up the heuristic evaluation by doing a competitive analysis with direct local competitors and other larger/franchised ice creams shops.
Competitive Analysis:
I wrapped up my research portion of this project by having users complete some tasks using the current website. Most of my results from this usability test were conclusive with the heuristic evaluation.
Usability Testing on old Website:
Heuristic Evaluation
Competitive Analysis
While conducting the research of the difference Ice Cream shops, I found that Penn State Creamery was noted for its unique and innovative flavors such as Peachy Paterno and its historical association with Penn State University. Cubby's Ice Cream Cafe was highlighted for its large selection of flavors, reasonable prices, and community involvement. Van Leeuwen Ice Cream was recognized for its use of high-quality, organic ingredients and sustainable practice. All-the-while, Dairyland Ice Cream, was distinguished for its emphasis on using locally-sourced ingredients, its cozy atmosphere, and its commitment to supporting the local community.
User Insight
By Project Roadmapping, I was able to synthesize the data into actionable insights and a clear plan for moving forward. This approach helped ensure that the client's needs and the needs of their users were both taken into consideration, resulting in a more effective and impactful solution.
Project Goals
How can we design a cohesive web and mobile experience that enhances visitor engagement, promotes accurate and up-to-date information, and ultimately increases traffic to the site and ice cream shop?
UI Kit
The chosen color palette of blues and pinks aligns with the ice cream shop's brand identity. These colors are commonly associated with sweetness, playfulness, and joy, which are qualities often attributed to ice cream. The color scheme helps to create a visually appealing and memorable brand image for the ice cream shop.
Develop
Lo-fi Wireframes
I created Lo-fi wireframes in order to create a basic and rough structure of the webpage before moving onto more detailed design. The lo-fi wireframes provided a quick and easy way to visualize the layout of the webpage and helped to identify any potential issues with the design early on in the process.
Mid-Fidelity Wireframes
I started the mid-fidelities by starting to add color and imagery to the lo-fi’s. The design slowly became a little more engaging to help capture the attention of the user, highlighting key elements and drawing them to important information. By focusing on the color schemes, the typography, and the imagery, it helps contributes to the overall feel and brand identity of the website.
Usability Testing & Iterations
I conducted usability testing on the mid-fidelities, and some considerations that I made were:
I removed the accordion menu from the mobile navigation as it was unnecessary due to the size of the menu, and this simplifies the navigation for users.
To address the length of the mobile menu, I created a scroll container that allows users to jump-to different sections of the menu easily.
We initially had the mobile navigation menu Capital Blue, which was the same color as the footer. However, upon further consideration, we decided to switch to a White navigation menu to maintain consistency with the Desktop version's navigation and header. The layout of the remaining pages was also structured in a similar fashion to that of the Desktop versions.
In order to maintain consistency with the style and color scheme of the rest of the site, I also created imagery that matches the overall design aesthetic.
Scroll Containers for menu sections
Final Desktop Design
The desktop design features a large hero image that showcases the brand's signature products, and a prominent call-to-action button that invites users to explore the menu. The navigation bar is fixed at the top for easy access, and the layout is designed with ample space to ensure clarity and readability.
Final Mobile Design
The mobile design features a simplified layout with a collapsible menu, making it easy for users to access the most important information on-the-go. The hero image is still present but scaled down to fit the smaller screen size, and the call-to-action button is prominently displayed. The color scheme and imagery are consistent with the desktop design, providing a seamless user experience across devices.
Learnings & Considerations
High-quality imagery can significantly impact the success of a design, and it would have been ideal to have access to original imagery from the client's ice cream shop for this project.
Although the current design includes minimal screens and pages, I am enthusiastic about the opportunity to collaborate with Dairyland as the business evolves and its needs expand. There is potential for incorporating additional features and pages in the future.
I am eager to follow up with Dairyland to gather feedback and analyze website analytics related to the redesign. This information will help us identify areas for further improvement and enhance the overall user experience moving forward.