mcwolfertz

fayVen: UX Design Consulting

mcwolfertz@gmail.com (Melanie Wolfertz) — Thu, 15 Apr 2021 18:38:53 GMT

OVERVIEW

CONTEXT:
From February into March of 2021, I worked as a UX Designer for fayVen , a small start-up business that "curates pop-up shopping, dining, and entertainment events for mobile vendors and artisans at local venues." My team consisted of three other UX/UI Designers. Together, we focused on enhancing the overall usability of the website, and developing key user flows for vendors and venue hosts. Our goal was to simplify the registration process, and promote community within fayVen .

OUTCOMES :

Delivered new Home and About page, giving more clarity and energy to the company.
Redesigned call-to-actions (CTAs) and created a style guide.
Built out venue flows, such as creating an event, accepting vendors, managing events, and communicating with vendors.
Built out vendor flows, such as the dashboard, event registration process, and event guide for vendors.

Introduction

The Problem

fayVen wants to attract more vendors and venues, but does not have the processes to support registration and maintenance yet. The company also wants to establish itself as reputable event-hosting platform and needs to stand out from competition.

The Solution

After discussing fayVen's business goals, we decided to focus on the two main users and build out three main functions: user and event registration, event management, and a communication portal.

Role

I acted as the UX designer, providing research, mood boards, user flows, and lo- and hi-fidelity wireframes.

I also acted as the primary point of contact, sending updates to the company and scheduling meetings for the team.

Tools used:

Figma, InVision

Personal Deliverables:

Vendor dashboard
Vendor event registration flow
Vendor event guide

Week 1: Problem and Insight

The UX Team got to know the fayVen team, which included the co-founder and CEO of fayVen and their engineering team. We discussed fayVen's business goals, and what they hope to accomplish with this project. As a start-up company, fayVen had established its roots and general vision, but had not figured out a way to bring their vision to life. Prior to any UX conversation, fayVen brought up 4 critical features they had in mind:

Registration
Map
Calendar
Communication

The fayVen team also provided research files they had already conducted, like their Software Design Document (SDD,) Software Requirements Specification (SRS,) and Business Requirements Specification (BRS.)

We also reviewed fayVen's branding materials, which consisted of brand colors and logos.

Week 2: Research and Moodboards

Collectively, the UX Team conducted a competitive analysis and researched and identified similar companies such as:

GotSpot (a platform for small businesses to rent for short-term)
Eventective (an event-hosting platform)
Airbnb (a hosting platform for vacations/stays with a similar business model)
King of Pops ( a small business based out of Charleston, South Carolina - perfect fit for the vendor user)

We reviewed fayVen's likes and dislikes from the similar companies, proposing the combination of their favorite elements. After discussing key home page components and possible navigation/layout options for the website, we pieced together the must-haves:

A clear search bar that defines the core features, for example searching by location

2 . Intuitive design and clearly marked features

3 . User-friendly login and account menu

Pain Points and User Needs

A key component to any business is understanding your audience. As a company with two main users, vendors and venues, this was especially important.
fayVen interviewed several vendors and asked about their concerns. We identified the top three pain points and user needs:

Mood boards

After our discussions with fayVen, we created mood boards to capture the " whimsical " and " crafty " vibes similar to Etsy and Pinterest.

Week 3: Strategizing & Building

We had spent the first two weeks getting to know fayVen and conducting user interviews to gain further insight into our core demographic. By week three, we were ready to review our findings and dig deeper into the user experience.

My UX team members delivered interview findings, affinity maps, and our early wireframes. We decided to split the tasks and flows amongst each other.

Independently, I focused on developing core features for the vendor user flow , specifically the user experience for event registration.

Interview Findings:

After interviewing existing vendors and small business owners we were able to contextualize the solutions we were creating, and better understand the concerns vendors have when committing to an event.

Factors to consider before booking an event, according to our interviewees:

Location / maps
Comparing venue spaces
Venue reviews
Typical venue demographics
Registration requirements

Affinity Maps:

Organizing our ideas and research, we identified commonalities and user-specific cases for the vendors' and venues' needs. Our biggest takeaway was helping the users understand what they need from each other, and giving the platform to act on these common goals.

Core Features:

I began to brainstorm the bare minimum fayVen users need to make their event a success, especially in regards to vendors. Combining research and fayVen's input, I put together a final list of feature to include.

