About the Within Website
My role: Lead designer
Users who visited Within's website did not come away with a good idea of what the company did. As well as that, they were often frustrated when trying to find 360º videos that we host on our website because they weren't very discoverable. Additionally, we needed our website to better showcase our 360º videos in order to get more content partners.
I worked alongside two other designers for the initial visual design concepts, but designed the UX and created the final visual design alone. I also worked closely with the engineering, product, and content teams to ensure that the final website design met all of the right priorities for each of the different teams.
This project can be split into the following stages:
Evaluation of Old Website
Overall, the old website struggled with problems related to scale, branding, and consistency:
- The header on the front page was a trailer cut together from some of our 360º videos. This was not dynamic and was therefore never updated with the latest content because of the significant overhead it would take to make that change--it was something that could not keep up with the company scaling up. We needed a design that could scale alongside us.
- There wasn't any real description of what the company did on the front page, so users (including me before I was interviewing) were not always sure what the company actually did. The mission of the company needed to be more overt and more easily understood by users.
- The videos were not easy to find, especially some of the older or less popular pieces that eventually dropped off the front page. This was because there was only a curated list on the front page, as opposed to showing off a large library--users had to click into the videos page in order to actually see the full list.
- Because the old website was created before Within rebranded, there were leftover style decisions that fit the old branding. It needed a visual updating to make it more consistent with the new branding, as well as to highlight Within as a premium VR viewing experience.
(screenshots are from the Wayback Machine, so are missing some key details from the old design)
- An updated tagline for Within ("Extraordinary Stories in Virtual Reality") is the most prominent thing on the page--it's the value proposition Within is making to people landing on the website
- Settled on a procedurally generated background that one of our engineers made from the thumbnail images, which removed the need to update it as we added more content
- The key articles showcase what's great about the stuff that we make, giving users more to read about what makes us awesome
- Content pieces are sorted into categories, which makes it quick and easy for users to determine which videos they would be interested in watching
- Descriptions of the pieces are on this same page, which stops the user from having to go to another page to determine if they would enjoy a specific piece
- Hovering and clicking on a thumbnail brings up many more screenshots from the piece--important when trying to sell people on watching a very visual medium
- Description pages can have much longer descriptions than what we show on the front page. This lets us add more context to the pieces, without cluttering up the front page
- Sharing features are prominent on the page, which increases the chances of new people being introduced to Within's content
- There is a section for related experiences--users can very quickly find things that they would enjoy after watching a piece of content. This helps with retaining viewers and increasing viewership ratings.
- A more traditionally typeset page. This makes the site feel a bit classier and traditional--something that speaks to the Within brand
- We finally list our partners and investors, which helps add authenticity to the brand
- The store links are at the very top to allow users who already know what they want get to the relevant information quicker
- For users who don't know what store to use, some dropdown menus allow them to pick the device they have and provide them with the most appropriate store link.
- The "Get the App" page also serves to explain the different types of VR experiences you can have with different equipment--this is important in the industry because there is often misconceptions about what VR is and isn't.
Creating the Design System
Once the design was finalized, in order to properly convey it to the engineers, I broke it down into different components and provided styling guidelines for everything. I provided all the different possible states and worked closely with engineering to make sure they had all the information they needed.
Adding Additional Features
For a project that was later cancelled, we had to add very simple user accounts to the website.
Some of the final visuals for user accounts:
Wireframes for parts of the user accounts flow: