Phantasia

UX Design | Dashboard Page Design | Social Marketplace Website

The client

Phantasia is an exciting new social marketplace for independent artists, craft-makers and art lovers. It will be a platform in which creatives can connect, showcase their work, buy and sell their work and skills, and find fellow creatives to collaborate and work with.

The challenge

The primary objective for this exciting project was to create a dashboard or system, so that sellers and users can view stats and data on their community, sales and promotion, visits, followers, sales, and other forms of data that could help them.

The opportunity

The great thing about the platform is that profiles aren’t ranked by their popularity, as with Instagram.

So the opportunity is to help artists get paid fairly for their hard work, as everyone has a fair chance to showcase their skills.

Who and how long?

  • A team of 4 fellow General Assembly students; Myself (obviously), Natasha Driver, Zsofi Gschwendtner and Xavier Chen.

  • Roles in which I had a stronger part in were user interviews, comparator analysis, sketching the wireframes and creating the widgets.

  • Alongside working full time, we had 6 weeks to finish this challenge.

The solution

How did we do it?

38
Survey Responses
12
Interviews
14
Usability Tests
3
Iterations
26
Hours Spent Looking at Graphs
Image alt tag

Surveys

We gained 38 responses from artists in a screener survey, in which we were able to gain insights and recruit participants to interview.

Image alt tag

Competitor Analysis

Xavier looked at direct competitors and completed a feature inventory of eBay, Depop, Fiverr, BigCartel, Artsy and Patreon.

Image alt tag

Comparative Analysis

Natasha and I conducted a comparator analysis with LinkedIn, Trading 212, Twitch, Natural Cycles, Dune Analytics, NFT OpenSea. In this we were able to get a good over view on how these in-direct competitors interpret data to their users.

User Interviews

Very serious business!

Very serious business!

Arguably the most important stage came next: user interviews.

Key trends recognised were as follows:

Customisation:

‘I feel sometimes I look at different things depending on what I’m on there for.’

  • 10/12 have a particular preference of what they’d like to see on their dashboard, leading us to the conclusion customisation may be something we should start to consider.

Tips:

‘I want to know why people aren’t buying, as I’m not sure how it(current stats) helps me’

  • 8/12 would like specific information on how to improve sales/stats. This means providing information on how to utilise the data supplied is something to note going forward.

UI Preferences:

‘I want my stats to be displayed clearly, I like big fonts’

  • 8/12 prefer a clearconcise dashboard, with large font and an option of a graph or a number. The last point being particularly important as it obviously ties in with the first finding.

Demographics:

‘I would like to see more data surrounding my customers, like their age and locations.’

  • 7/12 highlighted that demographics of their audience are important, and that they like to see who their audience is and where they are from.

Algorithm:

‘Instagram rewards engagement, it feels disheartening.’

  • 7/12 mentioned their frustration at the algorithm of instagram meaning they have to constantly engage. As aforementioned, this is something Phantasia are tackling with their product.

Distractions:

‘I don’t like to see too much information, especially when it’s really text heavy’

  • 4/12 mentioned a frustration at distracting information, and that they need to be able to process the information as quickly as possible.

Personas

With this good understanding of our user, their needs and pain points, we went on to create two personas.

User Journey Map

Focusing on Lily as our primary persona, we created a user journey map in order to recognise frustrations for Lily and highlight areas of opportunity. We recognised in this case, they both are that Lily needs to sell more art so that she can quit her day job.

Phantasia

Problem Statement

'Lily is a painter who needs more advice and knowledge on how to utilise data of her current sales, promotion, community and market, so that she can sell enough art to quit her day job and paint full time.'

How Might We...

  • Visualise the useful and relevant information in a way that is actionable for Lily to improve the sales of her paintings.

  • Support Lily by providing data that evokes a sense of achievement and personal satisfaction, so that she is encouraged to continue painting and is able to give up the day job and earn a living from her passion.

  • Provide Lily with control to manage which information is most useful, to enable her to better tailor her products for her market.

Design Studio & Sketching

To facilitate brainstorming ideas we organised a dynamic design studio with the CEO and the CTO of Phantasia, where we did two exercises; Bad Idea Party (as a warm up) and Crazy 8’s. From this session we generated two key ideas:

  • Displaying the data and statistics as widgets of varying sizes depending on the level of detail Lily would like to see.

  • Incorporating a ‘drag and drop’ function for these widgets so that Lily can change what she wants to see on what day.

With these ideas generated from this session we started to sketch out some wireframes, including the widgets which would hold Lily's data, shown below.

Low to Mid Fidelity Prototype Usability Testing

Phantasia