Most of these features are standard for any service like fayVen; account settings, profile settings, and basic website navigation. However, other features are designed with vendors and venues directly in mind .

Sketches:

Once we had deliberated which team members would be designing which user flows, it was time to get our ideas out on paper. I initially started out by sketching what I envisioned for a vendor dashboard.

My sketch was simple, but intentional.

The top section is dedicated to getting simple navigation , giving users the option to search and receive notifications.
In the main body, I chose to highlight three main components that a vendor would use most often : account settings, events, and the community message board. This gives the user just enough direction to feel confident in navigating their dashboard, and not overwhelm the user with too many choices.

Lo-Fidelity Wireframes

I began building out the event registration flow, incorporating key features that we had identified with fayVen. These features include a selection of resources aimed to help vendors navigate their events.

I designed to anticipate the users needs by providing even the smallest details all in one place to alleviate the stress of registration and managing the events. In these wireframes, you can see the personality of fayVen come into play and the focus shift to event preparation.

Features Shown:

Point of Contact, Navigation, Company Summary, Event Quick Stats

Week 4 & 5: Finalizing our Designs

After discussing what fayVen liked best from our designs, we went through and " Frankenstein-ed " the best of each of our designs and came up with our final home page and user flows.

By the end of our assignment, I delivered three core user flows:

Vendor dashboard
Vendor event registration flow
Vendor event guide

To view the original fayVen Venue Registration, click here !

Final Designs

Vendor Dashboard and Event Guide: Hi-Fidelity Mock Up

Vendor Event Registration: Before and After Images

Other portfolio pieces:

Case Study: GalleryPal

mcwolfertz@gmail.com (Melanie Wolfertz) — Thu, 18 Feb 2021 02:27:41 GMT

Introduction

T he Problem

Museum guests don't know a lot about the art they are viewing unless they have prior knowledge or have done research prior to visiting.

T he Solution

I designed an app to help users in museums navigate the art around them, providing quick snippets of information that makes learning on-the-go both easy, reliable, and educational.

Role

I acted as the UX lead designer; I structured my design process around Google Ventures Design Sprint model, which includes sketching, wireframing, prototyping, and user testing.

Tools used:

Adobe XD, Marvel, InVision, Millanote, Miro

Google Ventures: Design Sprint

“The sprint is a five-day process for answering critical business questions through design, prototyping, and testing ideas with customers. Developed at GV , it’s a “greatest hits” of business strategy, innovation, behavior science, design thinking, and more—packaged into a battle-tested process that any team can use.”

- Google Ventures

Day One: Problem & Insight

How might we?

How might we help museum-goers and art-lovers get the most out of their visit?

How might we educate museum guests without being overwhelming?

How might we engage museum guests with a personalized experience?

Day Two: Sketching Solutions

I conducted lightning demos and created multiple sketches from the Crazy 8’s exercise ; after creating multiple critical screens, I created my solution sketch.

Day 3: Crazy 8’s & Storyboarding

Day 4: Prototyping your Solution

Today I set out to prototype my solution. To help me maximize my time , I used Adobe XD plugin tools like Mimic, and Quick Mock-Up. As I design the prototype, I combine what I would want from an app like this, and what the given personas and user interviews want.

I incorporate key features like the ability to sync to the appropriate museum and to scan a QR to quickly arrive at the given work of art, giving the user less time to worry about getting to the right page, and more about learning about the art around them.

I also include other small details to embellish the art-theme by adding backgrounds of paint texture (artist profile and artwork profile,) the Statue of David (Spring 2021 Exhibits,) and the exterior architecture of museums (home page and search page.)

Day 5: Usability Test

Goals:

to help the guest understand why the art is good.
to help the guest learn more than they would from just walking around a museum on their own.

Takeaways from Usability Tests:

PRAISES

“Super informative."
G alleryPal is “helpful for people unfamiliar with art.”
M ajority of participants appreciated the integration of museum features, like the “in the gift shop,” “at the MOMA,” and the ability to explore current exhibits.

REFLECTIONS

A “Home” icon would allow for easier navigation
S tart-up tour in beginning to show how to use app
A dding icons to buttons to help illustrate function

For the final edit, I incorporated a few suggestions from my usability tests. These edits include:

