I Want To Experience

The Basics

Role
UX/UI design,
Front-End Dev
Time
4 Weeks, Feb 2018
Type
Web design capstone, Individual

Scope

This project was an industry collaboration project between the MUXD students enrolled in the Web design course and the software development students. This project was worked on by a team of 7 members including one UX designer (myself) and 6 software developers. The team comprised of people with a range of different skillset and experiences.

The aim of the project was to create a web based tool that allowed VR content creators to create hotspots within each video that linked to other videos. This would allow VR users to have a more immersive experience.

The project spanned over a total of 2 weeks where I employed several UX research and design processes to produce the final design and recommendations while the software developers used their skills to create a web application.

Old website

Approach

With a strict and short deadline of 2 weeks, we adopted a LEAN UX and AGILE methodology for the project. I led the first design sprint by unpacking the problem, noting assumptions and listing questions for stakeholders.

Throughout the span of the project I worked closely with the developers taking into consideration their skills in the required technology and creating viable designs that would help create an MVP while also proposing to the stakeholders designs that would meet user needs and goals most effectively.

Process

A team of 6 software development students and 1 UX design student collaborated on this project. Initially the team worked together to unpack the problem, interview stakeholder etc. As a UX designer I had to lead the sprints staying ahead of the developers by providing them designs to work towards. At first I began by creating personas and journey maps to better understand the target audience and empathise with the users. I then shifted to conceptualising the design ideas by creating a task model that comprised of all the requirements and critical functionality for the tool.

I began the design process by creating sitemaps and wireframes. With the feedback from testing of the wireframes I created an interactive prototype that incorporated fixes to the issues brought up by users in the wireframes. The assets, frameworks and designs created for the project are given below.

Old website

Persona

Using the LEAN UX method of personas at first, I created 3 personas with inputs from the team, for who we imagined would be the users of the tool. This included a member of the museum staff, a viewer in the general public and a content creator (video maker). The final persona of a content creator was created after confirmation from the clients.

Journey Maps

The user journey diagram mapped out the exact steps the user would go through to complete a task or goal, that of creating and publishing video content. The journey evolved throughout the project, always focusing on building empathy and helping the user to complete their goals as efficiently as possible.

Testing

The main aim of this process was to test the design concept with the target audience and all other possible users. This was important as the designs were based on an assumption based persona and the product had to satisfy real user needs. Another goal was to find areas of negative experiences. Any issues that caused users to have a negative experience had to be noted and eliminated where possible.

Breakdown

Task Model

A task model was created based on the final persona. This helped to identify critical tasks that the users needed to carry out to successfully create the immersive VR content. The model focused on what the users need and expects to do in order to complete their goals. The result was a list of critical information and functionality that I could check the designs against.

Old website

Wireframes

The first step to proposing an interface design was to create wireframes. The initial wireframes were unrestrictive and inclined to the style of popular video editing tools currently available as it was revealed upon inquiry with video editors that there is a preference of having familiarity across all the editing tools. Having a completely new interface would require unnecessary learning. Hence, the initial wireframes were aligned towards currently existing and popular styles. However, after testing the wireframes with people who were not familiar with video editing tools it proved to be rather complex and were changed in the next iteration.

Home wireframe

Design Direction

We wanted to focus on the countering the critical problems users faced within the website while also generating more empathy from them to make the website more resourceful that would bring in more visitors. Our structure was designed around highlighting areas that would draw attention of the viewers and provide them information to engage further. We took inspiration from the current brand style (which was very limited) and from the park itself. This is reflected through the choice of colours, typography and photographs utilised.
The branding was setup by Hemi, one of the members of the team.

Old website

Outcome

The initial concepts were sketched and tested with users that were not members of MPS. The final designs were created using Framer app for prototyping. Framer allowed creating customised interactions especially for the calendars and the map and across various parts of the home page.
The significant parts of the project include:

  • Navigation
  • Editing video details
  • Hotspot creation

Final prototype design created in Framer. The final iteration includes various microinteractions especially subtle instructions to aid users to easily use the tool. It also includes placeholders for future editing tools (as seen in the bottom left corner of the screen).

Old website

Challenges and Learnings

Working with software developers as the only designer had a unique set of challenges. These ranged from making developers understand the value of design to technical challenges for them to use the specified tools. My took up various roles during the sprints starting with facilitating co-design (to bring design thinking to the developers) sessions to UI design. Another challenge was working with rigid stakeholders. Developers tasked to use ReactVR with no prior experience struggled with it and I had to take that into consideration while designing. This taught me more about designing with viability in mind.