UX/UI Website – Kristina Rudolph

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

Old website abandoned, new website raised product and brand awareness.
Popularity necessitated products and new store expansion.
The mobile-friendly app accurately worked with map/direction APIs.
Menu offerings with prices decreased phone inquires by 40%.
Sales maximized by 20%.
Rumi’s moved to the #1 spot on Google‘s SEO for gluten-free.
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. 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.

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

The need for staff tripled with all of the new business from the success of the website

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

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