I created the new landing page layout, the sign-up layouts, and developed the sign-up flow for the team to review.
Tools: Photoshop, Google drawings
I collaborated with the Creative Director to build a list of all the details that should be included on the landing page. The list included information from several pages of the website along with a captivating video of all the successful users on the platform.
The first process was creating the prototype for the landing page in Photoshop followed by the user flow of the sign-up process. We decided to create the landing page prototype first to see how all the information could fit in a clean and simple layout. We did not want the landing page to be overwhelming.
Wireframing
I created the mobile and desktop wireframes through Photoshop.
Tools: Photoshop
I created four different mockups of the landing page. My overall goal was to create minimal scrolling, a way for the user to interact with the different features, and to have the sign-up button accessible.
The desktop design was the easiest. We chose to continue with the sign-up box to scroll with the user.
For mobile, it was a more difficult design - trying not to create a busy mockup. I still wanted to have the sign-up button scroll with the user. There were a few versions designed to reach our final prototype.
Once we chose the final design, I started building the sign-up flow for desktop and mobile.
The goal was to create a simple sign-up flow, asking for basic information and designing a clear walk-through of the platform features. We wanted to build a walk-through that would take 3-5 minutes.
I chose to use negative space as a design element to help with call-to-action buttons, remove any distractions and develop a clean and guided tour of the platform.
I created the wireframe through Photoshop and prototype with InVision.
Tools: Photoshop, InVision
Once the user flow was confirmed, I began designing the prototype through Photoshop. During the wireframing process, I always considered current user interactions on the platform. Structuring a consistent layout, visible call-to-action buttons, and spacing were very important characteristics to designing this product. The consistent layout allows the user to develop muscle memory which leads to efficiency. Visible call-to-action buttons are determined by color. Spacing between buttons and information fields creates a desktop-friendly and mobile-friendlier design.
The desktop prototype was developed to translate easily from desktop to mobile or tablet.
I built the prototype in InVision for the team to review. I collaborated with the Creative Director and software developer to gain feedback for feature edits.
Once the prototype was developed, we tested on desktop and mobile and added any errors to Trello. Contributing clear and concise problem/solution tasks for the software developer to follow allowed us to launch the product live on the site.
