Makara Peak Supporters

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 project for the MUXD students enrolled in the Web design course. This project was worked on by a team of 5 members including myself. The team comprised of people with a range of different skillset and experiences.

The folks at Makara Peak Supporters (MPS) presented this project to the User Experience cohort to discover the problems their members and other non-member park users faced. Their main aim was to find improvements to their current digital platforms (Facebook and/or Website).

This was a great opportunity for me to collaborate with other UX designers on a real industry relevant project. The project spanned over a total of 3 weeks where as a group we employed several UX research and design processes to produce the final design and recommendations.

Old website

Approach

Due to the various issues raised by the users it seemed reasonable to reimagine the website in a manner that would make it a more useful tool. The final design of the prototype created is an embodiment of all the needs and goals of the users.

Our aim was to propose a website design that would not only bring members to make use of the website but also convert more visitors to sign up for memberships by providing them useful and enticing information.

Process

A team of 5 UX design students collaborated on this project. The team worked together on most aspects of the project but split roles whenever needed. The first phase of the project was research which included brainstorming sessions to unpack the problem, conducting interviews to gain deeper insights into the problem, validating/eliminating any assumptions made and discover other relevant issues, analysing the feedback, creating personas and journey maps to better understand the target audience and empathise with the users and finally to propose solutions to the problems brought up by the users.

The second phase of the project was to build the proposed solutions taking into account the insights from the research. The focus was on the problematic areas of the organisations current website, including the home, membership, volunteering, contact and tracks. We began the design process by creating user flows and wireframes. With the feedback from testing of the wireframes we created an interactive prototype that incorporated fixes to the issues brought up by users in the wireframes.

Old website

Personas

The team decided to create user personas to represent each stakeholder to better understand the needs, goals, behaviour and frustrations of the users and empathise with them. This also allowed us to keep our biases in check while designing for a different user.
The personas were created by Alicia and myself. Final document styling was added by Alicia.

Journey Maps

These diagrams mapped out the steps the user would go through to complete a task or goal such as creating or signing up for an event.  They evolved over the course of the project, always focussing on building empathy and helping the user to complete their goals as efficiently as possible.
The journey maps were created by Hemi, Alicia and myself after a team discussion.

Testing

To get a better idea of the problems related to the website the team created a usability testing plan. The idea was to test with first time users to get a more raw feedback of the website. Each of the team members conducted a test with a single user. Mona further tested with 3 more people and created the testing report.

Breakdown

User Flows

The team created user flows to visualise the structure of the pages as well as understand the flow of information. Due to the issues regarding the information architecture of the current website it was important to build up from the basics to meet user needs. The user flows helped create well structured pages from the start. Kari took the responsibility to formalise and digitalise the user flows using draw.io

Old website

Wireframes

From the user flows the team created wireframes for the various pages. Through the sketches we tried to include all the solutions regardless of viability. This helped bring new ideas to the table. To get the best ideas, each member created their own wireframe for each page and unanimously select the best ideas. Several of my wireframe designs were chosen to move forward with. The final wireframes are a culmination of every members ideas.

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:

  • Home Page
  • Membership process
  • Volunteering & Events
  • Map (tracks)

Old website

Challenges and Learnings

This project brought along several new challenges while also providing opportunities to do better with previous ones. These challenges were around team work, testing, design iterations and making choices to move ahead. Personally, I learned that there is no perfect design and sometimes we have to get work to a finished state to meet deadlines and not get caught up on the details at each stage. I also learnt that jumping to design too early has its consequences and it involves significant backtracking when things go wrong, it is best to do get feedback on smaller items. A particular challenge of this project was empathising with multiple personas and designing something that satisfied all of their needs.