Published 20 March 2022
Jenius CoCreate Revamp Competition
Jenius Co.Create that it is a platform that encourages their users to actively co create and collaborate for making innovation for its services.
Research
Design
Testing
Role
UXUI Designer (Designing)
Scope
Brainstorming, Define, Ideate, Design, Test and Iterating
Project Objective
To initiate user to signup to jenius To educate user about financial service (Jenius) To build a space for user to hangout and discuss To engage new user and maintain existing user
Timeline
25 Nov - 24 Feb (14 weeks)
Project Overview
This project was for Jenius Co.Create Website Revamp Competition. The objective of this project is to engage Jenius user to actively contribute in cocreating on Jenius Co.Create with ease. However, due to certain circumstances, we (me & my team) decided to not submit the design until the deadline day.
Introduction
This project is for Jenius Co.Create Website Revamp Competition. Our objective is to have an intuitive, ease of use, and appealing website. The tools that we mainly used are Miro, as a tool to brainstorm, make initial pain points, and initial user flow. We did all the planning stuff in Google Spreadsheet and Notion. Then, Figma as a design and prototype tool.
Design Process
In this case study, we used a design thinking framework as a tool in the process. Design thinking is a human-centered approach to integrate a product to provide possibilities and user need
Image of Design Process
Discovery
We started by asking ourselves several questions,
  • What is Jenius CoCreate about?
  • Who is possibly the user?
  • Who is the Competitor?
  • What are Pain Points the user experienced?
Then, we continue to explore anything related to the Jenius Cocrate by having observation and an in-depth discussion along the way over the Jenius Co.Create Website. We observed Jenius CoCreate through Google search to find related news articles… for later to conduct a competitor analysis.
Jenius CoCreate is a community website for anyone especially today’s digital savvy society to sharing knowledge about tech,creative and finance. CoCreate has many features some of interesting ones are CoCreate Blog, Discussion, Challenge and Ideas.
— From Tempo
Define
Target User
People aging around 20–40 years old from university students to professionals who are tech and digital savvy.
User story
The purpose of this step was to maintain the problem user-centered, actionable, and clear. This process feels necessary as it establishes clear boundaries to focus on user goals.
Image of General User Story
Pain Points & How Might We
In this phase, we position ourselves as a user. We tried some of the features of Jenius Co.Create Website and outlined some notes throughout this phase. We had an in-depth discussion about our perspective and experience of using the website.
Image of Pain Points
Ideate
Site Map
Before we created user flow, we organized the pages into hierarchical diagrams in order to show how the pages are prioritized. We have four main pages that we have to design including homepage, events and webinar, article, and forum.
Image of Sitemap
Userflow
After building the site map, we proceeded to create a user flow which is a path that users take through the website to achieve their goal. In this process, we segmented user flows for the end goal of each section. Then, we brainstormed and organized some set of steps so users could interact with the website effectively and efficiently. During the process, we tried to make the journey effortless by considering users undertaking no more than 3 clicks to achieve their goal. We noted some of the goals or activities that the user can do in Jenius CoCreate as a reference for making an Userflow.
Image of What can we do
Example Userstory for Writing an Article: As a Content Creator, I want to share my story of overcoming poor arranging financial planning, so I can get feedback or help others if they are struggling with the same issue:
Image of Userflow
Wireframe
The next process was creating an initial blueprint or wireframe for desktop, mobile, and tablet design. User flow that we developed became our reference to design the wireframe. Creating the wireframe helped us to organize the functionalities of each design. Through this process, we expected to build an easy-to-use platform, yet appealing to the eye.
Image of Wireframe
Prototype (Mockup & Prototype)
UI Guidelines
As our principles are to keep the design consistent, we created a UI foundation guidelines before we can start working on the HIFI. We begin with the basics, such as defining colors and font for items that are consistent with the brand. Jenius Co.Create has its brand color which is #00A0DF (pacific blue) and we’re using this color as a primary color in this project since it’s already been decided. We combined #00A0DF with #FFFFF (white) as the background and #FF8300 (crayola fluorescent orange) as the secondary accent, while #002533 (black pearl) is for the text.
Image of UI Guideline - Color
For typography, we decided to use Poppins for the typeface which Jenius Co.Create has been using since it matched the logo and design. As for the icons, we used mostly Fluent UI for primary icons and Bootstrap for decorative icons which both have rounded corners. We decided to use these icons because rounded corners are ‘easier on the eyes’ than sharp corners.
Image of UI Guideline - Typography system
Prototype
After feeling complete with the user interface design, the next stage is to create a prototype to test the design.
Link to Prototype
Test (Deliver - Moderated Testing)
Guerilla Usability Testing
What is Guerilla Testing? It refers to a means for evaluating a design or prototype by asking random participants to test quickly and at a low cost.
Test Objective
The process is done to validate whether the design that has been made can be a solution to the pain points that we had defined at the early stage. In this phase, we conducted usability testing to validate the design that we have created, then proceeded with an online survey with a respondent to find out their experience with the app. The users went through nine tasks:
  • Comment an article,
  • Like an article,
  • Create a thread,
  • Write an article,
  • Read an article,
  • Scroll post through home,
  • Bookmark an article,
  • Log-in via social account,
  • Join event or webinar
