[Product Design] Requirements Documents for Street Rabbit Motorcycles

insert image description here

1. Document overview

1.1. Product introduction

Jietu Motorcycle is a shared motorcycle owned by Didi Chuxing. The shape of this motorcycle is the same as that of ordinary electric bicycles. It is equipped with a handle bell, a loading basket, and a front light.

The weight of the whole car is relatively light, about 2/3 of the weight of ordinary household electric cars, and the rear half of the car body can be lifted with one hand. Users with a Zhima credit score of 650 do not need to pay a deposit. It is free for the first two minutes of use, 2 yuan for less than 20 minutes, and 1 yuan for every ten minutes beyond the usage time.

1.2. Product positioning

Street rabbit motorcycle is committed to providing you with more convenient, more economical and more standardized electric bicycles. Improve the overall traffic safety and travel efficiency of the city, and meet the needs of efficient travel within 10 kilometers.

2. Product structure

Product function structure diagram
insert image description here
Product information structure diagram
insert image description here

3. Global Description

3.1 Function permissions

Divided into unlogged state and logged in state

Logged in to perform all actions

You cannot perform any operations when you are not logged in. Stay on the map page and click some operations to directly jump to the login page

3.2 Keyboard Description

A numeric keyboard pops up when you click the (mobile phone number, vehicle number) input box

Alphabet keyboard pops up when other input boxes such as (verification code, search, custom edit) are clicked

3.3 Page interaction

pop-up window on the left

Location: left side of the page

Interaction: the page is dimmed, and the bottom
insert image description here
pop-up window pops up on the left

Location: bottom of page

Interaction: the page is dimmed, and
insert image description here
a toast pops up at the bottom

Position: Middle of the page

Interaction: fade out, suspend
insert image description here
dialog for 1 second

Position:
insert image description here
alert in the middle of the page

Position: Middle of the page
insert image description here
Back to icon

Location: top left corner of the page

Interaction: Click to return to the previous operation page

4. Product function scope

insert image description here

5. Detailed function description of the product

5.1 Welcome page

Regardless of whether they are logged in or not, users go directly to the home page after the welcome page.

a. Logged in: All operations can be performed on the riding page.

b. Not logged in: Clicking any operation on the riding page will jump to the login page.
insert image description here
insert image description here
insert image description here

5.2 Login/Registration Page

Preconditions

The user has logged in: After entering the APP, the user clicks "logout" on the personal information page;

The user has not logged in and is about to enter: the user has registered, but has not logged in before opening the APP; the user has not registered and is using the APP for the first time;

page logic

a. "Enter mobile phone number": The "Get Verification Code" button will be activated only after entering an 11-digit number; if the input number is less than 11 digits, it cannot be activated. The verification code will only be obtained after the 11-digit number is verified as a correct mainland mobile phone number, otherwise the toast will report an error reminder.

ps: There are two suggestions on the login page. 1. When the user enters a number with less than 11 digits, there is no other prompt interaction to remind the user except that the "Get Verification Code" button is not activated. 2. After entering the wrong number, click the Get Verification Code button, and the toast message "Please try again tomorrow" is very unfriendly. It neither clearly indicates the reason for the user's wrong operation, nor guides the user to the next step.
insert image description here
b. "Get verification code": After the verification of the mobile phone number is completed, click to get the verification code, and the verification picture will pop up. After entering the four-digit verification letter, the system will send the login verification code to the user's mobile phone if the verification is successful, otherwise an error will be prompted.

c. After entering the correct verification code, the default option is to read the Street Rabbit Riding Specifications, and click Login to jump to the next page.
insert image description here
functional logic

After verifying and logging in through the mobile phone number, it will enter the authentication and deposit judgment. Whether it has passed the real-name authentication of Didi Chuxing, or not, it will enter the real-name authentication page, and if it passes, it will enter the deposit payment. After the payment is completed, it will go to the home page, and if it passes the Zhima Credit authentication, Alipay authorization confirmation is required to determine whether the credit score is satisfied. If it is satisfied, it will go to the home page.
insert image description here

insert image description here
insert image description here

5.3 Homepage

