Web App

Quizboot

Building a consistent mobile & desktop web experience on a quiz platform.

Overview

​​This is one of the most tasking projects I have worked on because of the timeline to deliver and the extent of features. Since it was a redesign project, it was important to identify issues with the current platform through a usability review and understand pain points from users perspective through research. I worked in a team of 4 (1 Designer/2 Front-end developers/1 Back-end developer)

Role in project

UX Designer - Research, Information Architecture, Visual Design

Goals

Redesign the platform to deliver a great, consistent

desktop & mobile web experience

Ensure features are easy to discover by

improving the information architecture

Outlining the process

Here’s how I went from zero to one in this project

The first line of action was to identify the right approach to solving the redesign problem based on the resources available. Since the main goal was to redesign for a better desktop and mobile UX it was important to spend time on gathering requirements (from stakeholders) and researching how users interact with the platform (this meant that the discover and understand stages were key steps).

Here’s a walk through of each step in my process.

Discover

At the start of the project, a dropbox paper (the best tool to get you started with documenting!) was created. The paper was open for collaboration so the stakeholders could easily drop notes on the current app, this was to make the design process inclusive allowing the stakeholders to collaborate add some good to know information in to the rough draft.

To discuss what was documented in the paper doc, we jumped on a few calls to ensure we were aligned. A specification document with existing features along with data about existing users (active & inactive) was made available and features were discussed extensively in our initial remote meetings.

Initial dropbox paper documentation

After initial calls to align with stakeholders, I made a rough draft of the timeline (dropbox paper came in handy again with the timeline feature :D). The timeline included an estimate of when survey questions for the quantitative research would be drafted & reviewed with stakeholders, when findings from the research would be analysed and also when a usability review of the current platform would be completed among other to dos.

Initial timeline for the project

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”.

The survey questions helped capture what apps users interact with frequently and the what platforms they access quizboot on among other valuable insights.

One of the survey questions to know what features users recall

While waiting for responses from the survey, I conducted a usability review of the current design which I documented and ensured comments were succinct because the document was also to be shared with stakeholders.

Documenting the usability review of the current app

Understand

In this phase I gathered findings from the quantitative research as well as the usability review, analyzing them to get insights. This insights helped me to build personas representing typical users and answer key questions like what features users use frequently, how they interact with them and ultimately align with the goal of the research.

Snippet of some insights from the research

Personas showing some characteristics of typical users

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
  • One of the common actions users take is searching for a quiz
  • Most users discovered quizboot from other users

Ideate

Bearing in mind insights from the research + understand phase and the goal to make features easy for users to discover, I jumped 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.

Based on the insights that over 75% of users access the platform on a mobile device, I decided to take a mobile first approach to the design. I created low mid-fidelity version of the first set of screens, this helped me move fast (because of the tight timeline) and also made it easy to reuse some of the components on other pages.

Mid-fidelity design of the home screen & create quiz screen

Design focusing on how questions are created

From Mid to High fidelity

The initial plan was to test the designs with users before moving on to high-fidelity but because of time constraints & 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 implemented while moving on to the high-fidelity design.

I look forward to the user testing session that will be carried out post-launch to get valuable feedback and iterate.

Creating an account (new users can either signup with email or phone number)

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.

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

High-fidelity design of the homepage

Desktop & mobile web versions of the quiz page

Review/Handoff

As mentioned earlier, there were time constraints & 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.

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.

Snippet of Figma's dev handoff feature

Outcomes & Learnings

The redesign features a more consistent and easier navigation structure which solves the initial problem users had with finding and recalling some of the features on the platform. Also, the redesign allows users to signup with an email address or a phone number.

It was valuable to allow users signup with a phone number because of the required user verification (this was necessary to remove withdrawal limits from a user's wallet balance). When users sign up with their phone number, they get a sms verification code sent which they can easily copy (since they would probably be with their mobile device).

In retrospect, one thing I would have done differently is to have better defined features at the start of the project (there was a quite some back and forth with stakeholders regarding this) and also to have had a UX researcher on the team or to have conducted more user testing sessions instead of relying on post launch to get feedback from users

See more projects

Nimcure

Working in a multidisciplinary team to design a tool to help patients adhere to treatment.

View Case Study

Truppr

Redesigning how people find fitness events and connect with fitness enthusiasts.

View Case Study

Klasconnect

Improving learning experience and interaction between students & teachers.

View Case Study