Advice Analytics ↗
@Designedbyvalerie

events.com Custom Confirmation Layout

Product Design Associate
Overview
In my one year internship at the event SaaS start-up Events.com, I worked as a Product Design Associate where I had continuously switched from performing UX tasks to designing elements of the software Registration User Interface or 'RUI.' Use Case: When an event organizer is trying to bring in event goers, the event goer must have a confirmation that they have signed up for the event.
location
San Diego, CA (Carmel Valley)
duration
2-5 weeks
product year
2018
THE PROBLEM

From JIRA, the user story written was focused on the following:

”As LEO [Local Event Organizer], I want the ability to test my confirmation email, so that I can make sure the copy and look is how I want it to display to my registrants/buyers.”
apparel
Over the years, I've done the graphic design t-shirt logos for lots of my peers Greek life events such as philanthropy shirts that are sold to donate to a chapter's phil organization, COVID-19 relief fundraisers, and also am currently doing custom designs through my platform on Instagram. Production of product was completed through San Diego screenprinting with the exception of clothing I made for myself.
GRAPHIC
Aside from designing graphics to go onto t-shirts or apparel, I do a fair share of regular graphic design whether it's for myself, my friends, inspiration, to sell on stickers, or just for fun. On average, I design graphics on PS/Illustrator about 2-3x a month. Not everything I've made is pictured here. Recently, I've switched over to Cricut Design Space as I've been a lot more physical products lately (see next section).
beginnings of my products on
instagram
Below are all the products I currently have made and sold on my Instagram @designedbyvalerie. All of them come from different forms of inspiration... Pinterest, holidays, Instagram explore, the Cricut Instagram, my own crazy mind. :) Aside from the here and there colleagues who hit me up to design, this is definitely my freelance focus for 2021. Hit me up for custom cards and home decor!
research

The CSM team personally managed our clients and collects any issues they may have. In addition to this, they prioritize what needs to be fixed in production. In order to implement a new interaction within the custom confirmation form, it is important to understand how the custom confirmation works. After an event goer signs up, they will most likely receive an email.

Important things to consider
There are multiple types of registrations, meaning there will be more than one type of custom confirmation email that is catered to that registrant.
In order to preview the email, there must be something that the event organizer can click on which will have a preview email before he/she sends to his/her event goers.
There must be feedback that the email has been sent as a preview.There must be a preview email that is actually sent.It must look consistent between online and mobile.
insights
01 Accessibility
A button consistent with Events.com style type must be added to the Custom Confirmation widget. It must also be easily accessible.
02 Proportion
The button must not compete with the primary action buttons but must be a tertiary action in the event they want to preview the email.
DESIGN
Research
Sketching
Wireframes
Prototyping
Implementation
Following direction under the senior product designer, Cassie, I reported to her after every single step and she was able to help me funnel down into fewer options as I continued through the regular design process.
How do I use existing design styles to add a button that will add to the user's experience of creating a custom email for their registrant?

SKETCHES
No items found.
Sketches were done with paper I gladly stole from the office printer tray and a pen that I borrowed from the Junior Designer, Annie, who I worked right next to and still keep the pen in my desk cup to this day. Whiteboarding was done in the big conference meeting room on what I thought was a whiteboard, but someone later told me that it was just glass. Luckily, it was erased all the same. All thought processes came from exploring other website hosting browsers that allow you to press "Preview" from launch and also from seeing how others navigate buttons desktop/on mobile.
Prototypes
The mobile prototype was create first, following black styles to remain "professional." However, stylistically we went ahead and discussed using our branded blue as soon on the desktop prototype.

The idea here was to provide easy access into the website and to give clear understanding that the purpose is to browse different things and places that exist in a specific city.

These sketches translated into lo-fi prototypes I did on Figma. I followed closely to the prototypes that "won" approval and also ones I believed were most modern. Despite the design being modeled off of typical app design, Andres had a liking for it on desktop as well.
Prototypes
01 Prototype

The way the Product Design team functions is more so on seeing the visual prototype. With each sketch, I translated it into Axure, a prototyping software, and showcased how it would actually look on the software. The orange button was not the correct color and the length of the button was a bit too wide here. Our style also does not permit buttons on the left hand side.

1.5 Prototype

Moving the placement of the button to right below “Add Another Custom Message” was an idea I had, yet it then showed as a “competition” to adding another message. In addition to this, they would both need to be blue which would then compete even more. My next solution was then to move the send preview button to within the “Custom Messages” widget.

02 Prototype

My director at the time shared the brand library with me as I realized I did not have it at my disposal. Due to the orange being for a different action, the gray button aligned with the importance of this new feature. Important, but not as important as orange. Moving the button within the box made it clear that it pertained to custom messages only.


prototypes

Prototype #1

The way the Product Design team functions is more so on seeing the visual prototype. With each sketch, I translated it into Axure, a prototyping software, and showcased how it would actually look on the software. The orange button was not the correct color and the length of the button was a bit too wide here. Our style also does not permit buttons on the left hand side.

Prototype #1.5

Moving the placement of the button to right below “Add Another Custom Message” was an idea I had, yet it then showed as a “competition” to adding another message. In addition to this, they would both need to be blue which would then compete even more. My next solution was then to move the send preview button to within the “Custom Messages” widget.

Prototype #2

My director at the time shared the brand library with me as I realized I did not have it at my disposal. Due to the orange being for a different action, the gray button aligned with the importance of this new feature. Important, but not as important as orange. Moving the button within the box made it clear that it pertained to custom messages only. Final Prototype After lots of review and a lot of calls with my director, this was the final prototype and design of Events.com Custom Confirmation page. It is now in process (on their 'list') with the developers. Oh, how I miss those times.

Full product elements were scrapped to just include short preview of products.
FINAL prototype

After lots of review and a lot of calls with my director, this was the final prototype and design of Events.com Custom Confirmation page with a new button to preview the confirmation email. It is now in process (on their 'list') with the developers.

Oh, how I miss those times and working with that dev team.

REFLECTION & FINAL NOTE

I would like to thank the Senior PD I worked under and reported to, Cassie, who has supported me along my endeavors throughout the rest of my time as a undergraduate student and even now in the beginning of my career. Melody Shin, my director, has also inspired me to continue being as passionate about design as she was, and to look for other like-minded women who strive to be powerful in their career but also be a kick-ass mother. I loved my team, met one of my best girlfriends to this day there, and I do wish the entire company continues to do well.

This was my first product design piece I ever did in my entire life. It is not my best at all but I am ultimately proud of learning how to use Axure. Getting this internship was a blessing, I had not taken any design project classes until after I was already working at this company. Looking back (in 2021), I had so much more room to grow and am at a completely different point in my designing career. I'm happy I was able to help with such small stories; I truly learned so much even if the projects were so small.

Other projects

Wells Fargo Premier
↗ View work
Advice Analytics Website Redesign
↗ View work
events.com Custom Confirmation Layout
↗ View work
Freelance graphic, product design & commissions
↗ View work