A UX/UI Look At Swae — The 21st Century Suggestion Box

UX/UI Case Study

For this project, our team consisted of two UX designers, and two UI designers to try and tackle our client’s pain points.

What is Swae?

Swae was founded by Soushiant Zanganehpour originally as a platform to empower those that do not have a voice and to disrupt the current decision making system. It’s current role is two fold: Empower those at the bottom by helping them pitch better ideas and secondly, help those in the decision making role to more easily sort through these ideas to get a better understanding of the overall environment. Think of it like a 21st century suggestion box driven by artificial intelligence.

The above illustration shows how Swae assists it’s users to go from simple idea to a powerful proposal and how that translates into collective decision making.

Swae’s beta was built on native ios

Swae already has a mobile app in beta testing with clients world wide but had asked our team to take on a fresh perspective and see how we could improve their platform.

The main takeaways during our client kick off meeting was to incorporate anonymity, secure login and to incorporate some sort of user voting/polling system. It was also stressed that the end product to not be a widget, but to build a tool because they had felt that the platform would be too complex to be a mere add-on to an existing system.

Key Research Insights

Where To Start?

Working with this information our team set out to look at what was available and see if we could narrow down the scope of our project since our timeline for this sprint was only 3 weeks. The UX team quickly created a survey and lined up interviews to gather more insight to where we could create the most value.

Moving From Mobile To Desktop

A large finding that came up was the environment users were in. For the most part, many users were on a desktop the majority of the day while at work. While they still used their mobile devices, it was mainly for checking for notifications and emails while not at their desks and if any action was required, they would make note and address it when they were back in the office.

Most users research their ideas on a desktop/laptop environment because it allows them to digest large amounts of data and having multiple touch points at one time (ie. switching from different internet tabs)

Also, taking a look at their current task analysis, when inputting an idea, the user has to go through a lengthy process of short and long form questions, multiple choice and link/file queries. While having some interviewees go through this process, it was apparent that answering these questions on a desktop environment would be more efficient and have a better user experience.

Current beta screens on Swae’s mobile app (via typeform)

Task list of Swae’s current idea questionnaire

Since this form is the starting point for many users, it made sense that we focus on making this form more user friendly and one way to start that process is looking at it through the perspective of a web application instead of a native (mobile) app.

Another problem that arose during the testing of their beta was that if the user was interrupted to do other work, or if they received a phone call and the user exited the form, there was no way to save their work and would consequently have to start from the beginning all over again.

Major negative pain point when user loses work due to interruptions. Also note that there is a pain point when it comes to some multiple choice sections, but that can be addressed independently as it is a quick form change from “select one” to “select all that apply”. Taken from a customer journey map.

Scaling Back On Anonymity

One of the areas our client wanted us to address was the idea of creating a way for users to post and comment anonymously. However, during our research phase, we found that while users said that giving ideas would depend on the actual idea, giving and receiving feedback was strongly favored knowing the identity of the user.

Survey results showed a large favor towards knowing the identity of the user giving that feedback

This idea was further reinforced during the interview process where a theme of trust and credibility arose as some interviewees noted that there was a side effect in the form of trolling or having non-constructive feedback.

“Being able to trust someone who is credible is extremely important…”
- Fred B.

“Anonymity has the side effect of “trolling”, people complaining with no strong arguments, or writing in a tone that’s not professional…”
- Guido W.

This led us to believe that while anonymity should be an option, it shouldn’t be the most prominent feature of the web application and also, that we should look further into the idea of nurturing trust and credibility.

Looking For An Aesthetic

Our UI team, Emma and Pauline took this time during the research phase to probe what mood and feeling this platform should have. They led our client Soushiant in through variety of aesthetic visuals in the form of a ‘gut test’ to get a general feel of what kind of art directions they should go in.

Section from the UI gut test that our client found pleasing due to it’s simplicity, playfulness and inviting aesthetic.

Our UX role in this exercise was limited in the creation of the gut test but we did assist in helping bounce ideas for defining the overall look and feel in the later stages.

Another gut test done, but specifically for logo direction

Other Key Insights

Affinity Diagram Patterns & Trends

1. Support and evidence are key to successful proposals

2. Time & energy consuming to create strong proposals

3. Accountability needed to minimize non-constructive opinions

4. Most users mainly on desktop at work

5. Companies are open to new ideas, but struggle with filtering proposals

The Design Challenge

