Project 1
Designed a corporate gifting platform MVP product
Overview
Working with product lead and engineering, I designed the interface and interactions for an MVP version of a corporated gifting platform that included the backend admin that was partially built on my arrival. Partnering with the entire team in weekly meetings, I ensured alignment with business goals and user needs was on track.
| My Role: | UI UX Designer |
|---|---|
| Responsibilities | Competitive research, interactions , collaborate on strategy and goals, wireframes, design iterations, visual design decisions, tooling explorations, create custom components. |
| Collaborators | Product Lead, CEO, Lead Engineer, Marketing Director |
| Timeline | 6 months |
The Problem
Blue Sky Marketing is developing a white-label gifting platform software solution to expand their business model. The platform will be licensed to other companies, allowing them to offer gifting services under their own brand. This initiative aims to increase revenue and enhance Blue Sky Marketing's competitive position in the corporate gifting market.
Goals
- Storefront interface for gift selection with the ability to a choose gift and it's details.
- Checkout process with no money exchange.
- Product needs to be scalable.
- Customizable hero space.
- On brand emails.
- Client facing admin section for customizing entire gifting experience and data tracking.
Research
I gathered the list of business competitors to see what they were offering their users. Watched demos, noted their content and design asthetics and asked questions to their sales team. What could we do differently and improve upon?
The Process
Business wanted simple interaction that would bring the user login to transaction finish with minimal clicks, little direction and clean interface. The flow of the product was important. Would there be a shopping cart? We didn't know at this time, so we moved forward with our original plans knowing things could change.
Gifting landing page
Gifting product page
Shipping form with thumbnail review of order.
Pain Points
- What if company offered employee more than one gift. How would that work? It wasn't scalable enough. This needed to be thought out.
- Address form cannot include shopping cart on the same page because the user needs to return to gallery for additional gifts.
The Solution
A shopping cart feature was added, separating the address form from the cart, so the user may return to the gallery for other selections. This allowed the user to claim more than one gift per email claim code.
Flow showing the ability to choose one or more products depending on the gift offer.
Custom asset library
Next Steps
Moving forward, the team will have to maintain scalability across the product if they want to continue to add or change features. Keeping interactions easy will benefit the marketing user base.
Project 2
Imagining a two-part code generator
Background
Blue Sky Marketing needs a feature that generates unique codes that can be used to for gift claims, work within a database, and associate them with email addresses for delivery.
My Role:
Feature research, collaborate on strategy, build mockups, design iterations
Additional Team Members:
Product Lead, CEO, Lead Engineer, Marketing Director
Tools:
Figma
The Problem
There to two use cases to consider.
- The ability to create codes by quantity and be download to CSV file or send to a database.
- Create codes that are attached to an employee email, so they can be emailed their gift claims.
The Challenge
How do we merge two different use cases into one code generator, making it intuitive enough for the marketing and HR audience and work seamlessly within the database technology?
Research
Research was simple, since this is not a feature I am familiar with seeing. I did an online search for code or token generators in hopes of finding examples I could be inspired by.
Code generater examples for inspiration.
The Process
Colloration with product owner and engineering brought many questions about capabilities. Can all this work on the same page? What happens to the code once it's generated? How does it reach the code log? Does the user need documentation?
- Using inspiration from research, I started the iterations in a place that I felt met all the goals so far.
- A toggle switch feature was used to make the switch from the two types of code generation in the same interface creating as few steps as possible.
- Familiar drop and drag/file upload element was used for email uploads.
First use case - create multiple codes using email addresses
Second use case - create codes by quantity.
Collaboration and feedback
Team was concerned the interface was too difficult for the marketing audience. Engineering wasn't sure how they wanted to build the generator, so there was a lot of speculation. How can we simplify the code generator and work with engineering at the same time?
The Solution
- The toggle interaction was retained, but redesigned to a more simpler version allowing the two versions of code generator to live in the same space.
- Design was minimized to include only the necessary features.
- The drop and drag/upload window was eliminated since the codes themselves didn't need to be visible. The code would be sent straight to the code log and be visible from there.
Final - first use case - create multiple codes using email addresses.
Final - second use case - create codes by quantity.
Takeaways
Learn the most you can about product and engineering expectations will minimize confusion during iteration stages.
Project 3
Making a code log database interface as part of the gift claiming process
The code log report data table is designed to integrate with codes imported from the generator. It provides an interface for the marketing team to manage codes and track their usage on the gifting platform.
Code log goals:
- Ability to filter used and unused codes
- Download data to CSV
- Delete feature
- Sort data between gifting programs
- Send gift claim emails to employees
- Manage gifting data and progress
Code log empty state.
Let's Connect