Alice W. Leung

iMac CloudDesigner


Lo-Fi & Hi-Fi Prototyping, Usability Evaluation, Visual Design

Creators: N. Dozier, A. Leung

Project Overview

Product Concept

CloudDesigner is a crowdsourcing review system created to provide a tool for both designers and engineers to:

  • Upload their designs.
  • Share with the community for feedback and ratings.

This system is very valuable for users wanted to improve their designs by getting constructive criticism from other experts in the field. It will be a responsive web app (scalable to any device size between smartphone and desktop.

Intended Platforms
  • Desktop/Laptop: Primarily for creation and publishing of designs.
  • All platforms: Viewing, rating of submissions, and commenting on designs.


Market Competiton

Understanding our competitors and what we can learn from them
What we'd like to borrow:
  • Easy prototyping from Flinto App.
  • Crowdsourcing design feedback from Dribbble.
What set us apart

Clickable prototyping can be created within the crowdsource design feedback system.



Visualizing what a user would go through when using CloudDesigner.
1) Opening CloudDesigner web app

User want to get some feedback for the design he just created, so he goes on his desktop computer and click on CloudDesigner to access his dashboard page.

2) Uploading project

User clicks the "Upload Design" button to share his design.

3) Getting feedback from the community

Within 3 days, user receives comments and feedback from other designers on the CloudDesigner community.

4) Happy user

By the constructive criticism he received for his early design, he is able to iterate his next prototype design. User is happy because he was able to obtain quick results within a short amount of time.


User Goals & Requirements


What we want to test for

  • Number of comments
  • Number of errors navigating through the app
  • Amount of time to upload prototype

What experiences we want

  • It is easy to upload design (scale from 1-very easy to 5-very difficult).
  • It is easy to review feedback (scale from 1-very easy to 5-very difficult).
  • People feel validated by seeing feedback for their applications.
User Stories


  • As a designer, I need a way to upload my prototype designs.
  • As a designer, I need to receive feedback on my designs.
  • As a designer, I need a way to create a portfolio/profile of my work.


  • As a reviewer, I want to provide feedback and ratings on designers' work.
  • As a reviewer, I need to markup areas I am commenting about.
  • As a reviewer, I need to be able to browse projects.

Main Happy Path

Main Happy Path

Task Analysis

We created the main navigational path by breaking a task into smaller and manageable parts. This will be tested out to validate the proper sequence of the path.

Main Path

A user (who is already registered) would like to browse/view projects, click through designers' prototypes, and write a review.

1st Prototype (Lo-Fi)

1st Prototype (Lo-Fi)

Visit the prototype →

Usability Testing


To determine the value of the app, we want to know if the intended objective was easy to accomplish and the navigation was clear.

How we conducted testing
  • User were introduced to the application on what it is used for and its functional goals.
  • The user was asked to choose a project and write a review about it, starting from the homepage.
  • The users were accompanied by a moderator who would pay attention to measurable actions such as the number of errors made, and clicking on the correct pathway via link or picture.
Who we recruited
  • Engineers, Designers, Architects.
  • People who we thought would most benefit from this application.