We used a cheat sheet to conduct the interview, we reference our cheat sheet based on this usability interview video by Steve krug.
KPI(s)
  • Time on task
  • User Error rates
  • Drop-off rates
Test Form Scenario
In this step, We set up a task scenario for the user to carry out the user flow. We arrange the task based on a scale of 3 to 1 prioritization. When making this, We think to prioritize the test for the main feature and common tasks, especially in the What we can do. We’ve come up with the task scenario as below:
Image of Testing Scenario
Interview Content
  • Pre-test (Introduction)
  • Screening (User Interview)
  • Usability Testing
  • Post-Test Questions
Findings
After conducting usability testing, it’s time to process all of the data we’ve gathered during the sessions. The objective is to decide, prioritize and review the data for generating action items. In this phase, we reflected the project objective with the data from the user feedback to later take action and improve the UI/UX in the design.
User Persona
We've conducted usability testing interviews with 3 participants randomly. We blend the user persona based on the data of gender and characteristics of the users.
Image of User Persona
Iteration & Final Test Design (Unmoderated)
I wanted to test (again) the final design after the iteration to know how’s design changes for the user. For this test, we used Maze to facilitate usability testing. I learned from the previous testing that the user spent a lot of time talking rather than focusing on the design task (I want to limit interaction with the user as much as possible). Also, I only test the design iteration as follows:
  • Login Page - Social Log-in
  • Forum Page - Writing Page
I asked several people(mostly my friends), although they say ‘yes i’ll do it later’, as i write this article, only 1 person done the test thus the test doesn’t meet the requirement of minimum 5 participants to uncover common problems and to sufficiently learn how the design performed.
Image of Action Table
Check the test here, still live:
Link to Maze Testing

Result

  1. Login Page - Social Login
I discovered from the heatmaps that the CTA-Button was spot on. Although this mission is pretty simple to accomplish (2 click), the user completed the task in indirect way and took longer in the first screen(30s) and second screen(98s). The error rates is 8 misclick. From this behavior, I assume the user feels unsure or confused about the scenario.
Image of Design Test 2 - Heatmap Tracking Task 1
2. Forum Page - Writing Page
In this task mission, the user tend to explore the prototype rather to complete the task. The user took 124seconds to complete this task. The error rates is 16 misclicks. Same as previous task, from this behavior I assume the user also feels unsure or confused about the scenario.
Image of Design Test 2 - Heatmap Tracking Task 2
Thankyou for reading till the end 👋, have a great day!
Closing Remarks
This project was a blast to work on. We enjoyed a great time (literally; took so long to complete) working on this project. Although we're first-timers, We've acquired new skills, fresh perspectives, and experience while also remaining productive in brainstorming with my team.
Demas Bermani Surya
Aspiring UI/UX Designer
Copy link