UI Design Internship Report | Youqifu Industry Consulting & Asset Quotation Platform
Ge Xianjing · 0377636 · UI Design Intern
Nanjing Youqifu Information Technology Co., Ltd.
Period: xx/xx – xx/xx
UI internship at an industrial asset-trading platform
Industry report · E-portfolio
| Student | Ge Xianjing · 0377636 |
|---|---|
| Role | UI Design Intern |
| Host company | Nanjing Youqifu Information Technology Co., Ltd. |
| Period covered | xx/xx – xx/xx (three working weeks) |
| Product | Youqifu industry consulting & asset quotation platform |
This site is the rewritten industry report and internship journal. The source material was a day-by-day Blogger log: mixed Chinese and English, repeated “learning” paragraphs, and calendar labels that did not match the actual first week. The work itself was real; the writing made it look smaller and more scattered than it was.
Dates in this document are written as xx/xx. The first week in the original post was labelled with the wrong weekdays; the actual first week ran from 24 to 28 August. That calendar error is not argued here. What matters is the sequence of the work: authenticity-guarantee (V2.5), quotation (V2.6), then visual system, category, campaign, and implementation review.
Most days were not “a new project”. They were iterations on the same few surfaces — login, deposit, quotation, homepage icons, lottery. The report is therefore organised by project and by week, not by weekday. Process screenshots from the original log are kept in place as design-journey evidence. Reflections are shorter than in the source, and they are not repeated.
How to read this portfolio
- Company & scope states where I sat, what the product is, and what I was allowed to touch.
- Three project chapters cover the actual design problems, decisions, and artefacts.
- The weekly journal is a compressed narrative of the same three weeks, without a “learning / reflection” block under every day.
- Lessons & synthesis collects what I would not want to write twice, and connects a few studio methods to this workplace.
- Blogger HTML is a paste-ready version of the same text, using the original image hosts, because I cannot log into the Blogger account from here.
Company profile, product, and the intern’s scope
Industry report · 30%
The company and the product
Nanjing Youqifu Information Technology Co., Ltd. builds software for industry consulting and asset trading. The live product I designed for is a WeChat mini-program (and a related app) used to list, browse, quote on, and complete transfers of enterprise assets — factory space, qualifications, operating entities, and similar inventory. It is not a general e-commerce shop. The inventory is sparse, the ticket size is high, and the two sides of a deal do not trust each other by default.
The product therefore mixes B-end service logic with a C-end browsing shell. Buyers and sellers are not the same user. Some sellers are individuals; some are companies. Trust is not a marketing line. It is a module: authenticity guarantee (保真保障) and an authenticity deposit (保真金) that a seller pays so a listing can carry a visible guarantee. Quotation (报价) and “buy contact details” are two different ways to start a deal on the same asset.
Where I sat
I joined as a UI intern. On day one I was handed the previous designer’s source files and a V2.5 work list from the product manager. The company’s delivery path, as briefed by the UI colleague, is short and linear: align on the prototype and page tree; explore two or three visual directions; draw the full hi-fi set; slice and annotate; test on the staging build.
I did not own the business rules. Product wrote the flows; I made them visible, consistent, and buildable. Front-end implemented them. I then checked the test build against Figma. That last step is easy to skip in a journal that only records “I drew pages today”. It is where several V2.5 mistakes showed up.
Scope of the three weeks
- V2.5 authenticity-guarantee / deposit management: eight core pages, guarantee popups, labels, login, identity routing, then a pass after front-end implementation.
- V2.6 quotation: dual mode (quote on an asset / buy contact details), status system, buyer and seller copy, a 21-page walkthrough.
- Visual system and campaign: mini-program UI spec, homepage category icons, colour tokens around #254BFF, lottery popups and prize cards, app icon.
What this was not. I did not set company strategy, write the legal terms, or ship code. I also did not produce a finished design system in the academic sense — I produced a working spec sheet and a growing Figma library under live iteration. Claims below stay inside that boundary.
Authenticity guarantee and deposit management
Project 01 · V2.5
The first body of work was the trust layer of the platform: how a listing shows that it is guaranteed, how a seller pays a deposit, and how those rules appear in the UI without becoming a wall of text.
Problem
Asset listings on this platform are expensive and irregular. A buyer has little reason to believe a stranger’s factory or qualification is real. The product answer is a paid authenticity deposit. The design answer has to do three things at once: make the guarantee visible at the moment of browsing, make the deposit flow completable, and keep the legal coverage readable. The first XD draft treated these as separate screens. They are one path.
The module started in Adobe XD because that was the file I inherited. XD was weak for a growing component library, for anything beyond simple interaction, and for working next to engineers who already lived in Figma. After a short comparison with product and front-end, the same screens were rebuilt in Figma. That switch cost a day. It was still the right call; every later week used that file.
What I designed
The V2.5 set covered product management (on sale, taken down, pending review, recycle bin), listing and delisting, refund of the deposit, product detail, payment instructions, payment success, and the asset list. The guarantee popup and the coverage copy were the parts that kept coming back in review: the hierarchy of the rule text was wrong until the terms that actually jump to a legal page were given a distinct link colour.
On the listing card, the guarantee had to read as a status, not as decoration. Early badge drawings were too soft. The confirmed version is a hard corner label — 保真保障 — sitting on the image. On the product-detail page I removed the deposit-payment button from the top and put a brand-guarantee strip in that slot. The job of that strip is not to collect money immediately. It is to put the trust claim in the first screen before the user decides whether the asset is worth a quote.
Login and identity, because the same week owned the front door
The existing mini-program login was a membership centre with too many competing entries. I rebuilt login, registration, password recovery and the related popups on one type scale and one blue–violet tone, then compared auction and classified products. The path that survived was one-tap phone login. Account-and-password stayed, but it stopped being the default. For a transactional product, every extra field before the first useful screen is a reason to leave.
The platform also splits individual and enterprise users. I designed the merchant onboarding choice — 个人 / 企业 — with a selected state, a confirmation action, and the entry agreement. Several visual options were drawn; the one that shipped is quiet. The two identities still look closer than they should. That is a real gap, not a rhetorical one: enterprise sellers will later see different permissions, but the first screen barely says so.
After implementation
When V2.5 landed on a phone, Figma was not the source of truth anymore. Icon sizes drifted, card spacing opened up, and a primary action sat too low on the deposit-management page. I marked the diffs, redrew a few functional icons so the set matched, and agreed a checking order with front-end: Figma → implementation → device → requirement → review. That sequence is obvious on paper. I had not been running it as a habit.
Quotation: one asset, two deal modes, two roles
Project 02 · V2.6
V2.6 added quotation to the mall. A user can bid on an asset, or pay to unlock the other party’s contact. Those are different businesses sharing one detail page. Most of the week was not “drawing a table”. It was keeping that distinction intact while the product pack kept moving.
The flow, once it existed
On the buyer side the path is: asset detail → read existing quotes → submit a quote → see my quotes → edit or withdraw → or buy contact details → pay → see the number. On the seller side the same asset shows a denser table: who quoted, how much, when, and a pinned action to contact them. Orders for “what I bought” needed unpaid / paid / completed / closed, plus cancel and contact. I walked 21 screens against that tree: detail (with and without quotes), quote sheet, my quotes, quote detail, re-quote and delete, confirm order, pay success, order states, contact, quote history, product management, merchant centre, my orders, personal centre.
The first screens were drawn from product’s first pack. Product said, explicitly, that the pack would change. It did. Later in the three weeks a confirmed pack arrived and I had to reconstruct the quote-detail popup: fewer controls, clearer states, less duplicate explanation. That is ordinary product work. It is a bad fit for a daily journal, because the Tuesday drawing and the Friday drawing look like two different assignments when they are one argument being edited.
A table that has to work on a phone
Seller-side quotation has too many fields for a 375-wide canvas: user, amount, phone, time, action. The workable pattern was a horizontally scrolling table, a visible hint that more columns exist, and the action column pinned. After a later alignment pass, the public list settled on three columns — User / Quote / Time — with a single-line timestamp (2026/07/28 12:31), right-aligned, and sort arrows in the header. The “before” list wrapped times onto two lines and made comparison harder than it needed to be.
States, risk, and two voices on one screen
A quote is not a static row. It is in progress, withdrawn, or expired, and the allowed actions change with the state. Delete and withdraw are the dangerous ones. I weakened them visually. I did not always give them a second confirmation in the first pass, which is the wrong trade for a money-adjacent action. Primary actions (submit quote, buy now, pay) stayed visually loud on purpose.
Buyer and seller also cannot share copy. “Contact the seller” and “view contact”, “unlock the seller’s number” and “unlock the buyer’s number” are easy to mix once the same Figma frame is reused. I sat with product and rewrote those strings page by page. The information order on some of those pages is still buyer-shaped. Changing labels is not the same as changing the layout for a seller who is scanning twenty quotes.
Open gap. Quote mode and contact-purchase mode still look too alike. A user can finish a flow without being sure which deal they are in. Differentiating those two modules — not just the button label — is unfinished work.
Spec, category, colour, icons, lottery
Project 03 · System & campaign
In parallel with quotation, the mini-program’s visual layer was being replaced: a written UI spec, a new category tree, homepage icons, a cold colour system, an app icon, and a new-user lottery. These look like separate errands in a daily log. They were one attempt to make a B-end trading product stop looking like a mixed-colour classifieds board.
A spec that other pages could obey
I used commercial UI-spec examples on ZCOOL as a starting point, then wrote a sheet for this mini-program: 375×812 canvas, status / navigation / tab-bar heights, a three-level type scale, spacing, cards, buttons, tags. The point was not to invent a brand book. The point was to stop each new quotation popup from inventing its own padding. Components went into Figma as I drew the business pages, not afterwards.
The first version of that spec is still more “generic mobile” than “industrial asset trading”. High-density tables and long legal popups need exceptions that a standard 16/14/12 type ladder does not decide for you. I noted that at the time; I did not fully rewrite the spec around those exceptions.
Category tree and homepage icons
Operations replaced the old categories (property rights, factory buildings, construction companies, and so on) with a new set: logistics, media, manufacturing, F&B and tourism, trade. I swapped the tables, drew matching icons, and compressed images that were stalling the test build. Long names wrapped; selected / default / collapsed states had to stay stable in the side nav, the category sheet, and the filter.
The first homepage icon set had glass frames and a toy-like finish. It lost against the content. The second set is 3D, unframed, aligned to the blue–violet brand, checked in the staging back-end. Recognition and category-to-icon mapping mattered more than material effects.
Colour as hierarchy, not decoration
The test homepage mixed warm promotion reds with cold service blues. It read as a discount mall. I built a cool palette around the brand blue #254BFF: a main ramp, neutral text, and low-saturation functional accents (about 5%–18% saturation) — fifteen values. Recommendation cards went to white with small cold tags; the sliding category chips became blue / violet / cyan; promotional modules dropped orange-red; ranking and service blocks sat on blue-grey with a muted gold accent. Primary category nav had to stay louder than secondary filters, which had to stay louder than content cards.
The first colour pass over-unified. Some category chips became hard to tell apart. Hue shifts inside the same cold family were added back for distinction. The tokens were still adjusted by hand rather than named in the Figma library, which is how the next drift will start.
App icon
The brief was to show auction, quotation and shopping, originally with the “asset cat” mascot. I explored fifteen cat-and-auction directions. AI drafts were soft and the type fell apart at small sizes. Illustrator was slow for me, so the redraw happened in Photoshop. A later instruction said the cat ears were not required; they came off. The shipped icon is a cart, the brand mark, and 优质企业资产 on a blue–violet field. It is closer to a store icon than to a cat. That is the brief as it ended, not as it started.
Lottery, sitting on a serious product
R&D asked for a new-user cash campaign. I drew a dense popup and a simpler one, then a red-packet floating entry on the homepage, then a right-edge tablet-style button with a gold coin, then seven prize-tier cards for the wheel. The manager changed the copy; I changed the popup. The PNG was too heavy for the front-end and had to be compressed. The campaign is meant to convert. It also fights the cold, low-saturation homepage I had just argued for. I kept the lottery in red-gold and tried to stop the floating entry from covering the main scan path. That tension is not resolved. It is the actual design problem of putting an acquisition campaign on an industrial trading tool.
Three weeks, written as weeks
Internship journal
The original log split the same loops into weekday entries, each with its own “learning and gains”. Below is the same history, compressed. Work already described in the project chapters is not repeated at full length.
Week 1 · xx/xx – xx/xx · Arrive, then make the trust module visible
I joined, took the previous designer’s files, and read the V2.5 list. I sat in the back-end and the test app long enough to see how listings are actually configured, not only how they appear in a prototype. The authenticity-guarantee module was drawn first in XD — eight pages plus the guarantee popup — then moved to Figma. Login was stripped down to one-tap phone login. The guarantee label and the detail-page trust strip replaced a top-of-page pay button. I compared four auction / classified mini-programs (JD Auction, Alibaba Auction, Beike, China Auction) on layout, buttons, forms, popups and filters, then looked harder at Alibaba Auction’s cards and navigation. Individual vs enterprise onboarding was designed at the end of the week.
What I would not do the same way: I started pushing pixels before the deposit vocabulary was stable, so rule text had to be re-hierarchied in review. I also changed design tools in the middle of a module. The Figma file is the one that survived; the lost day was avoidable if the tool question had been asked on the handover afternoon.
Week 2 · xx/xx – xx/xx · Spec, first quotation, new categories, first lottery
I wrote a mini-program UI spec (canvas, type, colour, components) and started putting reusable pieces into Figma while drawing. Quotation v1 came out as a full path: detail, list, submit, edit, withdraw, buy contact, pay, orders. The seller table went horizontal. Product’s pack was still a first draft; empty and error states were thin. Homepage icons were redrawn without glass frames. Categories were swapped to the new taxonomy, with matching icons and compressed images. A new-user lottery popup was produced in a simple version and a loud version. I also exported a large set of building 3D drawings into the test mini-program — production support, not a design thesis.
The useful pressure this week was timing. Quotation could not wait for a frozen spec; the spec could not wait for quotation to finish. Drawing both at once kept the buttons consistent. It also meant exception states lost the argument against the happy path.
Week 3 · xx/xx – xx/xx · Colour, quotation rewritten, campaign assets, device QA
The homepage colour was pulled into a cold business system around #254BFF. A confirmed quotation pack arrived; I rebuilt the quote-detail popup and walked the 21-page set with product, including buyer/seller copy. The quotation list was aligned to three columns and a single-line time format. The app icon went through cat explorations, an Illustrator dead-end, a Photoshop redraw, and the removal of cat ears. Lottery work continued as a floating entry and seven prize cards. Category replacement on the test back-end slipped a day because the environment was unstable. After V2.5 was implemented, I compared the deposit-management screens with Figma and corrected icon size, spacing and a low primary button.
This week made the cost of parallel tasks obvious. Prize cards and icon uploads can look like finished work while a category table is still waiting on a broken staging site. I did not keep a launch checklist; a few replacements went up out of sync.
What I actually take from this, once
Reflection · 25% + synthesis · 15%
The source log restated “design should serve business goals” and “components should be reused” under almost every day. Those sentences are true and not useful. The points below are the ones I did not know how to say on week one, and that I do not need to say twice.
Lessons from the work
- Trust on this product is a path, not a badge. Moving the deposit button out of the detail header and putting a guarantee strip there is a conversion decision. The badge on the card is only the start of that path; the coverage popup is where the claim either holds or collapses into unread legal text.
- A design file is a contract with front-end. Spacing that looks fine on a Figma frame of 375 can fail on a real status bar, a real tab bar, and a real font. The V2.5 deposit page taught that more clearly than any spec sheet. Checking on the test build is part of the design, not a favour to engineering.
- Transactional UI is state-driven. A quote that is active, withdrawn or expired is three screens wearing one name. If the state is only a coloured tag and the actions stay the same, the tag is decoration.
- Two roles cannot share a layout just because they share a database row. Rewriting “contact seller” versus “view contact” was necessary and not sufficient. Sellers scan lists; buyers complete a single asset. Density and action placement should follow that, not only the nouns.
- Campaign visual language will fight product visual language if nobody names the fight. The lottery is red-gold and loud on purpose. The homepage is cold and quiet on purpose. Compressing the PNG and tucking the floating entry to the right edge were production fixes. They did not resolve whether a cash-wheel belongs on an industrial asset tool.
What I would still correct
- I drew before the deposit terms were stable. Review then became a terminology class. Next time the vocabulary list comes before the component.
- Exception, empty and error states were thinner than the happy path on quotation v1. A walkthrough that only counts 21 “pages” can still miss the states inside those pages.
- Quote versus buy-contact is still too visually similar.
- Individual versus enterprise onboarding is still too visually similar.
- Colour tokens and components were not fully named in the library, so the next intern (or me, next week) will restyle by eye again.
Critical synthesis — studio methods against this workplace
The internship did not ask for theory. The assignment does. The connections below are limited to decisions I can point at in the screenshots. I am not claiming the company works by these names.
Trust cues. Egger’s model of consumer trust in e-commerce, and the wider finding that interface cues change perceived risk, sit directly on the guarantee module. A corner label, a coverage popup, and a paid deposit are interface trust cues plus a business process. If the popup is a grey slab of terms, the cue fails even if the legal coverage is real. Marking tappable clauses in a link colour is a small instance of making the system status and the next action visible — Nielsen’s “visibility of system status” and “recognition rather than recall”, applied to policy rather than to a menu.
Gulfs of execution and evaluation (Norman). One-tap phone login shortens the execution gulf at the front door: the user does not have to form a plan involving passwords and membership. The remaining evaluation gulf is whether “I am logged in” also means “I am a buyer, a seller, an individual, or a company”. The identity screen is supposed to close that gulf. At the moment it only asks the user to pick a card. It does not preview the different tool they are about to get. That is why the screen still feels under-designed, even though the visual is clean.
Error prevention. Nielsen’s heuristic 5 is the reason a visually quiet “delete quote” is not enough. Weakening a destructive action reduces accidental taps; it does not confirm intent. The missing second step on some delete states is not a polish issue. It is the heuristic I knew from studio crits and still under-built when the schedule was quotation pages rather than empty states.
Atomic design and a living spec. Frost’s atoms–molecules–organisms map onto the mini-program sheet (type, colour, button, then card, then page). In studio, that stack is often a static deliverable. Here it was only useful if a quotation popup drawn on Wednesday reused Thursday’s button. The failure mode is also the one Frost warns about: a kit that stays generic (mobile defaults) while the product’s actual difficulty is dense tables and legal copy.
Information architecture. The category swap was an IA change, not an icon change. Rosenfeld and Morville’s organisation systems are the difference between “draw a new glyph for 厂房” and “the back-end now models logistics, media, manufacturing…”. Icons, wrapping, and selected states were how that organisation system became findable. Performance (compressing images so the nav could load) is part of that findability. A category the user never reaches because the PNG is 2 MB is a failed label.
Hierarchy versus campaign affect. The colour work used saturation and temperature as a hierarchy tool: primary nav, secondary chips, then content. The lottery used the opposite — high saturation, warm hue, 3D gifts — to create urgency. Those two directions can coexist if they are assigned to different layers (content vs overlay). They collide if the overlay is as large as the homepage, or if the prize graphic outweighs the listing cards. That collision is the same problem as “emotional design” (Norman) meeting a sovereign industrial tool (Cooper’s postures): a transient campaign overlay on a product that is supposed to feel like a workplace. I can name the conflict now. I did not have a rule for it when I was exporting prize cards.
I am still an intern who draws what product asks, then corrects it on a phone. The gain from these three weeks is narrower than “I understand B-end design”. It is that I can tell, on a given screen, whether I am designing a trust cue, a state, a role, or a campaign — and I can tell when I have only styled one of those things.
Images remain on Blogger’s original hosts. Dates are written as xx/xx throughout.
Comments
Post a Comment