UX/UI Website

Roo me passion bakery logo words in black lowercase soft serif font. Centered above is a red orange stylized lotus flower bud with an open leaf on either side of the bud

Rumis Passion Bakery provides gluten-free (GF), dairy-free (DF), and vegan (V) artisan baked goods and packaged foods in a dedicated facility


Kristina Rudolph | Web/Mobile UI Design & UX Research
Staci & Steve | Product Owners/Stakeholders
Duration | October 2018 – April 2019
Software | WordPress, Adobe Illustrator, Adobe Photoshop
Roles | PM, UX Research, UI design, Front-End, Copywriter and Co-copy editor


From left to right five images.
1. Baked long artisan baguettes of olive breads
2. A large round tray of cookies shows brownie squares at its center surrounded by powdered sugar cookies at 2 o'clock, brown and white rectangular shortbread cookies at 4 o'clock position, Ko-lak-ee cookies with red jam at 7 o'clock, and soft chocolate chip cookies at the 10 o'clock position
Image 3 shows three pies in pie tins. They look golden brown on top.
Image 4 shows a few rows of key-shez filled with cheeses and spinach.
Image 5, the last image, shows a close up of a 1-tier white wedding cake with some thin scroll designs on the upper sides and a teal ribbon near the bottom
From left to right: Baked artisan breads, cookies, pies, quiches, and cakes

Overview

Why / How / What

  • WHY: Owners and staff experienced constant phone inquiries during business and non-business hours asking about product offerings, pricing, and directions.
  • HOW: Qualitative ethnographic UX research, community and product owner interviews, competitive analysis of standard bakery sites, and a comparative analysis against the old website.
  • WHAT: outcomes (below)

Outcomes

  1. Old website abandoned, new website raised product and brand awareness.
  2. Popularity necessitated products and new store expansion.
  3. The mobile-friendly app accurately worked with map/direction APIs.
  4. Menu offerings with prices decreased phone inquires by 40%.
  5. Sales maximized by 20%.
  6. Rumi’s moved to the #1 spot on Google‘s SEO for gluten-free.
  7. Call-ahead and pick-up orders were easy with COVID crisis

A set of gradually increasing blue bar graphs are lined up in column showing approximations for monthly visitors from zero in August 2018 until June of 2019. The site launched in July with 3,648 views and 1,491 visitors.
The bars in between the last bar range between 3, 500 and 7,000. The last blue bar at the far right shows July 2020 on the higher end closer to the 7,000 view mark.
Site launched in July 2019 with 3,648 views. One year later the views topped 5,990 worldwide
A graphic reads Stats for July 2020 in the upper left. Under the title is a flat gray graph of the seven continents with a gradient key which goes from the number 1 in light pink to 5,990 in very dark pink/red. Some European continents, Brazil, India, China, and Canada show in light pink whereas Alaska and the United States show in deep pink/red. To the right of the map is a column list of countries and views. Each country is labeled with a flag and the left column show the views.
The countries listed are the US with 5,990 views, China with 17 views, India with 11 views, Canada with 9 views, followed by Hong Kong, France and Brazil with 2 views each and ending with Finland, Iraq and Taiwan with 1 view each, again for the stats of July 2020
Map shows 64% increase in web views from the previous year worldwide.
Store traffic and sales per purchase also increased.

Left image shows old mobile site on an iPhone. There is a tiny red stripe at the top with a few tiny buttons in the right corner that are difficult to see. The main page shows three poorly lit but large images of a sheet cake, cookies with m&m eyes on top of them, and a pile of muffins.
Left: Old site lacked flow, quality imagery, and accurate directions.
Right: New site features increased accessibility for people with tremors from MS, autism, or limited mobility as part of the gluten-free community

Discoveries

  • Product owners experienced high call volumes
  • Owners and cashiers were stressed from split customer engagement creating low in-store satisfaction from phone interruptions
  • New customers found it difficult to locate the store because of inaccurate google location data from the existing website
  • Gluten-free, dairy-free, allergy-free, and vegan communities were unsure if this was a dedicated facility
  • The old site forced people to wait for a reply using Facebook or the website’s online contact form

Original Layout & Flow

Old mobile UI

