About project

Design process

Here is a visual representation of the design process in this project. The discovery phase spans across all phases as more insights are to be gotten even after the launch in order to iterate and improve.

The first step was to identify the challenge. Consequently, more time was spent on gathering requirements (from stakeholders) and discovering how users interact with the current platform.

Discovering the challenge

In order to make the design process inclusive, a dropbox paper was created. The paper was open for collaboration so the stakeholders could be included in design process allowing them to share information, see the proposed timeline for different phases and view the draft of survey questions.

Dropbox paper documentation

To discuss what was documented in the paper doc, comments as well as calls were necessary to align. A specification document with existing features along with data about existing users (active and inactive) was made available and features were discussed extensively in our initial remote meetings.

Heading to user research in the discovery phase, it was important to clearly define the goal of the research which was summed up as - “to understand what features are valuable to the active users as well as any pain points they encounter with using the features” and for the inactive users - “to understand why the stopped using the platform, what would make them get back to using it” and for both category of users to know - ”what features they would find valuable if included on the platform”.

Analysing survey responses from users

From the survey the major challenge was identified as users not knowing what value they could gain from the platform and also helped identify what apps users interact with frequently including what platform they access quizboot on among other valuable insights.

Understand

In order to understand the challenge, I gathered findings from the research and the heuristics evaluation of the existing platform, analyzing both.

This insights helped me to identify typical traits of users and ultimately align with the goal of the research.

Based on responses from the survey the following findings were deduced:

• 75% of users possibly acess the app on mobile
• More people have taken quizzes than they have created
• One common action users take is searching for a quiz
• Most users discovered quizboot from other users

Ideate

Bearing in mind insights from the research + understand phase, I moved right into structuring the navigation and flow for each feature from the main touch point (the home page). I identified the major navigational elements and explored ways to represent them visually.

Visual Design

Based on the insight that over 75% of users access the platform on a mobile device, it was necessary to take a mobile first approach. A low mid-fidelity version of the first set of screens was created.

Home screen and create quiz screen

Design focusing on question creation

The initial plan was to test the designs with users before moving on to high-fidelity but because of time constraints and a limited budget I couldn’t test with actual users but I got a few people who were representative of the typical users to interact with the mock-ups and got feedback mostly on the navigation which I iterated on while moving on to the high-fidelity design.

Component Library

One of the major touch points is the homepage which is a quiz “social” timeline where users can see quizzes created by people they follow. Since one of the most used feature is searching for/joining a quiz, it was valuable to add a section where users can easily join a quiz with the quiz id.

High-fidelity design of the homepage (Side bar showing connection recommendations to users)

Also, to push the social value of the platform a sidebar is available on the desktop web version for a user to connect with other users. The mobile web version of the homepage is consistent with the desktop version with the sidebar being the only major difference.

Mobile and desktop web versions of the quiz page

Review and Handoff

As mentioned earlier, there were time constraints and limited resources at my disposal so I couldn't conduct a proper user testing session. It was agreed that we would rely on feedback from users after the launch of the redesigned platform to further iterate and optimise features.

Figma's dev handoff feature

After completing most of the screens, I handed off to the developers working on the platform. This was quite seamless as the designs were done in Figma which has an inbuilt handoff feature that allows designers to not just handoff but also collaborate with developers while they build out designs into code.

Outcomes and Learnings