Defining The Why

Our research uncovered that this wasn’t necessarily an individual or organizational problem, it was a systemic problem. Companies were open to change and were always looking to optimize on workflows, but ran into many problems implementing and organizing it. This led to some companies adopting a whole new way of organizational governance which is reflected in our “Why” approach below.

“5 Why’s” approach broken down into layers where it starts at the top and moves deeper to find the root cause

Essentially the logic behind our why was that there needed to be a system wide change in thinking and that challenged the current way of doing things.

Narrowing The Scope

Initially, our client had target demographics in government, home owner associations and tech companies however with consideration of our project timeline, the scope was simply too wide. Our team decided to focus on tech companies because this platform was relatively new and was in need of early adopters. Since Tech companies on average were naturally more open to change than other organizations such as government entities, it made them a logical choice when making our design decisions.

User Persona

Enter Felicia, our user persona. In order to get a better understanding of who we were designing for, we created Felicia as a way to focus our design decisions to ensure that the problems we were solving for held value for the user.

Storyboard

1. Felicia has an idea to better improve the company
2. However, it’s hard to balance creating a proposal and her current duties at work
3. Constantly facing interruptions, she finds it hard to build traction on where to start her research
4. The co-workers she’s collaborating with can’t find enough time to help build the proposal
5. She finally manages to hand it in the by the next manager’s meeting
6. Her proposal is turned down due to the fact that there wasn’t enough evidence and data and there wasn’t enough support for it

Use Cases

“As a user, Felicia wants to send her proposal out so that she can get feedback from the community”

“As a user, Felicia wants to build on her ideas so she can influence her managers to implement positive change”

Customer journey map to show pain points and potential opportunities

Idea Questionnaire Flow

One of the main areas our team focused on was the way users navigated through the idea questionnaire. A main pain point was that it seemed rather long so we decided to chunk the ideas for better flow. We applied a card sort on the existing questions to see how users would sort the questions.

Abby testing users on the sequence of questions in Swae’s current idea questionnaire

Key Takeaways:

1. Chunking sections together made it easier to work with
2. As users filled out their ideas, they felt the need to jump back and forth between questions to further flush them out because they didn’t consider them

Combining Business Goals, User Goals & Project Goals

Prototyping and Testing

Design Studio

Both the UX and UI team sat down to try to come up with layouts that could serve as a potential solution for the new web app. We knew that it would be a dashboard of some kind, but went through a few ideas until we landed on a tabbed layout at the top, complimented with a sidebar. This allowed for two way navigation to allow the user to ‘toggle’ between main elements without loosing their work. It’s also important to note that an auto save function would be prevalent to ensure minimal data loss.

Moving from low fidelity to mid fidelity prototypes

For our low fidelity prototypes we wanted to create a dashboard setting where users could move back and forth as they were filling in content from the questionnaire.

Left — lo-fi prototype | Right — design studio sketches

As we tested, we noticed that this platform was a relatively new concept and needed a way to help users with using the system.

Key takeaways:

1. Need for an on boarding pop-ups to guide new users
2. Keep layout more consistent due to large amount of information

Commenting/review screen — moving from lo-fi to mid-fi

Idea questionnaire screen — lo-fi to mid-fi

From our key findings during the testing phase, we decided to create an on boarding process in where popups would add more guidance to the different functions that the dashboard would provide. These would disappear after a few visits, but could still be accessed through a tutorials page that would potentially be developed in further iterations.

Secondly, we moved some of our buttons to the side bar to make as many CTA buttons in one place as possible.

Hi Fidelity Mockups

New users would have pop-ups to help guide them through the website. These would disappear after a few visits, but would still be available through tutorials

Hi fidelity idea questionnaire screen

Hi fidelity comment/review seen — most buttons moved to side

Confirmation screen — incorporated a robot as a play on the AI portion

Branding

Main brand overview

Different components ranging from illustrations to colour palette

Future Considerations

1. Manager/decision maker’s point of view
2. Analytics
3. Chat function
4. Community section
5. Adding multiple collaborators on an idea
6. Addressing the culture of “bad ideas”

Personal Takeaways

I think for this project, definitely tackling a client with a very wide scope in what their application can accomplish was definitely an eye opener in that you cannot do everything in one sprint. Furthermore, being able to rely on my team, especially on the UX end helped me to grasp the “non-visible” side of the project such as project management and co-ordination.