Product Design
for Web 3.0
PROJECT
SUMMARY
Complete redesign (UX/UI + Branding) for an online whiteboard.
Title: Product Designer
Capacity: UI, UX, Branding
Year: 2021
RESPONSIBILITY
DOTSTORMING
Overview:
I had the opportunity to work an online whiteboard app called dot storming. The project lasted about 3 months and was done in collaboration with me and the wed developer. The project which initially started as just a UI overhaul eventually turn into something more substantial after running it through an audit. I realised there was more we could do to improve the product in a user experience standpoint after doing more research.
Research
I began by doing a competitor analysis to see how the current online whiteboard landscape was like. I looked at all their key features, branding, the ease of the UX and the feel of the UI. I also conducted a few interviews and surveys with some target users that included students, teachers and creative professionals. This gave me insight on their needs and how they interacted with online whiteboards.
Findings
Based on the interviews and research I found some key insights to help improve the product:
A lot of our users like to use the site for collaborative projects with other people, so It was important that our live chat function was easily accessible and clear to use. We also had to make sure that it was present at every key stage of the site.
Many of the users we interviewed said that the current navigation and how the different boards were set up took a bit of time to learn. They mentioned it was confusing as there were no visual cues to let them know what each board without having to open it up. This caused some time to be wasted which is bad for a productivity app.
Users also complained that the UI felt very dated and cluttered. They had some difficulty finding certain tools or even understanding what those tools did. We had some users who were teachers who used the site for teaching online classes also mentioned that younger students didn't feel so compelled to use the site because of its unappealing look.
Information Architecture
I did an audit on the old website and put it up against the criteria from the competitor analysis and looked at ways I could improve the site. One of the main points I found was that their UX was lacking in clarity despite the site being quite wordy. Users often got lost or confused when trying to find certain functions, tools, or boards. To help improve this I took all the key features and categories and performed a card sort.
From the results of the test I created a new hierarchy for the website as well as sorted out the tools needed for each type of board.
Wireframes
Wireframes were created based on the research. The walls and tools layout were also redesigned and updated to reflect what was missing in the previous site.
Before
This was the previous branding and site UI
From the beginning I knew that there was a need to refresh the branding of the site as it felt uninviting and technical, especially for the target audience they were trying to reach. This was further confirmed by the competitor analysis as well as a few interviews and questionnaires with their target audience. I chose to go with more playful color palette to make the brand more inviting and modern while still making sure it felt professional.
More than a facelift
Landing Page
I updated the landing page to highlight key features to so that new visitors can get a quick overview of what the site is about.
Dashboard
I updated the design of the dashboard to allow users to easily navigate to their active project boards or easily be able to create a new board from scratch or with preset templates. I added a workspace tab which worked like folders allowing users to organise their board into different categories of their choice. Within the Dashboard space, users could also view their profile, settings and manage billing.
Workspace
The interfaces of each of the boards were updated to provide an easier and clearer navigation. I created the layout of offer maximum space for users to create their work while having the navigation tab still easier to access but not in the way. We added key functions that help also help add more utility such as redo actions, live chat with project members and also quick links to share the board to others.
Walls
Walls are digital whiteboards that allow the capture, organization and prioritization of ideas through virtual stickies.
Canvas
Collages enable a group of participants to draw together on either the same or individual canvases in real time.
Voting Board
Voting boards are a quick and simple method for prioritizing a list of options that create a sense of engagement and allow participants to see the decision process in action.
Let’s talk?
Got a partnership idea, or a project you need help with? Shoot me a line and let's talk.