Page logic
insert image description here
New users who log in for the first time will display the novice guide h5 pop-up window and click to enter the novice tutorial page

personal center

Personal center entrance, click on the left to pop up the personal center.

search

Click to enter the search page, which supports precise search and fuzzy search for place names.

activity Center

Display the recent activity bar according to the time from near to far, click on the activity bar to jump to the activity details.

Return point/motorcycle switching tab

Since shared motorcycles need maintenance and management such as battery replacement and charging, compared with shared bicycles, a fixed area for changing cars is added, and through tab switching, it meets the needs of two scenarios: finding a car and changing cars.

Active floating window

Display the latest event information, click to jump to the event details page.

map navigation page

1. Display the area where the user is located, and display the icon at the center of the area.

2. Display the user coordinate point icon.

3. Display the surrounding vehicles (only available vehicles are displayed for users, and all vehicles are displayed for administrators)/return points, and the icon of the nearest motorcycle to the user is marked with text.

4. Car-finding assistance: After the user clicks on a target vehicle, the map displays the car-finding path, and at the same time displays the vehicle’s travelable distance (km), the distance between the user and the vehicle (meters), the time to walk to find a car (minutes), and a “ringing bell” appears. Find a car" button, the target vehicle will send out a voice reminder after clicking.

5. Tap twice in succession to zoom in on the map.
insert image description here
insert image description here
Refresh positioning

Refresh the user positioning in real time, so that the user coordinate point becomes the center point of the area.

Scanning car

Click to enter the scan code car page.

help center

Click the pop-up dialog box to display the four buttons of fault report, report fault, report private lock, and customer service help.

5.4 Car page for scanning code

Preconditions

The user clicks the "Scan code to use the car" button to enter the scanning code to use the car interface.

page logic

①The user clicks the arrow button on the left side of the function navigation bar on the upper part of the page to return to the first interface; clicks the "Instructions" button on the right, and the centered h5 instruction manual pops up;

②The user aligns the QR code selection box with the vehicle QR code to complete the code scanning operation, and will receive system feedback information after scanning the code.

③The user clicks the button on the left side of the lower function bar to enter the interface for manually inputting the license plate number. Click the button on the right to manually turn on or off the flashlight.

functional logic

When the user enters the scan code car page, it will judge whether to turn on the flash lighting according to the light

When the QR code information is not received when scanning the code, after about 30 seconds of testing, a dialog box pops up showing that the code scanning failed, allowing the user to jump to the manual input code page

When the wrong QR code information is obtained by scanning the code, a toast pop-up window will pop up.

When the correct QR code information is obtained by scanning the code, it will display whether the vehicle is available for riding. Yes, jump to the unlock confirmation page, no, display the reason: low battery, vehicle failure, etc.
insert image description here
insert image description here
insert image description here
insert image description here
Ps: Once I parked and forgot to return the car on the app, I asked the customer service lady to apply for after-sales service (after all, it costs a few dollars, hahaha), the customer service lady told me that if I forgot to return the car, it would cause them the risk of losing the car, miss me First offender, I got my money back.

So I thought about it, because the hardware of shared motorcycles is different from that of shared bicycles, the use of motorcycles and the operation of various hardware on them must be based on its batteries, and it must be manually charged in time Or replace the battery; if the battery is dead, not only the GPS is at risk of failure, but also the lock control is at risk of failure.

Therefore, Street Rabbit must do some risk control logic to maintain a minimum effective power value of the motorcycle:

When the power of a motorcycle is lower than 10% (assumed warning value), the car will be blocked on the user's map; when the user scans the code to use the car, it will prompt that the power consumption is too low and the car cannot be used; when the user uses the car, When the power level is close to the warning value, a voice alarm will prompt the user to stop; when the user stops the car but does not confirm to return the car on the app, the parking time reaches 70-80 minutes or the power level is close to the warning value, the system will automatically return the car.

Unlock confirmation page
insert image description here
prerequisites

If the code is scanned successfully, the vehicle is judged to be rideable, and it will jump to the unlock confirmation page.

page logic

①Display the user's coordinate point and surrounding return points

