In this project course, my team was tasked with creating a new website to help showcase our sponsor’s unique 360 virtual tours. Our sponsor, the owner of the startup PeekPeek, requested we make him a website with a narrative — something exciting and beautiful that would stick in people’s minds.
Original Website
The initial website was hosted on Wordpress and did little to encourage potential customers to learn more about their services.
Ideation
During a brainstorming session, the team decided how to tackle this problem using the sponsor’s first mockup of the website. After constant communication with the sponsor, high-fidelity mockups were made by each of the team members. We were then able to combine the best aspects of each design and turn it into the final one.
Solution
A look at how tours can be viewed on the updated website
Features
The website’s most interesting aspect is it’s use of horizontal scrolling to tell a narrative. There are elements in the website that appear when a user has scrolled a certain amount and disappear after more scrolling.
The navigation bar is static and will always be visible to allow for customers to quickly access certain parts of the website and contact PeekPeek for more information.
WebTours can be interacted with directly on the website by clicking on the thumbnail associated with that tour.
Lessons Learned
Horizontal scrolling may break natural conventions of navigation through a website, so we had to implement a way of scrolling that translated up and down into left and right. However, when we were using Sketch, Principle, Flinto, and Tumult Hype, all of them behaved weirdly because we were attempting something very unusual. Due to this, it often felt like we were working against the tools rather than with them.
Our sponsor wanted so many different things done but we didn’t have time to do all of it. We had to figure out what we could do in ten weeks that would satisfy the stakeholder.
There were often points in this process where we had to drastically change the design because what we envisioned was wildly different than what the sponsor wanted. We initially had trouble understanding his priorities for the website. Once we got more feedback we were able to make the design closer to his vision.
As always, making sure that there is a lot of communication between team members and the sponsors ensures that we are always working on something and held accountable for getting something done.