Hackathon for Responsive Design
Overview
The goal was to work with engineers to create a responsive website for an e-commerce beauty brand in three days.
We were required to create an attractive newsletter signup from
Role:
I had three main roles on my team. First, to conduct competitive research, second, to design the hi-fidelity wireframes and prototype, and third, to pass off detailed assets to the engineering team.
Duration:
3 day design sprint
Teammates:
Thomas Truong and Rico Peng- UX designers
Justin Curry and Joseph Rohman- Engineers
Design Methods:
Comparative research
Design studio
Wireframing
Rapid Prototyping
Specs for assets
Tools:
Pen & Paper
Sketch
Invision
The Opportunity
How can we work together to create a compelling newsletter for a beauty brand in three days?
How can we communicate our design to the engineering team to execute our vision?
Research
Glossier’s newsletter signup
Refinery 29 newsletter signup
We took inspiration from beauty e-commerce brands that that had clear engaging language that encourages users to signup for the newsletter.
Process
As a team of designers and engineers, we took inspiration from competitors and completed a design studio to collaborate on wireframe ideas.
Our finalized collaborative wireframes
Design Decisions
The photo size and orientation updates as the screen size changes. The modal for the newsletter uses engaging language that gives users an incentive to sign up in order to not miss out on new arrivals and special offers.
We created a customizable newsletter with language that makes it feel unique to the user.
If the users chooses to customize their newsletter, they have the option to choose frequency and topics of interest.
After the user confirms and customizes their selections for the newsletter, they have a confirmation message in the modal. At any stage throughout the newsletter signup flow, the user is able to exit and go back to shopping.
In addition to the wireframes, we created a style guide to give detailed information to the engineers along with image assets.
With the assets, we also included measurements, placements and orientations specs.
Reflection
The challenge of this project revolved around making quick design decisions and having strong communication with our team. Working with the engineers helped to design within reasonable time constraints. It was also important to allocate enough time for the engineers to code the front and back end, so we kept design changes to a minimum. I loved the collaboration between the design and engineering team and we were able to create a successful responsive website in a short time period.