Mara Rosenstock
UX designer

Web Design: Indulge MIA

Creating an eCommerce site for a cookie company.

Image alt tag

Duration

April - May 2021

Skills

Competitive Research, User Personas, Site Maps, Task Flows, Sketches, Wireframes, Low/Medium/High-Fidelity Prototype

Tools

Miro, Figma, Webflow

Project Background

Indulge MIA is a cookie company based in Miami. Customers have trouble using their website to place orders and instead directly contact the owner to place orders, which slows down the process and wastes time for the owner. Additionally, their current website is out-dated and doesn't help attract new customers.

Challenge

Work with a group of 3 other designers to improve Indulge MIA's website to increase sales and site traffic and re-design site's functionality to ensure users can easily learn about and order products.

Deliverable

Design high-fidelity wireframes that can be used to build a website.

Discover

We began our research by analyzing the client's current site and pinpointing the issues we found.

When looking at the client’s current site, there were many stylistic and functional issues that stood out right away. These observations are detailed below.

Indulge MIA

Next, we met with the owner, Lamaar, to learn more about Indulge MIA.

After gaining a full understanding of the current state of the site and eCommerce platform, we met with the founder/owner of the company to learn about his experience with his site, his pain points, his non-negotiables, and his goals. Some of the questions we asked are shown below:

Guiding Questions:

  • Can you tell us about you and your vision behind your brand?

  • How do your customers currently find out about Indulge MIA?

  • What are your pain points in the current system you have?

  • Do you make any other sweets besides cookies? Do you plan to?

  • What are your best-selling cookies?

  • How do you currently receive most of your orders?

  • What is your preferred method of people placing orders?

  • What type of payment system do you use?

  • Do you have any specials throughout the year that you would like to promote throughout the year?

  • Do you edit your website for company updates? Would you like to be able to?

  • What does your packaging look like?

Based on our conversation with Lamaar, we prioritized the following action items to design a new website:

Improve functionality of site

The current site highlights text and chat for forms of communication, which creates an influx of one-off messages/questions. He needs a way to streamline orders/requests so he has more time to complete orders.

Emphasize personality and community

Indulge MIA is heavily involved in the Miami community. The social media/word-of-mouth/community aspect has helped grow the business and should be highlighted.

Revamp the design of the site

He doesn’t like that everything is on one page, which makes the site look very cluttered. He would prefer that the information is split up among pages.

Define

We then revisited the problem and defined an outline that would help us achieve our goal of building a functioning website that meets both our client and their customer's needs:

We laid out a list of steps we needed to complete to build our website:

  • User Personas

  • User Flows

  • Site Map

  • Sketches

  • Wireframes for desktop and mobile

  • Moodboard

  • Style guide

  • High-fidelity wireframes

  • Development-ready files

We began by defining four distinct user personas to represent Indulge MIA's different types of customers to ensure we create a site that caters to the entire customer base:

Indulge MIA
Design

We created a site map to organize all necessary pages and features our website needed to include.

As a team, we created a site map to organize the pages needed to build the website. This helped us organize the structure of the product and ensure that we included all necessary features for users to learn about the products and achieve their end goals by navigating the site.

Indulge MIA

User flows ensured our site would accommodate for all different types of users.

After we finalized the site map, we built out user flows for each of our user personas. This exercise allowed us to envision what interactions different types of users would perform when navigating the site.

Indulge MIA

Sketching out each page was a quick, low-cost way to start designing the product.

As a team, we sketched out individual pages to start envisioning how the site map and user flows would form into an actual website.

We then began the process of adding more details to these sketches on Figma to create medium-fidelity wireframes. The first step was establishing a grid layout.

We then began the process of adding more details to these sketches on Figma to create medium-fidelity wireframes. The first step was establishing a grid layout.

We established grids for both desktop and mobile to perfect our alignment when building out wireframes.

  • We chose a standard 12 column grid for desktop so I could align both an even and odd amount of elements across the screen

  • We chose a 4 column grid for mobile to help keep the proportions of elements when transferring them from desktop to mobile

Indulge MIA

I designed wireframes for mobile to create a responsive design to ensure Indulge MIA wouldn't miss any potential orders.

Since many of Indulge MIA's customers use their phones to place orders, it was essential that the website was fully functional on a mobile device.

This side-by-side comparison shows how elements were rearranged from the desktop version to the mobile version:

Indulge MIA

Our next step was creating a mood board and style guide to establish the UI elements so we could apply these to our mock-ups to create high-fidelity wireframes.

We then applied these stylistic elements to our wireframes to create polished high-fidelity wireframes.These elements were also applied to the mobile wireframes to ensure a responsive design.

We then applied these stylistic elements to our wireframes to create polished high-fidelity wireframes.

These elements were also applied to the mobile wireframes to ensure a responsive design.

Deliver

Our next step was to ensure our high-fidelity wireframes were prepared to be handed over to our developer.

The delivery portion of this project consisted of making sure all of our elements and high-fidelity wireframes were prepared to be handed over to our developer.

The key step in this process was creating text and color styles and applying them to our screens on Figma (pictured below). To do this, we made sure that all of the headers were categorized as H1, H2, or H3 and all of the bodies of text were categorized as P1, P2, or P3. Additionally, we ensured that each of our colors were labelled as their respective color styles instead of their basic HEX codes.

This step helped our developers when it came to coding so that they could use the text and color styles to universally declare the style of each element on each screen. This saved time for the developers and made it easier if we wanted to make changes to our design in the future.

Indulge MIA
Debrief

Next steps for this project would focus on actions that aim to increase customer loyalty.

When thinking about next steps for Indulge MIA, I came up with the following:

  • Design an email template that matches the branding and website’s energy to increase brand awareness

  • Gather and include specific pictures of special events and custom orders to show newer customers the potential of placing their own unique orders

  • Encourage community among cookie club- showcase the perks to increase brand loyalty among people who visit the site

When reflecting on the entire design process, I drew the following takeaways:

Layout grids are helpful

Layout grids were extremely instrumental when making sure everything I designed in the high-fidelity wireframes were aligned. This helped create a uniform look and made the output more professional.

Speak up on questions

When I didn't know certain things, it turned out that others didn't know it either, but we were able to be transparent and figure out an answer together. Your stupid question may not actually be stupid, as most in reality are not.

Prioritize collaborative work during meetings

Since this was my first time working in a group to design a site, I learned what led to efficient meetings. Not everything needed to be designed during meetings since that could lead to group think, so coming to meetings with defined individual deliverables helped us achieve our goals.

Overall, this was my first time designing for an actual company instead of creating conceptual ideas, so I enjoyed learning how much positive impact a functional, well-designed platform can have on a business. Additionally, I loved working with other designers on this project and look forward to collaborating with both designers and cross-functional team members to build more solutions in the future.