②Car return instruction copy

③Billing rule button, click to jump to the billing rule details page

④Battery information, riding distance

⑤Unlock the button, click to jump to the over-unlocked h5 page, if the unlock is successful, it will jump to the cycling page, and if the unlock is unsuccessful, an error will be reported.

5.5 Cycling page

insert image description here
Preconditions

User unlocked successfully

page logic

①Set the search box to the top, click to jump to the search page, and search for the car return point

②The map navigation page displays the itinerary information, and the riding distance and riding time are displayed below, as well as the remaining riding distance of the vehicle, the amount spent (click the amount spent to jump to the cost details), and the vehicle number

③ Return the car button at the bottom, click to jump to the car return confirmation page, and then go to the payment page to complete the car payment.

Logic diagram of car return function
insert image description here
ps: Street Rabbit has a free protection time like other shared bicycles, and there will be no charge for returning the car during this time; considering that the user finds that the car is faulty after unlocking, or wants to replace the car and return it immediately Scenarios such as cars; but motorcycles need to consider the issue of the return point, and there will inevitably be a scene where the user moves the vehicle out of the return point during the free protection time, and a layer of judgment needs to be made to consider whether a dispatch fee needs to be charged.

In addition, there is a bug in the judgment of the car return point. I tried to return the car at a non-car point, and moved the map center point to the map return point through the app to return the car successfully; Point) to return the car, the result reminded me that the dispatch fee was charged at the non-return point, and I had to trouble the customer service lady in the end.

Payment function logic diagram
insert image description here
Itinerary end page
insert image description here
After the payment is successful, jump to the itinerary end page. The map shows the itinerary track, and the floating window for sharing prizes is displayed at the bottom. decimal places), fee question entry, and help entry.

5.6 Help Center

insert image description here

Click on the bottom to pop up the help center pop-up window, showing the entrances of "report fault", "report random stop", "report private lock" and "customer service help".

ps: It is recommended to merge "report random stop" and "report private lock" into "report". After all, the logic of the page is the same, and one more button in the help center means that the thinking cost of users will increase by 10%. Visually, it looks simpler and less crowded.

Report a fault

"Scan the QR code" at the top, click to jump to the scanning page; "Label selection" provides 9 kinds of question labels; "Custom question description box", enter the upper limit of 100 Chinese and English characters; "Photo add" click to pop up The actionbar selects the path of uploading photos; the "Confirm Submit" button at the bottom needs to be activated after scanning the QR code at the top and then completing any of the following operations (this is my guess, to avoid handing in blank papers), and can only be clicked after activation.

Report random stop

Same as above except without the "label selection".

Report private lock

Same as above except without the "label selection".

customer service help

Click to jump to the customer service center.

5.7 Personal center

insert image description here
insert image description here
Preconditions

Click the personal center icon button, and the personal center pop-up window will pop up on the left

page logic

Display user information: avatar, mobile phone number, ride card display (if there is a ride card, the remaining days will be displayed, if there is no ride card, the "buy ride card" button will be displayed), click to jump to the ride card purchase page, ride Total distance (kilometers), total time (minutes), click to jump to the personal information page, displaying the real-name authentication name and mobile phone number, which are currently uneditable, and are estimated to be reserved for future follow-up information supplements.

The next step is wallet, itinerary, customer service, and setting entrance.

ps: The design of the avatar is too ugly. Compared with the whole app UED of Street Rabbit, it seems very inconsistent. This is the case when there is no avatar in other apps. Click to find that it can’t be modified. Is it because the PD of Street Rabbit didn’t add it to the design girl? Chicken legs ==.

Click on the wallet
insert image description here
insert image description here
to jump to the wallet page, displaying "My Riding Card" (displaying the remaining days), "My Coupons" (displaying the number of coupons available), and if the deposit is paid, the deposit information display and "Refund Deposit" will be displayed at the bottom ” button, if it is guaranteed by Zhima Credit, it will display Zhima Credit’s copywriting information.

Click My Riding Card to jump to the Riding Card page to display the main picture style of the current Riding Card, view the detailed entry (click to see the remaining days and deduction records), the remaining free riding days, and the entry of usage rules. Ride card purchase button.