The original mobile version of the Rumi's Passion website shows six screens with skewed user flows and small black text on tan backgrounds. None of the content is readable but black arrows show the simple flow layout of three circled navigation items.
Original site shows skewed user flows, lackluster images, incomplete menu offerings, and a contact form which required owners to reply to inquiries

Old website UI

This 15-second video shows old web navigation for the Rumi’s site from left to right showing a black bar with an orange about tab, store tab, content tab, and a cart tab showing 0 items

Initial Product Owner Meeting

The product owner was given a short survey to validate their potential desires and set a realistic direction for the minimum viable product (MVP).

The website and design were done in sprints. Each page was created then slowly refined as part of an iterative process, allowing the sites to remain live.

Initial survey of choices to figure out product owner needs for what website pages to begin building.
Page says the following:
This survey directs us to the hierarchy of your website needs.

Underneath this is a table list of web page options such as "Founding story / historical page, purpose / vision / mission page, written contact info address/phone page etc. To the left of each row item is an empty box which reads top three. To the left of each row here are three columns. The first column says zero - don't need, the second column says one, either way and the last column on the right says two, must haves.
The idea was to develop importance or need of certain website elements.
Survey asked the product owner to choose a basic web layout for the first set of sprints
Important info questionnaire for product owner to fill out asks for other important information to share with five questions asking if the product owner already has a web domain address, what it is, and where it is hosted as well as who the provider is and if the new site will require easy access for them to edit
Part of the survey involved knowing the details for domain and hosting

Research

The husband and wife team runs all logistical components of the business and bakery with only a few bakery and cashier staff. They wanted to double down and create a successful site to boost sales so they could hire more bakery and cashier staff.

The below pain points focus on product owner and visitor engagements as well as discoveries noted through ethnographic research.

A busy rounded glass front cold case is stocked with cakes and desserts. On top of the case are cakes with signs. From left to right the signs read; lemon coffee cake $7.50, butter rum coffee cake $7.50, rasberry crumb coffee cake $5.95 and some four other offerings which can't be read. Off in the distance is a metal rack with cardboard store boxed items that can't be distinguished.
People frequently waited to pay or request dessert case items because the staff was on the phone answering questions or giving directions

Pain Points of focus

  • Owners lacked time, resources, or knowledge to update, rebuild, or create a new website
  • The existing site lacked good flow and there was no integration of APIs for mapping or directions, which caused potential customers to call the store when they became lost
  • Customers were unaware of product line, services, and prices
  • “Contact us” form slowed response times to online questions leading to a potential loss of sales, customer frustration, and wasted time and energy for the owners
  • Owners lacked resources to hire additional staff or buy advanced tools such as phone systems or web chatbots

Personas / Interview / Observation

  • Early-on in the prototype iterative phase, I was able to evaluate, strategize, and design, based loosely on the existing site as a benchmark.
  • By A/B testing the main homepage changes were made accordingly
  • Casually collected ethnographic interviews were done in the store.
  • Heuristic observations were captured as customers spoke about the store and experiences together.
  • In-store observations uncovered trends and opportunities for how to group menu offerings.

User Personas

Each persona was based on real customer needs within the GF, DF, and V communities.

Persona 1: Nancy, a 45 year-old with a five year old Autistic son seeks gluten-free snacks to combat her son's mood swings.
Persona 1: Nancy, a 45-year-old seeks gluten-free snacks for her five-year-old to combat her son’s mood swings.

Persona 2: Brandon, a 28 year-old diagnosed with Celiac disease seeks travelable fresh gluten-free baked goods.
Persona 2: Brandon, a 28 year-old diagnosed with Celiac disease seeks travelable fresh gluten-free baked goods. He also likes to eat vegan when possible.

Persona 3: Jilpa, a high-school teacher self-diagnosed as gluten intolerant and a vegetarian.
Persona 3: Jilpa, a high-school teacher self-diagnosed as gluten intolerant. As a vegetarian, she can’t tolerate dairy.