Xavier then mocked up a low-mid fidelity prototype, shown here, whilst I continued to sketch out the rest of the widgets. Combining the two meant we were able to conduct some usability testing.

In this round of usability testing we tested the prototype with 6 users and had 3 main points we wanted to validate:

  • Can the user easily understand the widgets?

  • How intuitive is the layout of the dashboard, ie. the drag and drop function to add a widget?

  • Are the widgets shown by default what you expected to see, is there anything else you would expect to see by default?

Results from the round were as follows:

Image alt tag

‘I would expect being able to add widgets by clicking customise’

Two thirds of users tried to click the ‘Customise’ button when asked to add a widget to the board, rather than the ‘+’ allocated area to do so, as the similar labelling of both is misleading. So going forward we will adjust the ‘Customise’ button to be ‘Edit Widgets’

Image alt tag

‘It feels natural to click those dots to bring up more information.’

Two thirds of users were expecting that by clicking anywhere on the card they would get more information, however then 3/6 of those users then opted to click on the three dots, expecting not only to see more information on the widget but also the ability to delete it. We opted to include this in the next prototype and to test it.

Image alt tag

‘I don’t really understand why they are there if they aren’t taking me to the other page… ’

Half were confused by the three dots at the bottom of the dashboard, which were used to indicate to the user the page they were on. Moving forward these will be removed unless more pages are required.

Image alt tag

‘I don’t understand the community feature, so I don’t really understand what I’m trying to see.’

Half were confused that the tab was labelled just ‘community’ as this doesn’t necessarily suggest that it contains data surrounding your community. Going forward we will be incorporating the word dashboard so it is clearer.

High Fidelity Prototype

After updating the design library with additional colours and finalising the design of the widgets we went on to produce the high fidelity prototype, shown below.

Usability Testing

In this round of testing, we tested the prototype with 7 users, including a section that focused solely on the smallest widgets, to ensure optimal legibility.

Below demonstrates the key findings, and the images demonstrate the suggested design changes from these findings:

Image alt tag

‘The grey colour to me makes me think I haven’t unlocked those pages or I don’t have access yet, like in a video game…’

  • 4/7 users didn’t realise you could click on the other tab, sales & promotions. Therefore the grey colour used on the inactive tabs signifies that they aren’t clickable. Going forward we changed the grey to an allocated colour but with a lower saturation.

Image alt tag

‘I’m not sure where I’d click to add something to be honest, nothing is jumping out at me.’

  • 4/7 struggled to locate the ‘Click to customise’ box, so we opted to make it bolder and more obvious in terms of contrast and the illustration used behind, thus also making it more accessible.

Image alt tag
  • 3/7 struggled to see how to delete the widget after clicking ‘Edit Widgets’ as the minus symbol confused some users, so we changed it to a ‘X’ and changed the colour to red. This made sense especially considering this is the iOS icon for deleting, and we were heavily influenced by this.

Image alt tag

Some insights we found that are noteworthy but are less of a priority include:

  • 2/7 users mentioned the desire to move the tabs around, as they are sellers and wanted to see the ‘Sales’ dashboard first.

  • An onboarding to make the whole experience more seamless for Lily the first time using her dashboard.

Next Steps

With these insights implemented there are a few things we felt could be further tested to ensure we have validated all iterations:

  • Testing the specific iterations mentioned above and of the onboarding.

  • Testing specifically the placement of the ‘Help & Advice’ section, to ensure Lily can understand the data fully in order to optimise sales and grow her community.

  • Exploring the possibility of adding the ability to further customise your dashboard in terms of colour scheme, and perhaps the option to create a personal tab, in which Lily can include data across all three pages of the dashboard.

  • Clarification on if having both an ‘Edit Widget’ button is necessary along with the three dots on the top of each widget, as ultimately they offer similar functions.

Reflections and Learnings

Our final iteration answered the brief as we produced a dashboard design that effectively presented the necessary data to the user in an informative and engaging way, so that they can improve their sales, community engagement or promotions on Phantasia.

We were really happy with this final outcome and were undoubtedly pleased that our client felt the same. Personally I found this project really interesting to work on, but it goes without saying I was intimidated at first because dashboard design is something that challenges even the most seasoned designers.

During this project, I found I have strengthened my research and interviewing skills and also gained a good first hand experience of working with a design library. On top of this, I feel I am much stronger working in a group, with important learnings like sharing ideas or sketches even when you’re not 100% comfortable with them at their earliest stages, as it only helped our team move faster and more efficiently the more open we were with our ideas. Furthermore, I found out that I took a natural liking to facilitating meetings with the client and ourselves, with my peers agreeing that I took to it well.