Design Process

My role in this process was UX researcher & designer. I led the design from structuring user research to the final design. Overall, we started with a series of user research including user & stakeholder interviews, prototype testing, persona building, and value proposition mapping. We also host an ideation workshop to get border ideas before the final design.

1. Interview & Prototype Testing

In order to understand the users' need and the stakeholders' attitute, we conducted 5 user interviews and 2 stakeholder interviews.

On the Users' Side :

To help us build empathy with our stakeholders, who were also the engineers, we not only asked questions about the users' experience, goals, points of view, and painpoints, but also asked their opinions about the prototype based on the stakeholders' thoughts.

—— Key Insights

1. In general, the users are sick of too complex UI. The most situations they've met are "feeling tired with too many functions to learn" and "couldn't find one specific function immediately."
2. Following the above, however, it doesn't mean the users don't want a multifunctional platform. Instead, it's even better if there is a quick/efficent way such as templates for different purposes.
3. For some experienced coders, instead of hosting their websites by paid PaaS with limited quota, they are more willing to use their own Network-attached storage(NAS) as the server.

On the Stakeholders' Side :

To make sure our solutions could align with the stakeholders' goals, the questions were mostly asking about motivations, goals, constraints, and expectations for the project.

Screenshot of online user interviewing

2. Persona & Value Proposition Mapping

Three user personas were bulit accroding to the behavior variables, which were summarized from the interview data. Considering their goals, behavior variables, and the scenarios we learned from previous studies, we regarded two of them were "primary persona," and another one was "served persona."

After building personas, we used value proposition canvas to see if the values of the product and the values that users needed could fit each other. Based on the above information and disscusion with the stakeholders, we eventually extracted two key HMWs:

How might we make the design clean and simple with user-friendly flow ?

How might we help our users create an app intuitively ?

Value Propositoin Canvas

3. Design Workshop

I was the host who led the workshop and from warm-up, brainstorming, ideation section to sharing time. The result of the workshop was a collection of ideas about the solutions to our key HMWs.

—— More Details

We recruited 10 PaaS users and separated them into 2 groups by a questionnaire beforehand. The questionnaire was made to see if the participants' personalities were more like the first group(平台背包客-oriented) or the second group(社群學習活躍者-oriented). It was a 2-hour-long workshop held on Butter, an online meeting platform, and Miro, an online collaborative whiteboard.

Step 1. Intro & Warm-up Activity

To give the paticipants ownership and warm them up for the next part, we firstly told the participants our story about this project, and then warmed them up by an exercise that asked them to write down user painpoints and needs from one specific scenario we gave.

Screenshot of the workshop in the beginning

Screenshot of the workshop while using Miro

Step 2. Crazy 8s

To get more design ideas from the participants, we made two rounds of crazy 8s with the rules that the participants had to write down one idea/solution in every minute. We led the discussion and voting section after each round to let the participants understand more points of view and get inspired.

Screenshot of the crazy 8s canvas

Step 3. Ideation Sketching

To see the participants' UI perference without abstract concepts, we used a canvas which had a set of UI components for the participants to make their design ideas visualized.

Screenshot of ideation sketching co-creation

Step 4. Sharing

To ensure that we are on the same page regarding the result of each group, we invited the participants to share their ideation sketching and made further discussion if needed.

Screenshot of ideation sketching co-creation

4. UX Flow

After two meetings with the engineers for modifying the flow chart, we ended up using this version of UX flow as the reference when drawing the wirefarme.

UX flow chart of CScloud

5. Wireframe

Based on the previous information, I made this wireframe after three revisions.

Wireframe of CScloud

6. UI Design & Prototype

The UI design was our final solution which were already shown on the upper part of this page. I made it an interactive prototype with the help of Figma.

CScloud Demo

Result

The stakeholders were glad that our design met both the users' and their goals. Moreover, they are willing to make iterations if needed. As for the real-world impact, since the platform is still developing now, it will be seen in 2-3 months.