What we learned about our users
  • Some users need a high-fidelity prototype to understand what they're clicking in.
  • All of the users except for one would use this app in real life.
  • 7 out of 7 users gave the app a high rating (average of 4.14 from a scale of [1-not useful] to [5-very useful] in terms of usefulness.
  • We cannot make the assumption that the user will be better at navigating the site due to his/her technical background.
Metrics-based Results
  • All users were able to successfully complete the task.
  • The difficulty ranged from 1 to 3 with an average of 2.33, on a scale from [1-very easy] to [5-very difficult].
  • The number of errors ranged from 1 to 3.
  • The majority of errors were related to navigation.
What we learned
  • The 1st prototype had a lot of ambiguity, and a lot of the names/labels are not clear to users.
  • The "Project Review" page needs to be re-designed in a way that makes it easier for the user to know what to do.
  • The button label needs to be more concise, the page needs to help the user better understand how to switch between project pages.
  • The navigation needs to be clear to users.
  • Users might be better served having a search function instead of a filter system.

2nd Prototype (Lo-Fi)

2nd Prototype (Lo-Fi)

Visit the prototype →
Updates after Usability Testing
  • Added login/logout functionality.
  • Different versions of the navigation bar are displayed based on login state.
  • Added error messages to the login form.
  • When user adds feedback, their comment is now displayed at the top of the list.
  • Added "success/error" message to that form.
  • Added a "Review" button under each project, so the user better understands how to get there.
  • Removed extra pages that were confusing the user.

3rd Prototype (Mid-Fi)

3rd Prototype (Mid-Fi) - Responsive

Visit the prototype →


Device Constraints
  • Device Name: Desktop Monitor
  • Viewport Size: 1024px (width) or greater
  • Input Type: Click

Context of Use

How will users interact with the app?

  • User will mainly use a mouse and a keyboard to navigate through the website on their desktop or laptop.
  • User will primarily upload their designs from their desktop/laptop. They can also view and comment on other designers' projects, since the website allows users to easily navigate through all the avilable features.

Where will they be?

  • Users would mostly be at work, at home, or at coffee shops using their desktops and/or laptops when they have time to browse through projects and upload their own.


Device Constraints
  • Device Name: Tablet
  • Viewport Size: 800px - 1023px (width)
  • Input Type: Touch

Context of Use

How will users interact with the app?

  • User will use their thumbs or fingers on their tablet to navigate through the app.
  • User can view and edit comments easily, but still has the option to upload their own projects from the tablet view.
  • As a reviewer, using a tablet will provide the similar functionality to a desktop, but less features as there would be no built-in filter function, still preview images of prototype, etc., since the screen size is smaller than a desktop.

Where will they be?

  • The tablet is much more portable than a desktop or laptop, and give them the ability to use it whenever and wherever they please. This adaptive view will be used in the library, train, school, work, home, restaurants, and shop, etc.


Device Constraints
  • Device Name: Mobile
  • Viewport Size: 375px (width) or smaller
  • Input Type: Touch

Context of Use

How will users interact with the app?

  • User will mainly use their thumbs and/or fingers to navigate through the web app on their mobile phones.
  • Most likely the users will view and comment on other designers' projects, rather than uploading their own designs on a mobile phone, even though they'd still have the capability to do that if they wanted to.

Where will they be?

  • Users would mostly be on-the-go during commute, waiting in line, or somewhere outdoors.

Final Prototype (Hi-Fi)

Final Prototype (Hi-Fi)

Visit the prototype →
Brand Identity

How we want users to percieve you

  • We would like our users to think that our company is insightful and resourceful. We are THE place to get the most abundant, useful, and honest feedback in minimal time without spending too much on usability testing.

How our product make users feel

  • CloudDesigner makes users feel comfortable sharing their work with the community. It encourages users to be open, honest, and respectful about their feedback to the designers. The user experience of browsing and searching projects, rating, and reviewing projects, as well as uploading projects make users feel satisfied to be part of the community.


What changed in this prototype

  • The color palette was updated from a bright blue/gold combination to a more mild and professional cyan-lime green color combination.
  • Images were added to simulate real projects that users would find in a design website.
  • Logo was added to enhance CloudDesigner's identity/brand.
  • All texts and labels have been updated from latin to english to simulate a real website.

How it will be used for usability testing

  • This prototype will be tested in both the tablet and the mobile view to find any additional errors associated with navigations with the prototype.
  • User will also be asked to resize their browser from a full desktop view to tablet or mobile view, and see how they feel about the responsive design of the prototype.


  • The biggest challenge was to make the starring system functional in Axure. Many participants were having trouble rating the design due to the non-interactivity of the stars.
  • Another challenge was to show participants that the design they are reviewing are clickable prototypes. This is a prototype within a prototype. Axure has a lot of limitations in terms of making designs interactive.
  • Login was also difficult for participants to see, and difficult for participants to understand the logged-in state vs. the non-logged-in state.
  • Thumbnail on homepage is not clickable. The user has to select the “review” link instead.
  • If logged in, the username should appear on the review form; user will not have to re-type their name.
  • Make the star ratings functional on the review form.
  • Change the comment avatar to a more generic / gender-neutral one.
  • Make the entire thumbnail for the prototype being reviewed clickable on the selection page.

Recent Works