A “Search” symbol to the Discover button on the home page.
A “Favorite” function when browsing Artist Profiles and artwork profiles.
The prices for items listed in the gift shop.
A key to the timeline in the Artwork Profile; also including relevant historical events.
Updating the hamburger menu to a slide-out menu for the navigation in both the Artist Profile and the Artwork Profile.
Updating the “Scan for QR Code” section in the Search page to a bold text.

On the Design Sprint Process:

As a first-timer to the GV design sprint, I found the quicker pace refreshing and invigorating. The time constraints forced myself to think out-of-the-box and more creatively; they were also helpful in keeping structure and making sure every edit I made was with intention . This also gave me more of an opportunity to create instinctively , as thus, more like a user operating on first impressions.

It was odd to have user testing on such an early prototype, it made me more “protective” over my work. I found myself making sure that the participants knew this was only one day’s work, instead of a prototype that I had been working on for months, like my capstone project.
I ended up being really proud of the work I had accomplished in such a short time frame; this project helped to contextualize how a design sprint would be useful to companies who want to test out new features.
The design sprint made me appreciate how much time I had put into my capstone, and how far I have come in my program to be able to quickly create a solution prototype in only five days.

Overall, it is a great exercise to channel creative energy and maximize your efforts.

Other portfolio pieces:

Case Study: TaskAble

mcwolfertz@gmail.com (Melanie Wolfertz) — Fri, 18 Dec 2020 02:22:29 GMT

Introduction

There are hundreds of apps designed to help users navigate their busy lives. From to-do lists, to staying on task and working towards a goal, there is an app for everything. But not every app is made for neurodiverse users . In fact, out of all the top autism apps in the Google Play store and Apple App Store, none of them offer task management or productivity. And while some users with autism may be able to use standard apps, none of them cater to their specific needs and sensitivities .

The Problem

I know how important it is for people with autism to keep to a strict schedule, and how easy it is for little slip-ups to ruin someone's day. Task management shouldn't have to be stressful and time consuming, give users, parents and support systems that help the need to stay on top of their day.

The Solution

I designed an app to help users on the autism spectrum, and their caretakers and educators, stay on track and manage their day-to-day activities by incorporating key concepts from Applied Behavioral Analysis (ABA,) a type of therapy designed for people with autism spectrum disorder (ASD.)

Role

I acted as the UX lead designer, as well as UX researcher throughout the product's entire development. From early ideation to the final execution, my design process includes research, synthesis, testing, and strategic design.

Tools used:

Adobe XD, Marvel, InVision, Millanote, Miro

Research

I conducted research on the existing applications for the autism community, as well as the needs and common issues of technology and autistic users. I found a wealth of resources that laid out best UI practices for neurodiverse users , which included how to appeal to sensory sensitivities such as contrast levels, animations, and other visual cues. From this research I knew I needed to include an avatar, the ability to personalize the users experience, and task analysis, a common practice used in ABA.

Methodologies

Interviews

My interview questions focused on the individuals’ relationship to autism, how they navigate productivity , and how they use technology to accomplish their goals as a caretaker/educator. I received great feedback and first-hand stories of struggles and success when dealing with technology and autism.

Affinity Mapping

Tools used: Miro

I reviewed my notes and video footage from my interviews and was able to identify seven different categories: learning behavior, technology dependence, schedules, dislikes, habits/passions, rewards, and apps used.

I noticed three strong trends:

Empathy Mapping

Tools used: Miro

I created two separate empathy maps to account the different users that could benefit from my app. Type A represents high-functioning users on the autism spectrum, and would ideally use this app for themselves. Type B represents low-functioning users on the autism spectrum that would require caretakers and consistent supervision; for this type of user, the caretaker or support system would be using the app for the autistic individual.

I tried to imagine how each user would feel in their daily lives, and their pains and gains. This included how they think and feel, what they say and do, and what they hear and see. This process confirmed the diversity of the autism spectrum , and how individuals' wants and needs vary.

The Design Process

I began the design process by getting my ideas out on paper. After sketching out ideas and creating wireframes, I turned to Adobe XD where I began to digitize my wireframes. This gave me a better impression on the functionality of the app and how to best execute the core functions of the app, creating tasks and staying focused.

Early Wireframing

Tools used: Adobe XD

I digitized my sketches into lo-fidelity wireframes to map out my designs.

Mood Board & Style Guide

After creating lo-fidelity wireframes, I needed to compile my research and give my app some personality.

