View Clickable Prototype

Introduction

OVERVIEW: The idea for Apielogy was born during the COVID-19 pandemic when CEO and founder Nicole W. got into an argument with her close friend and later felt the need to apologize. Unfortunately, there were no flowers available at this time, but luckily there was a local bakery that was able to deliver a pie. In an attempt to make amends, Nicole gave her friend the “aPIElogy”, the friendship was saved, and the rest was history.

PROBLEM: After the Apielogy incident, Nicole did some research on local bakeries in the area and realized many were struggling to stay afloat due to the pandemic.

PROPOSAL: Since her first attempt at “apielogizing” worked so well, she saw an opportunity to help inspire and drive sales for local bakeries. She wanted to create a new demand for pies by reflecting the human experience of apologizing in an app or website, with a light-hearted & humorous twist.

PROJECT SCOPE: Nicole asked me to bring her idea to life by creating an app prototype in a two-week design sprint. For this project, we focused on two things; (1) solving her main problem via three focused screens, and (2) branding.

USERS & AUDIENCE: This app will be designed with the primary target users in mind; female millennials, 25-39, love language; acts of service and gift giving, people pleasers, care about what others think, value supporting local business

PROCESS: The graphic below depicts a high-level overview of the two-week design sprint process that was followed for this project.

Selecting a Target

When the client first came to me, she had a lot of ideas! Her business plan was comprehensive and addressed multiple problems. However, based on the scope of the two-week design sprint, we had to narrow down our focus. We aligned on the following goals:

Short Term Goal: Increase pie sales for bakery partners, recreate the human experience of apologizing in an app

Long Term Goal: Sustain pie sales and expand product offering and bakery partnerships, revisit business model and profitability

For this sprint, we focused on the short term goals to nail down the following targets:

Understanding the Users

After determining our targets, I took a deeper dive into understanding our primary users. The first tool I used to gain deeper insight into the user was an empathy map. The client participated in a workshop where we explored the attitudes and behaviors to build empathy and get inside the mind of the user.

Sketching

I continued thinking about the user journey, attitudes, and behaviors, but this time went to the the drawing board, first by sketching out a storyboard for Mel.

The final exercise in this sketching series was Crazy 8’s. Crazy 8’s is a design sprint method to sketch rough ideas as fast as you can - throw a lot to the wall and see what sticks! This helped us to pushing past our first ideas and consider alternatives. Through this exercise we landed on out solution sketch, which was a combination of the most innovative sketches.

Building

Week two of the design sprint kicked-off prototyping preparation. Now that I had a clear understanding of the overall direction and goals of this prototype, it was time to start building! I started by translating the solution sketches into digital wireframes. Each wireframe screen aligns with our business targets.

While creating wireframes, I was also starting to think through branding & visual design. The client wanted the brand to appeal to female millennials, ages 25-39. This demographic is concerned with being social responsible and supporting brands that have potential to be a force of good. Therefore, highlighting the local bakeries and challenges they are facing will be important to consider in the design.

Aside from being a trustworthy, socially responsible, the client used to describe her brand vision were sweet, light-hearted, and humorous. She wanted the apielogy experience to feel sincere but not too heavy. With that in mind, I proposed a pastel color palette to capture the light-hearted and sweet elements of the brand, combined with fun hand-drawn elements for a humorous twist.

As the brand vision was coming to life, I built the first iteration of the prototype. This is a low-fidelity mock-up used that I used to start to give the client a sense of the look & feel.

User Testing

After applying the first layer of visual design, I was ready to start user testing. While the first round of testing was largely successful, the following enhancements were applied to the next version:

1. The cursive header font was difficult to read, so we explored other font options

2. There was confusion around the “Apielogize Now” button terminology, so we tried something totally different and added more context in sub-headers

3. We added more visual assets for high-fidelity testing

We were very excited to apply fun illustrations to the prototype to bring it more to life. However, after user testing, we decided to make the following enhancements:

1. Homepage: The wording on the homepage was still not working. It wasn’t clear to all testers what the purpose of the app was. We decided we needed more context on the homepage related to supporting local bakeries. We also got feedback to lose the frown face :(

2. Apielogy Categories: This category list was too visually similar to the pie list page, so we decided to go with a carousel menu instead. This was an idea we had from our crazy 8 sketching.

3. Pie List: We began to consider other “add to cart” UI options and decided to try something else to see what users preferred. The sub text also might not be necessary based on feedback.

4. General: The colors were not contrasting enough to meet accessibility standards, so we changed the colors, especially for text. Users liked the original font from low-fidelity v1 better, so I switched back but decided to use to sparingly. We were also missing exit paths on pages, so the next iteration includes enhanced naviagtion.

We were finally getting closer! After user testing High-Fidelity V2, we confirmed the naming and text on the pages was sufficient in helping the user understand the purpose of each page and button.

As for enhancements, although we cut back on the amount of cursive, a few users still had difficulty reading it, so we decided to change the header font to a serif text.

We also had conflicting feedback regarding the illustrations. While many users felt they were fun and enhanced the design, other users felt it was distracting. From a visual design perspective, mixing photographic images and illustrations is difficult to do, so we decided to simplify the designs for the apps and save the fun flat illustrations for website and marketing.

Finally, based on user suggestions, we decided to add allergen tags and a new “add to cart” design to allow for users to add multiple pies to their cart.

After making these updates, our final prototype design was complete! Here’s how it turned out!