- Business Goal: Promote the new product.
- User Goal: Learn about this advertised new product and buy it.
- My Role: UX Designer and Visual Designer.
- Tools: Adobe Illustrator, Adobe Photoshop
You will read design process on research on competitive products and existing website, information architecture, ideation, wireframe, and usability test and iterate, AB test and final design.
Research on Competitive Products and Existing Website
This project is a landing page to help the business promote their new product. The whole theme of this landing page should match their live website theme. After researching and analyzing the competitive websites and landing pages, I found that some landing pages display excellent on the big screen, but poorly on the smaller screen, such as mobile phone. I decided to design the mobile version first, then expanded to the bigger screen to provide users the better experience.
Information Architecture, Ideation, Wireframe, and Usability Test and Iterate
With the limited text and image resources the manager provided for this landing page, I analyzed the information, made the information architecture for this page, quickly sketched 20+ ideas in the ideation process for exploring the design concepts. Then I chose three ideas for design wireframe in detail. I tested the paper wireframes and modified until I satisfied. I sent the paper wireframes to the manager. The manager gave me feedback on usability, and I changed until the manager approved the paper wireframes. I used Adobe Illustrator to draw digital wireframes and sent them to the manager. After approving the digital wireframes, I put design notes on them and sent the digital wireframes with design notes, then the manager passed them to a developer.
AB Test & Final Design
Based on approved wireframes, I worked as a visual designer to create the final visual designs for this landing page. I provided the four design solutions and sent them to the manager. The manager passed them to the client, and then the client chose one from four design solutions.
Final Design — Website
Final Design — Mobile
I learned that started at mobile size could help me to manage the design performance well on tablet and desktop.