Addressing pain points

  • Directions with integrated map APIs were used
  • Quality imagery of bread, cakes, and cookies were displayed within a new menu offering area which displayed prices
  • A frequently asked questions (FAQ) page was added to address over-the-phone inquiries
  • Facebook link addressed potential daily menu offerings changes
  • Chosen hosting platform provides flexibility to add online ordering in a later sprint
  • Owners were able to hire and pay additional staff with increased demand
  • New platform offers flexibility for owners to have access for simple site updates

Additional product owner desires

  • Information about the poet, Rumi, and how he inspired the owners to pursue their passion and mission was added

Design

Iterations were done in sprint cycles allowing for quick feedback from product owner with manual A/B testing.

A notebook open sketch page showing search box options drawn with rectangles followed by wavy horizontal lines indicating a new thought. In the center of the page under the wavy lines it says information architecture, structure of site. There is a series of boxes adn lines going to more boxes underneath these. The top box says Home followed by boxed rectangles underneath that read product, news, about, help, and map. There are smaller boxes drawn below but the text is indistinguishable. 
Near the bottom of the page is another horizontal wavy line and under this it has a list of four words. The first word says secondary followed by the word tertiary followed by the word beyond. the last line says externals: Facebook, blog, community contribution
Discussion occurred over navigation and information architecture (IA) preferences
A simplified low fidelity sketch i a spiral bound notebook page shows a possible layout homepage with a large horizontal rectangle which represents the computer screens viewport. Inside this large rectangle is a series of small rectangles going across the top, a shaded bar underneath the words primary nav followed by a rectangle under that which say image with an oval centered inside of it saying button. Below the inner rectangle and button is the word info to the left with two horizontal lines at its right representing more text
A simple site design low-fi sketch was established for the first iteration

New mobile UI

Two rows of four iPhone ten high fidelity designs of touch screens showing the flow and path to navigate through the Rumi's Passion Bakery mobile site.
Image 1 at top left, working right, shows a drop down menu with the following: our story, directions, FAQs, Artisan Bakery Items.
Image 2 The second images shows the menu collapsed and underneath there is a background picture of the Rumi's storefront. In the image, similar to the low fidelity model from earlier are the words see our mouthwatering offerings with some unreadable text underneath. Below this text is a call to action button saying Show me! under this image reads our story (the name of the first menu tab option).
Image 3 shows a screen reading directions with the address reading 41116. Five mile road Plymouth Michigan 48170 in black. Under this at the bottom of the iphone screen there is a phone number and some unreadable text in red followed by the upper part of what appears to be a digital map.
Image 4 shows another screen with the menu collapsed as in the above three images and it read Frequently asked questions with an image of red question mark chat bubble next to a black letter i (as in information) chat bubble.
Below these four screens in the second row are extensions of what the screen for each menu page would look like if the user was to scroll down these pages.
Image 5 begins to show a baguette of bread and reads bread and rolls underneath stating that they are gluten dairy, soy and corn free
underneath these words is a list of columns of item offerings with package type (such as loaf) and a price to the right of the package type. 
Image 6 shows a link from the show me action button taking you to the artisan bakery items stating that some items are available seasonally.
Image 7 shows more of the digital map and lists regular hours, holiday hours, and other text below these titles that is not readable.
Image 8 shows what is happening below the chat FAQ bubbles and this screen reads What is Roo me's passion and what are your regular and holiday store hours? with unreadable smaller text underneath each of those two headings.
MVP is simplified to four navigation areas consisting of: the owners story, directions, FAQs, and a menu of bakery offerings and prices

New website UI

Screenshots of Rumi’s Passion Bakery homepage with a simple and clean layout showing four links to; our story, directions, FAQs, and the artisan bakery items.