I found inspiration in apps like Headspace, which created a colorful and inviting space/interface. Avatars like Bitmoji and Facebook Avatar give a friendly and personal experience, which would be key for my audience. My mood board exudes a fun and engaging energy, with an emphasis on bold colors and clear typography. My style guide broke down my brand into specific font, icons, colors, and other UI components.

Prototyping

After developing my branding, I began my hi-fidelity designs. I went through several versions as I experimented with different color schemes, icons, and fonts. I realized that I would need to see my new selections in context to really find the right fit. I eventually found the right combinations and developed my final hi-fidelity design I would use for my usability testing.

Usability Testing

I conducted multiple user testing sessions where I asked each participant to complete three tasks:

Create a new task, followed by completing the task “Call Adam.”
Create a new routine.
Create a new task analysis, followed by completing the task “Brush teeth.”

Takeaways from Usability Tests:

PRAISES

"A great idea"
Participants loved having the Bitmoji, and the concept of being able to personalize their experience.
Participants enjoyed the "confetti" rewards when completing a task or routine.

REFLECTIONS

Users do not have an exit route when filling out forms or interacting with pop-up notifications.
Users need clear subtext and consistent language; this is especially important when creating for neurodiverse users.

For the final edit, I incorporated a few suggestions from my usability tests. These edits include:

An "exit" button on the pop-up forms.
Developing the "share progress" feature.
Updating the language for buttons to be more direct, i.e. "Go Back" instead of "Return."
Updating the sizes of symbols and Bitmoji placement.
Updating the grammar and conventions for consistency.

Thoughts on TaskAble:

This was my first project working through the complete agile design process , from ideation to creation. I spent more than seven months working on this project, collecting research, sketching, iterating, testing, then reiterating , I am very proud of the work I have done. Looking back at my very full notebook, I'm able to see how much this idea transformed and flourished into the final prototype design.

From the very beginning, I pursued this project with curiosity and passion. Having been familiar with the autism community, I became very committed to the function behind this app and its potential to help users in need. This experience stands out to me for many reasons:

Instead of working on a client's product, or developing upon an already existing product, TaskAble is the only prototype that I have created on my own (as of now.) This includes the idea for the app, and working through the design process as the lead UX designer and researcher.
I was able to see my growth as a designer from the early research phases and familiarizing myself with different tools like Adobe XD, Marvel, and InVision. And I have come a very long way.
I experienced the entire design process. And while yes, I am repeating myself, I cannot express how impactful this has been for my own growth as a designer. I now have a much deeper understanding and appreciation for every stage of the creating a product.

After the countless hours and edits, the most rewarding part of this experience was sharing my final prototype with people and seeing their reactions and excitement. I would love to be able to develop this idea further in the future.

mcwolfertz

fayVen: UX Design Consulting

OVERVIEW

Introduction

The Problem

The Solution

Role

Week 1: Problem and Insight

Week 2: Research and Moodboards

Pain Points and User Needs

Mood boards

Week 3: Strategizing & Building

Interview Findings:

Affinity Maps:

Core Features:

Sketches:

Lo-Fidelity Wireframes

Features Shown:

Week 4 & 5: Finalizing our Designs

To view the original fayVen Venue Registration, click here !

Final Designs

Vendor Dashboard and Event Guide: Hi-Fidelity Mock Up

Vendor Event Registration: Before and After Images

Other portfolio pieces:

Case Study: GalleryPal

Introduction

T ﻿ he Problem

T ﻿ he Solution

Role

Google Ventures: Design Sprint

Day One: Problem & Insight ﻿

How might we?

Day Two: Sketching Solutions

Day 3: Crazy 8’s & Storyboarding ﻿

Day 4: Prototyping your Solution

Day 5: Usability Test

Takeaways from Usability Tests:

PRAISES

REFLECTIONS

For the final edit, I incorporated a few suggestions from my usability tests. These edits include:

On the Design Sprint Process:

Other portfolio pieces:

Case Study: TaskAble

Introduction

The Problem

The Solution

Role

Research

Methodologies

Interviews

Affinity Mapping

Empathy Mapping

The Design Process

Early Wireframing

Mood Board & Style Guide

Prototyping

Usability Testing

Takeaways from Usability Tests:

PRAISES

REFLECTIONS

For the final edit, I incorporated a few suggestions from my usability tests. These edits include:

Thoughts on TaskAble:

Other portfolio pieces:

T he Problem

T he Solution

Day One: Problem & Insight

Day 3: Crazy 8’s & Storyboarding