SUMMARY PROBLEM SOLUTION PROCESS RESULTS CODING CONCLUSION

SUMMARY

ShareSpace is an SaaS (Software as a Service) web application providing users with a convenient way to collect and store information. Users can save images, links and notes to organize into specific folders that can be shared with collaborators. Specific individuals can also be invited to view, edit or comment on files when working on a team.

PROBLEM

With the advancement of technology the need for mobile collaboration tools are in high demand. Many free services, such as Google are now providing methods for coworkers to collaborate and share information across different devices. Due to the increasing presence of such powerful tools, competitors do a poor job presenting their service to new users. Technical jargon and foreign terminology detract users who are unfamiliar with company services. At the same time, companies provide similar features and UI, which lead to low visibility.

SOLUTION

ShareSpace closely examined user experience and created a tool that is approachable and easily digestible by all users. With convenience as its priority, ShareSpace utilizes social media platforms for account accessibility with the ability to upload and save images, notes and links across multiple devices. Files can be shared with peers or edited by other ShareSpace collaborators. All users can start off with a free account and toggle between different priced accounts at any point in their subscription.

THE PROCESS

During this planning phase, I used interviews and user surveys to become familiar with potential users and determine their requirements. I created a survey with Google Drive, which was posted on social media outlets and online forums focusing on the users' behaviors, their need for ShareSpace’s services, and basic demographic information. Through the user survey I wished to understand:

  • How users interact with their devices.
  • If they write and save notes to remember things later.
  • About the tools they currently use.
  • If they save content.
  • If they collaborate and share resources with their co-workers.
  • If they use social network logins to sign up for websites.

The responses that were gathered from this user survey resulted in 14 submissions with all users being a student or engineer working in the tech industry. These results helped better understand the type of service and brand identity ShareSpace needed to provide to its users.

  • 85.7% of users typically used their smartphones to browse the Internet.
  • 78.6% of users typically used their laptop to browse the Internet.
  • 92.9% of users claimed to save links or images they find online for later use.
  • 78.6% of users used their bookmarked interesting content through their browser.
  • 86% of users stated “convenience”/”easy to use” as the main reason for using tools to save content or write notes.

Based on these responses, I was able to determine that ShareSpace needed to be a responsive platform accessible by multiple devices, since a majority of respondents used smartphones and/or laptops to browse the Internet. Many users also voiced bookmarking items through the browser to lead to clutter. To solve this issue, it was important to add organization as a feature within ShareSpace.

PERSONAS

In order to further validate ShareSpace’s services, I created personas from interviews with potential users of the product. By learning more about the users on a personal level, my goal with these personas was to develop empathy for the users and understand how they will interact with the application. You can take a closer look at these personas here.

COMPETITIVE ANALYSIS

As a tool for saving and sharing information, ShareSpace had many competitors to learn from. By examining companies, such as Minbox, DropBox and Hightail, I administered a SWOT analysis to create a service that would benefit from other companies’ shortcomings. You can take a closer look at the analysis here.

The SWOT analysis showed many similarities in the features that were provided by competitors. It was evident from this analysis that most companies tried to become independent from other competitors with personal terms and icons for specific features within their product. However, in doing so it seemed to create confusion for new users approaching the website. Therefore, it was clear that ShareSpace could benefit by identifying as an easily approachable website that promotes new users.

USER FLOWS

With the research and competitive analysis I was able to determine a list of user stories that helped create user flows. I focused on the main tasks of ShareSpace users and mapped out the user experience for new and returning users. The flows built through this process helped in building an MVP for ShareSpace.

CREATE A BRAND IDENTITY