Click on my coupons to enter the page and display the user manual entry. The coupons are in reverse order of the coupon expiration date.

Click to return the deposit to pop up a dialog pop-up window, cancel to return to the wallet page, confirm to enter the reason selection page for refunding the deposit; confirm the refund again, and the system will enter the refund process.

ps: At present, the use of coupons is automatically used by the system. Users cannot select a certain coupon on the My Coupon page and click to use it. If you can click the coupon to immediately jump to the car page in the future, then the current ordering logic of coupons It is obviously unreasonable to follow the reverse chronological order. The later the deadline, the higher the top. As a result, many recently expired coupons received by users will sink to the bottom and expire, reducing the number of times users use coupons, and even reducing the number of users using street rabbits. frequency.

journey

Click to enter my itinerary, the itinerary record shows the date and time of the ride (today and yesterday, the rest are displayed according to the day of the week, and the specific time is accurate to the minute), ride duration (minutes), cost (yuan, numbers retain one decimal), itinerary The records are displayed in chronological order from near to far, and you can enter the riding end page of the specific itinerary by clicking Add.

customer service

Click to jump to the customer service center.

set up

Click to enter the setting page, displaying "Praise and Encouragement", "User Agreement", "About Us" three entries, and the "Logout" button, click the pop-up dialog box to confirm the logout pop-up window, cancel, return to the setting page; confirm, jump Go to login/registration page.

5.8 Customer Service Center

insert image description here
Preconditions

Click "Customer Service" and "Customer Service Help" to enter the customer service center.

page logic

recent order

Display the latest order information, date (year, month, day), time (accurate to seconds), riding time (minutes), cost (yuan, keep one decimal place), "all" in the upper right corner, click to enter all completed Orders, in reverse chronological order, click to enter the after-sales customer service page for one of the orders.

guess what you want to ask

Display three frequently asked questions.

ps: I thought that the users recommended by the algorithm had some after-sales problems recently. After several tests, I found that the question you guessed to ask may be fixed in the background configuration, not personalized by the algorithm.

common problem

Display four categories of questions: "account", "deposit estimate", "riding" and "returning the car". Click on a specific question to enter the question details page, and display the "useful" and "useless" buttons to allow users to give feedback on the question.

ps: This interactive experience that can only be evaluated by one of two options is actually very poor, especially when users take a long way to enter the question details page and find that it is still a useless answer, it is recommended to add a manual customer service entrance so that users can click directly Jump to enter the in-depth consultation.

online service

Click to jump to the intelligent robot customer service dialog box, and you can also apply for manual customer service from here.

ps: There is a flashback bug when the manual customer service consults. There have been two sudden flashbacks when sending messages to the manual customer service, and the message has not been sent after returning.

Customer Service Hotline

Click to pop up the dial customer service dialog floating window, cancel, return to the customer service center page; confirm, the call is dialed out.

5.9 Activity Center

insert image description here
page logic

A list of event page entries is displayed in reverse order of the start date. Click on the event page entry to jump to the specific event details page.

eggs

I originally wanted to add a car reservation function that other competing products have, but after thinking about it, will this reservation function cause a waste of vehicle resources? After all, there is a risk of not using the car. Of course, if it is designed to be reserved The effect may be different if you don't use it, so just write your own original function!

parking function
insert image description here
scene

The user needs to leave the car for a short time to buy things or deal with a small case that can be solved in a short time, but this may not be the car return point, or the user does not want to return the car, because the car will be billed again after returning the car, and at the same time, there will be people being caught after returning the car. Ride away with no other motorcycles around. This is currently happening. Although other users will be prompted when they scan the code, there may still be a risk of forcibly riding away.

Preconditions

user user clicks to park

Business logic

When the user clicks "Stop" and puts down the kickstand, the first two steps must be established at the same time before the vehicle enters the parking lock state. The fare is calculated according to the original logic. After parking, the "Stop" button changes to "Ride again" button, click to unlock the vehicle.

Guess you like

Origin blog.csdn.net/qq_41661800/article/details/131432752