UI Challenge 001: Sign Up
Yesterday I signed up for Daily UI – a website subscription that sends a series of daily Design Challenges over the course of 100 days.
The purpose? To help you (aka me) become a better designer.
As I’ve just begun my journey into refining the focus of my career from graphic design and digital marketing to solely be in UX and UI design, Daily UI could not be a better fit.
Each work day for the next 100 days I will be interpreting and creating my own designs to solve specific problems curated by Daily UI, and sharing them across my Twitter account (I need to get better at updating this) and my Dribbble profile (with the tag #dailyui).
Here and there, there will be some sharing on Linkedin but to be honest I absolutely loathe the “which UI is better?” posts that are permeating that platform.
Part of me thinks that the people sharing these posts are sharing their solutions for the UI challenge that arrived in their inbox – but is this really the way these solutions should be shared? Asking someone their visual preference is a subjective business – one that really has nothing to do with the user. In doing this, it doesn’t mean one UI design is better than the other…especially if you’re strictly talking about what people “like” better.
So for me, I’m taking these daily challenges for what they are: A way to continue to build my UI skills, think on my feet and build my ability to create interface solutions in a short sprint – as opposed to a UX project which involves my doing research to solve for a particular user problem, need and want.
In tandem with my starting these UI challenges in order to improve my skills and build my portfolio – because let’s be real even though graphic design is impressive and very visually focused it does not have enough overlap with User Interface Design. Which btw I am also working on my passion project to design a responsive experience allowing visitors and locals to route plan and “explore” through the city of Stockholm, Sweden via their SL metro system.
My first challenge came in the form of creating a sign up. The prompt stated my design could be a page, modal, form, or app screen but at the end of the day needed to relate to signing up for something. Conveniently one of my favorite retailers, H&M, was running a December gift card giveaway yesterday, and needless to say their sign up page (on both mobile and desktop) left a lot to be desired.
So here we go! Daily UI challenge 001: tackling H&M’s Sign Up for their December Member Giveaway.
My mission: To create a sign up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything I could imagine.
My “client”: H&M
Business goal: To increase new member sign ups during the holiday season
My solution: To create a sign up page which allows users (aka new members) to enter H&M’s December Member Giveaway (for a $200 gift card) easily, quickly and painlessly.
Where the desktop sign up started:
H&M’s website overall has great hierarchy, strong use of brand colors and fonts, and catchy content to draw users in when they share promotions and giveaways.
Where I immediately noticed they fell short in this giveaway experience – which my cohort mates noticed as well – is that the overall look of their desktop modal for the December Member Giveaway was less than desirable.
The proximity for the text content blocks felt a little top heavy with too much white space near the bottom of the modal (where the links/buttons were featured)
Although I understand that the “fine print” is typically required to be included when it comes to promotions/contests/giveaways, the fact that H&M chose to make this a primary element of the modal immediately turned off the user – to which I learned via a brief poll I proposed in my morning stand up
The links at the bottom of the modal were not designed in a way that it was clear they were actually links. They needed a little finesse in order to remove the confusion the user would experience as to whether or not they could actually click on the text (without the need to hover)
H&M’s current solution for the desktop modal surrounding their December Giveaway
Where the mobile sign up started:
H&M’s mobile app is put together well. Many of the features are well thought out and are easy for users to interact with, without much confusion or questioning.
But when it comes to sharing messages, such as the December Member Giveaway, H&M’s use of a text heavy overlay (featuring the same content that is on desktop) is a big miss.
Again, I understand the need to include the “fine print” but when you are on mobile that text becomes overwhelming – and as one of the people I polled stated “I do not want to read all of that information if I am just signing up to win a gift card.”
A positive I noticed on H&M’s current mobile overlay is that the “Join for free” and “Learn more” buttons were much more obvious and easy to understand vs their appearance on the desktop version of the pop-up.
H&M’s current overlay solution for their December Giveaway
My solutions:
To successfully address the business need to increase new member sign ups, I considered the information most important to the user, while staying within the bounds of H&M’s current Design System of fonts, colors and button styles.
For the desktop modal solution: I pulled out the most pertinent information including:
The 10% off bonus for signing up
The fact that becoming a member is free, and
That by signing up the user also can enter the December Member Giveaway
My solution for H&M’s December Member Giveaway desktop modal
For the mobile solution(s): I decided to tackle two solutions for an updated UI overlay (which in the real world would be A/B tested):
I kept consistent with H&M’s current solution, but integrated more of the H&M red, adjusted the font size hierarchy, presented the pertinent information as a list with images to make it easier to read and digest, and included the “fine print” in a smaller font towards the bottom of the overlay
I decided to design a modal version for my second solution, which (ideally) would be tested against my first overlay solution. In this solution I decided to incorporate H&M’s Design Component of an image including a headline and button (as currently seen in H&M’s hero image on their homepage). I removed the use of a serifed font in order to stay consistent with the H&M brand sans serif font, and adjusted the button color to also be the H&M red vs the typical black, white and outlined button users currently see on the site. This was a way to both integrate more of the brand color and pump up the festiveness of the season. Additionally, for this version I removed the “fine print” and included a “Learn more” link which when clicked on would take users to a sign up page that included the giveaway fine print
Mobile overlay solution for H&M December giveaway
Mobile modal solution for H&M December giveaway