OVERVIEW
ROLE
One Hour is a sprint project with 5 frontends and 1 designer. In a short period of 5 days, the idea, planning and conception, design and development were completed and produced in the form of a site.
'1hr' is a site where technical interviews are archived. It is a 'technical interview preparation' service that allows you to send and receive
'1hr' is a site where technical interviews are archived. It is a 'technical interview preparation' service that allows you to send and receive
UXUI
Service planning, design and prototyping
Sprint Project
2022.6.15 - 2022.6.20
Service planning, design and prototyping
Sprint Project
2022.6.15 - 2022.6.20
Google Sprint Project
Technical interview is essential in the developer recruitment process.
Junior level developers say that there are many services that can study coding, but there are not enough services to prepare for an interview. I designed a technical-interview archiving service with a quiz feature. All services were carried out in the Google Sprint method, and were completed in collaboration with 1 planning designer (me) and 4 developers for 5 days.
Collaborating with Devleopers
in a 5 days Google Sprint
In addition to the pandemic situation, we collaborated using figma to come up with a way for developers to plan and participate together. I used FIgjam to collect ideas and organize them, go through the design process, and finally completed them in the form of a web.
DAY 1
Team Canvas
The team canvas activity introduces who we are, the ultimate goal of our team and, what we value in order for us to be together, each other's strengths and weaknesses.
This process helps the team members to stay on the same page. For developers, it was a time to check each other's tech stacks.
4MAT
The 4MAT model is a framework for understanding the way organizations learn, grow and evolve.
As a result of discussing each other's ideas and thoughts, we narrowed our opinions and set our key features down to 'interaction', 'collecting questions', and 'review'.
DAY 2
Sevice Map
We were able to talk about the necessary devices, elements, and concepts through the 4MAT question. For the final arrangement, we had to make the necessary elements to connect the object-purpose-value and then cut it into pages to organize the journey. We shared our thoughts so that we could connect various opinions and thoughts into one. From this activity I was able to extract purpose and value.
Who is this service for
The target of the service is 'University/Junior students who do not know how to get a job', 'Developers/Juniors who want to study technical interview' 'People who want to check interview trends' 'People who want to feel proud by answering questions'
What is the ultimate purpose of a technical interview site?
I organized the purpose into ‘a web page where you can easily and conveniently check the questions from the technical interview for job-seeking developers who are preparing for the technical interview’.
What are the most important values that our service should implement?
Word Cloud
I created a word cloud through the advanced ideation, 4MAT, and target purpose value map. By emphasizing keywords that everyone agrees with, I prepared to reconfirm the ultimate goal and plan the service.
Asking the ‘How Might We’ question
Based on the service map and word cloud, the idea was carried out by thinking about the ‘delivery method’ in the middle of the map. After spending some time exchanging ideas on how to make it happen, we came up with a way to do this.
We grouped them in a way that provides UI, reliability, community/review, content-related, convenience/simple and others (ETC) as a way to capture value and purpose.
We grouped them in a way that provides UI, reliability, community/review, content-related, convenience/simple and others (ETC) as a way to capture value and purpose.
Service Concept and Goals
DAY 3
Sketch, Decide & Design
After breaking down the map we completed earlier into meaningful pages, sketching was a time to visualize our thoughts. It was a time to create a more specific image and come to an agreement while drawing similar thoughts.
Information Architecture
After completing the sketch, I organized the information architecture to organize the pages into services and what functions to include.
I was able to understand the scale of the service, pages and functions at a glance.
DAY 4
BDD (Behavior Driven Development)
Using Given When Then Method, functions are arranged according to the user's scenario.
Given: Set the value required to proceed with the scenario
When: Specify the conditions necessary to proceed with the scenario
Then : specify the outcome that should be guaranteed when the scenario is completed
You can arrange it with etc.
DAY 5
Prototype &Develop&Complete
Design Guide
Illustration
When using the learning service, it is easy to feel tired from boredom and the appearance of repetitive modules.
To relieve boredom, I made illustrations and used them all over the screen.
To relieve boredom, I made illustrations and used them all over the screen.
Service Value
We use bright tones as a whole, but color emphasis is applied to the points to focus on and elements that interact with the user.
With the possibility of using the service remotely anywhere in mind, the entire component was prepared as a UI in a form that can be produced responsively by woven into modules.
With the possibility of using the service remotely anywhere in mind, the entire component was prepared as a UI in a form that can be produced responsively by woven into modules.
MainPage
1hr's main page consists of a box introducing the service, content that indirectly exposes the service's main functions, and 'this week's hot issues' that users may be most curious about. Since users are all who create and consume content, it was necessary to activate the community.
In order to encourage users to ask questions and answers, we used the ‘Hall of Fame’ to expose the IDs of users who wrote the most sincere answers.
In order to encourage users to ask questions and answers, we used the ‘Hall of Fame’ to expose the IDs of users who wrote the most sincere answers.
Search
The main killing point of 1hr is tag management.
A different tag management system was applied for each category of learning.
A different tag management system was applied for each category of learning.
Start Learning
'Learning' is an archive of technical interview questions and answers by category.
You can check the content of users who have uploaded questions and answers.
If you save as a bookmark, you can check the saved questions in Bookmarks in Review.
You can check the content of users who have uploaded questions and answers.
If you save as a bookmark, you can check the saved questions in Bookmarks in Review.
Categories
There are five main categories of technical interview. Front-End, Back-End, Dev Ops, Mobile and Data Science.You can browse the categories you want using the sidebar
Upload Questions
This is ‘Writing’ where you can record the interview questions and answers you practiced or actually received.
Set large categories and write questions and answers there is.
Set large categories and write questions and answers there is.
Bookmark
It is a 'bookmark' where you can record the questions you are interested in and save the questions you have created.
You can review the questions and answers in the saved bookmarks in ‘Solving Exercises’.
You can review the questions and answers in the saved bookmarks in ‘Solving Exercises’.
Practice
This is the ‘practice problem solving’, which is the core function of ‘1hr’ that allows you to review questions.
If you specify the tags you want to review and set the solving time, you can practice writing down answers within the time limit.
If you specify the tags you want to review and set the solving time, you can practice writing down answers within the time limit.
Use Timer
You can set a time limit for when you need to answer questions to keep you as tense and focused as in a real job interview.Set the timer before solving the problem set and time I have to type in my answer, and as the end time approaches, it will show the time is imminent.
Test Review
After answering all prepared questions, the best answers answered by other users and the answers entered by the user are displayed together.
Users can gain new insights by comparing how they and others have given different answers.
Users can gain new insights by comparing how they and others have given different answers.
⇊ Demo Video ⇊
Other Pages
We have created a page so that users will not be embarrassed by a blank page even if they encounter a problem while using the page.
When an error or issue is exposed, the reason and illustration of the problem appear together.
When an error or issue is exposed, the reason and illustration of the problem appear together.
Mobile
All pages are responsive.
It is made in the form of a card, so it is easy to transform, and the simple UI is designed to minimize the distraction.
It is made in the form of a card, so it is easy to transform, and the simple UI is designed to minimize the distraction.
Achievement & Reflection
Next Step
Upgrading service and a new launch
After a tense five-day sprint, our team launched the service on June 21st. I did a user test at the end of the sprint. Though the service was completed in a short period of time, users gave a lot of corrections and ideas. All team members felt the need for upgrade, so we decided to launch a new version by upgrading the API and UIscreen with new features. We have completed the QA process for the existing work. After the new launch, our team will test it with new users and get feedbacks to upgrade.