With ShareSpace going off the image of a professional product used for collaborative work, while also appearing friendly, the typeface, color palette and logo were all features with high priority before wireframing the mockups for testing. I wanted to use two typefaces to create a distinction in headers and body text, but keep the overall appropriateness in mind. After careful consideration, I decided to use Montserrat as the typeface for headers and Domine for the paragraph. These typefaces are appropriate for ShareSpace since they satisfy the image of the application being professional, but also playful. The user created the typeface to be friendly in appearance to make it easy to read. The short serifs in Domine along with its rounded letters make it a good pair for a sans serif typeface like Montserrat, but still distinguishable. Both typefaces have great kerning with equal distribution between characters. Letters, such as "y" or "Q" with strokes that protrude out of the center of the character are more compact in Montserrat and Domine making it more balanced. Most of ShareSpace's competitors use very rounded fonts, such as Avenir. By using a display typeface that is more subtle in its rounded letters, it can help distinguish ShareSpace from its competitors. Next, I needed to choose a color palette to incorporate into ShareSpace’s different mockups. For this portion of the brand identity I've decided to choose a bluish/ greenish monochromatic color scheme. Blue makes our interface look professional, but can seem cold. By choosing a shade of blue that borders green, readers can be more relaxed. Studies also show green to even improve reading ability. Take a closer look at ShareSpace's style guide here.

For logo design, I kept the “less is more” principle in mind and designed a mixed logo utilizing a logo and logotype. I stuck to using one color to support scalability and flexibility, while keeping ShareSpace’s purpose in mind to reflect in its logo.

After creating three different versions of the logo that best captured ShareSpace’s brand, I used negative colors to see which design worked best with contrasting colors. The first two used solid blocks for the bottom or top, which created an imbalance in the overall image. To balance the focus on the entire icon, the third design did the best with different sizes and colors.

LOW FIDELITY WIREFRAMES

Incorporating the qualities defined through brand identity, I created low-fidelity wireframes to test on Peek to see whether the product’s purpose and navigation was comprehensive to users. At this stage I did not include colors or images, but kept the wireframes simple using the user flows as a guide. Once the designs were finished, I created a low-fidelity prototype for testing through Peek.

HIGH FIDELITY WIREFRAMES

After going through user tests and making iterations based on feedback, I used Photoshop, Illustrator and Sketch to add more aesthetics to my wireframes and create mockups for a prototype. I then asked users to navigate through the prototype and provide feedback. From this process, I realized users had a delayed experience adding content to their dashboard. In order to solve this issue, I set two different placements of the add button on my dashboard page for a preference test.

TESTING #1: PREFERENCE TESTING FOR ADD BUTTON POSITION

Based on Usability Hub, version two worked better with a success rate of 60%. However, the individuals that selected the second version took a longer time choosing it as their preference compared to version one. The test also had a small sample size, which may not reflect an accurate representation of users' preference.
After using the second version of the mockup for a Nav Flow Test, most users understood the placement of the plus icon to be the successful click in adding content. However, the completion time for the second version was on average 3 seconds longer than the first with users responding with more uncertainty when pointing at the plus icon in the second version. Therefore, it was safe to conclude that the design for version two was more aesthetically pleasing, but version one showed more positive usability. In order to ensure smooth navigation, I moved forward with the first version.

RESULTS

The finished prototype was shared with potential users to verify whether the decisions made from research to prototyping were justifiable. Testing multiple times at every stage helped create more intuitive design flows. It's good to look nice, but if it doesn't work, pretty isn't enough. It was at this stage some users suggested the option to view content in a list form. Although the box view works better for dashboards with limited content, longer pages would be difficult to parse through. This feedback once again helped improve ShareSpace to fit the needs of potential users. The final prototype made sure to include a list view for dashboard as well as the default box view.
You can check out ShareSpace's interactive prototype here.

CODING

HTML/CSS and JavaScript were used to bring the homepage and dashboard to life. In order to ensure users could access the product on different devices, the experience was coded to be responsive.

You can also check out the dashboard experience for ShareSpace here.

CONCLUSION

This was my first project going through the different steps as a designer. Although there were many instances when I wanted to follow through with intuition and put priority on design iterations that I thought were aesthetically pleasing, I have learned to humble myself with countless user tests. Overall, it was a great learning experience where I’ve found the importance of forgoing something that may be more visually stimulating for the sake of usability. This project has definitely made me a stronger designer that relies more on data and research to gain the perspective of potential users.

GET IN TOUCH

Want to talk about UX? Or have any questions?
Send me a message.