E-Commerce Wireframes
Challenge
The website needs to provide a premium experience by educating the user with storytelling, entice users to visit and book a tour, buy the product and attract a new younger audience to become brand loyalists without alienating the older demographic that have been purchasing the product for years.Skills Involved
- User flow
- Site map
- Navigation
- Prototyping
- Wireframes
Userflow, site map and navigation
Userflow, site map and navigation
Once the personas were created, they needed to be mapped onto the new site map to ensure that the entry and exit points were considered, how they flowed throughout the website to ensure that their needs were met and at all points throughout the users journey the brand story and products were accessible. With different age brackets and consumer needs to meet, the site map was altered until all users were successfully mapped to ensure core objectives were met. The navigation was then determined ensuring quick click throughs, concise global navigation and easy to navigate through.
Prototyping
Prototyping
To ensure that all user requirements were met the wireframes were prototyped and tested with stakeholders and users. These were amended until all parties involved were happy. The prototypes were done in InVision.
Wireframes
Wireframes
Once the prototypes were approved the wireframes were completed, which included annotations which would help direct:
- Error messaging - Transitions - Animations - Content - Branding - Click throughs This was included to ensure the design team and development team had all the information needed to successfully design and build the website.