rumis passion site shows the our story tab words in white on a dark red background button. Other unselected links for the top menu read in a bold black uppercase font saying directions, FAQs, and artisan bakery items. These are on a white background with the roo me's logo at the top center of the page with their red stylized lotus flower logo and the words Roo me's passion bakery spelled R-U-M-I apostrophe S.
Under this menu area is a black transparent subdued image of the storefront with bold lowercase words in a serif font below which say see our mouth watering offerings and underneath that in smaller text it says artisan gluten-free, dairy-free, and vegan cakes, bread and more.
Homepage features the story of how Rumi’s began with a large call to action (CTA) button for visitors to see images, menu, and prices for baked goods and store offerings
Rumi's passion website screenshot of the directions page shows the directions tab now highlighted in red in the menu.
Below is a title reading directions with the store address of 41116. Five mile road Plymouth Michigan 48170 and a smaller phone number underneath that is not readable.
Direction page integrates with Google map API’s and shows accurate location
Rumi's passion website screenshot of the FAQ page show the FAQ tab highlighted in red.
The title below reads Frequently asked questions and in parenthesis it says F-A-Q.
Part of a filled in red chat bubble shows with the top of what appears to be a white question mark hook.
FAQ page answers many of the common questions asked by the GF, DF, and V community
Rumi's passion website screenshot of the bakery menu page shows the artisan bakery items tab selected in the menu.
Underneath the menu it says artisan bakery items.
There are five images from left to right. These are the same five images explained at the top from left to right showing crispy baguettes, an assortment of cookies, three golden brown pies, a few rows of pie plates filled with cheese and spinach quiches and a close up detail of the bottom tear of a white wedding cake with a teal ribbon near the bottom.
The bakery items have clear visuals to a list of offerings with pricing. Each bread or sweet type is categorized according to how users broke down menu items

Wins

  • Product owners were able to hire additional staff and open a larger storefront because of increased demand
  • New and returning customers could easily set their expectations and options early, locating answers quickly and seeing offerings
  • The positive response increased web traffic to the site through community chatter of the tight-knit communities which slowly spread to a much larger network
Seven women  dressed in black t-shirts with the fourth woman over wearing a light pink shirt and goldenrod colored knit cap and side braids. All other women have black hats with white text on them that appear to be the roo me's logo. There dark countertop in front of them as they pose with smiles for the camera. To the left sits a screen with a box on top appearing to be the checkout cash register area. There are some papers in the far right corner laying on the counter which aren't readable.
The background wall is painted tan block. Above the women's heads in black lettering it reads "let the beauty of what you love be what you do." dash Roo me spelled R-U-M-I.
Above this quote is the Roo me's passion logo.
The need for staff tripled with all of the new business from the success of the website

In the forefront are three tall and skinny round cakes with white icings and chocolate drizzles dripping down the sides of the top with whipped cream looking flourishes on top of them. Each is lined up from left to right and they sit on their own golden cardboard circles. They sit on a gray counter. In the distance behind them the storefront shows a vast space blurred out with cases, drop pendant lamps surrounding the perimeter walls and the hardly visible roo me's passion logo on the far tan wall across from these cakes.
The new storefront is three times larger than the old location and much more welcoming

Ironically, with the COVID crises, phone orders for pick-up and carry-out orders rose but responses were faster and targeted with the website’s ability to empower consumers bringing in increased business and higher per-ticket transactions

Five metal racks stand filled with packaged orders. From left to right there are two metal racks on wheels with five shelves each filled with folded over shopping bags with receipt order papers affixed to the front tops of each bag.
On the back wall perpendicular to these two racks is another rack with four filled shelves of folded over pre-packaged orders in paper bags and two open cardboard boxes of goods sitting on a white/gray linoleum looking industrial floor.
To the right are two more racks on the right wall. The farthest rack has four shelves filled with both bags and stacked white cake boxes and the rack closest to the viewer on the right shows four shelves stacked 2-3 high with white cake boxes each with a folded paper receipt on the front.
The COVID crises did not cause upset to the business.
The new site offered transparency to menu items and pricing for call-ahead ordering.

Beyond

The product owners doubled down with the creation of this website and extending their brand as a last-ditch strategy to make their business survive.

The response was widely successful necessitating the need to hire and train additional from the increased demand, obtain new digital cashier systems for easier and faster checkout, and move into and redesign a new building space for the store.

The community response, even during COVID, has proved very successful and the owner is thinking about developing a new growth stage to the MVP website to help cope with heightened demand and broadened outreach.

Infinite time/money/resources solutions

  1. Web chatbot for quick Q and A that doesn’t depend on FAQ reading
  2. Creation of an updatable phone system referencing changing daily store hours and offerings which addresses common questions
  3. Greater SEO outreach potential with a more advanced WordPress plan
  4. Integration of online ordering and pre-payment options for store pick-up or delivery.