NMDesign Logo
Ritas Mockup

Rita's Italian Ice Site Redesign


A sleek redesign focusing on responsiveness across various devices of differing screen sizes. A newly modernized landing page that maintains the color palette and essential features of the original site.

Duration

1 week, July 2022

Role

UI/UX Designer

Tools

Figma, Adobe Illustrator, Adobe Photoshop

Ritas Mockup

Introduction


Rita’s Italian ice is a restaurant chain based out of Pennsylvania that sells Italian ice, frozen custard, and other sweet treats. For this personal project I used my personal experience with the site along with surveyed user input to identify the primary problems within the current site to redesign a more user-friendly, responsive page.


Final Redesign

Loading Page

Initial loading screen prior to entering the site

Slide 1
Home Page

Contains primary information and a call to action

Slide 2
Forms Page

Form layout for catering, fundraising, events, etc.

Slide 3
Information Page

Contains secondary information after the home page

Slide 4

Design Process


Step 1: Research
Summary

In addition to my personal experience with the website while working at my local Rita’s for four years, I also surveyed 20 other users of the Rita’s of Oxford webpage. The survey included questions concerning their experiences while performing various actions on the site (ordering, checking the menu, calling the store, etc.) and also questions about what changes they would like to see in the redesign.



What is your primary reason for using the Rita's webpage?
Survey Question 1
Which areas of the site would you like to see improvement?
Survey Question 2
How would you rate your overall experience on the Rita's site?
Survey Question 3
Would you recommend the Rita's site to a friend?
Survey Question 4
Do you have any additional comments about the Rita's webpage or what you would like to see in the redesign?

Response 1: "Very hard to read on an iPhone"

Response 2: "Could not tell if this was still the updated page"

Response 3: "No place to order on the webpage"

Step 2: Main Problems and Solutions
No Responsiveness

Current site is not responsive across screens and rather shrinks the entire page to fit the width of the screen. Redesigning a responsive site will help make the site visually appealing and user friendly across all screen sizes, ultimately increasing user satisfaction.


Lack of a Call to Action

The current site has no “order now” button/page, which is the main goal of the Rita’s Italian ice company. Adding such an aspect would work to help increase sales and promote a direction of the user-flow.


Unclear Information

The current site has text far too small for the human eye to easily skim across and there are multiple unnecessary advertisements that duplicate previously stated information. Making the text larger and reducing the number of advertisements will help increase readability of the site and hence create a better user experience.

Original Ritas Site
Step 3: Comparative Study
Dairy Queen Homepage Dairy Queen Homepage Phone
Responsiveness

This site has clean designs for various screen sizes ranging from a laptop screen to a handheld phone screen. The layout of the page is not difficult to understand as the page responds to the screen size, and the font remains easily readable.


Call to Action

This site has a clear “Start an Order” button on the home page which promotes sales and is an intuitive action for the user. The dark fill applied to this button on a light page successfully attracts the customers' attention to such action.


Clear Information

The text on this site is large enough to read across all devices and headings are clearly larger/bolder to help direct the user across the page and attract attention to specific sections of the site.

Step 4: Redesign Client Restrictions

Must maintain the same color palette and logo as the current Rita’s of Oxford webpage.

All pages on the current site must still be available in some way in the redesign. Pages can be nested within one another but still must be present.

Ordering directly through the site is not possible with how the store is currently operating solely based on Doordash and Uber Eats for delivery. Ordering can be done by taking the customer to a new link with the Doordash or Uber Eats menu.

Step 5: Ideation
Information Architecture
Information Architecture Diagram
Step 6: Wireframe, Prototype, and Test
Initial Wireframe Sketches
Wireframe Sketch
Mid-Fidelity Wireframes
Loading Page
Slide 1
Home Page
Slide 2
Forms Page
Slide 3
Information Page
Slide 4



Final Design


Design Board
Final Design Board
Desktop Design
Loading Page
Slide 1
Home Page
Slide 2
Forms Page
Slide 3
Information Page
Slide 4
iPad Design
Loading Page
Slide 1
Home Page
Slide 2
Forms Page
Slide 3
Information Page
Slide 4
iPhone Design
Loading Page
Slide 1
Home Page
Slide 2
Forms Page
Slide 3
Information Page
Slide 4



Solutions

New Responsive Design

This redesign now allows the site to be better viewed across all screen sizes, ranging from desktops to handheld phones. The text no longer shrinks to fit the size of the screen, rather the information on the page is rearranged to accommodate for the change in screen size.


Apparent Call to Action

The redesigned site now includes a clear call to action with a dark red fill on a light blue page, effectively attracting the human eye as soon as the customer opens the page. This call to action will now successfully work toward the ultimate goal of the company: to increase sales.


Clear Information

The font used in the site redesign is much larger (24px-64px) as opposed to the original font that disrupted the flow of the page due to its small size. Headers are now clearly larger/bolded in the redesign to distinguish the different sections of a page. The unnecessary and repetitive advertisements on the original site were also removed in the redesign to create a sense of organization across the site.




Reflection


Takeaways

Overall, I really enjoyed spending some time analyzing a site that I have had a close relationship with over the course of four or so years. I was able to identify the problems that frequently frustrated myself and many other local customers at Rita’s of Oxford, and use my creativity to develop solutions. I hope to have the opportunity to work on more site redesigns that I am familiar with in the future.


Future Improvements

If I were to have more time with this redesign, I would like to develop a method of ordering directly on the Rita’s of Oxford website. Due to the store’s current use of Door Dash and Uber Eats for delivery, the “Order Now” button is linked to the web-based Door Dash page where the user can then place their order. I would also have liked to create specific mock-ups for the “Fundraising” and “Birthday” pages, however the form on the “Catering” page is the same form that would be used (with minor changes) on the other two pages, so only one was created for the sake of time.

Walking Stick Man

Thanks for visiting!