Initial Requirements
-
update the coupon generation feature in both the overall design and the user experience
-
explore all use cases that could happen within the feature
-
suggest any further improvements
Step 1: Identify and Ideate
The initial steps were to research and see the current design that is in place for coupon generation. From here I could start to identify any problem areas that from my personal opinion and experience, could be improved.
I had split these points up into UI points of improvement vs UX points of improvement, by doing this method, it was easier for developer to help decide and estimate what could be done within their cycle.
Then I could see some design that could be improved, such as:
-
important information wasnt significant enough in the design
-
a lot of the components did not match our existing design components within the design system
For the UX points of improvement, I had again split these up into both major vs minor points, in order to identify the severity of the issue and again, help estimate and ideate what points will need the most attention.
From here I could see that, overall there is a lack of flow, there is no clear journey for the user to take in order to generate their coupons.
There is also a severe lack of explanation and information about what field will be used for. Additionally, there is no validation on the fields, so it is much easier for user to make a mistake.
From here, the lack of overall user journey concerned me, so I started to map out the existing flow and ideate on how I could craft a better journey for the users.
Step 2: Design Improvement
For the design, I decided to separate the existing coupon list from the coupon generation, to help the user to have a clear idea and journey when entering the coupon feature.
From here they can see a list of all the already generated coupons, manage them and export them for download and distribution.
Once the user presses the Generate Coupon button, they are met with this modal.
Key Improvements:
-
Clearer and better visual heirarchy
-
Separate sections into Format & Generation
-
-
Bring significance to the example coupons
-
Introduce tooltips to educate and inform users about what each field does.
Validation Examples
In this case, there is an error message that appears under the field to indicate that the entered information must be a number.
In this case, the maximum usage for each individual customer cannot be bigger than the usage overall, as logistically, it’s impossible.