We start by generating ideas and looking at existing solutions in the sphere of online education and business media. Putting together a presentation, showing it to the client to make sure our ideas match the task.
We want to make orientation on people’s needs, not products, the main feature of the platform. The website offers an entire suite of tools: general and specialized articles, lectures and online courses, offline events and partner services. The core of the platform is a society of experts and users who create the content, help each other and establish business connections. Carefully listening to the client who explains the idea in detail.
Gathering all information on the project in a huge mind map that ultimately transforms into a logical information structure of the website.
Looking at who will be using the platform and how to understand the number and the content of the website’s pages. Creating draft link maps.
Due to the compressed timeline, interface designers, designers and technologists all start working on the project at the same time. Assembling the information structure of the pages and sending it to the programmers to speed up hardware and software development.
Simultaneously making the first attempt at the graphic style. Coming up with a ribbon of stages of running a company, the side navigation and the 30-Minute Overview layer.
Deciding to show the progress of completing each stage with a row of illustrations that get colored once the each stage is covered. It looks both like a progress bar and a trophy case.
Using it as one of the ways to motivate people to return to the website. The second one is page view history and favorites available even to unregistered users. When a user gets their own space, the website suggests creating a personal profile to save progress and subscriptions.
Thinking over the trajectory page, a step by step guide on opening a specific kind of business. Deciding to include a detailed checklist with all the steps and useful information at the end of the page. People will add it to favorites to always have it on hand and mark completed steps.
Now we’re getting somewhere. Making sure to show interim results to the client. They like the functionality but are not yet sold on colors, the use of the antiqua typeface in the text and the stage ribbon on the main page which they don’t see as a functional block.
Changing the typeface and the colors, making the materials grid more interesting. Replacing the stage cards with a slider that allows to scroll the ribbon of stages and themes.
Thinking about the mobile version of the slider and the main page itself.
Demonstrating to the client. Looks like we got it, although they see the graphics as too childish. That’s something we need to improve.
Preparing a video presentation of the platform and showing it at the World Festival of Youth and Students in Sochi.
Getting an urgent task: we need to come up with a scenario for a form allowing to register a company online. It will be the first online service available on the platform. Creating forty mock-ups with various interface states.
Discussing desktop and mobile mock-ups with the client using a shared online board.
Going back to the design concept. Trying to distance ourselves from the initial design and letting our minds run free. Moving the stage selector to the left, making the design more reserved and coming up with a new format of showing trajectories in the materials feed.
The client liked the solution with a switcher for stages better. Trying to simplify it which leads to us reworking the overall style again. Replacing the playful graphics that look hardly related to business with strict and laconic images based on the Delovaya Sreda logo. The pictograms are drawn with a single thin line.
The icons are used to create a wonderful loading animation.
Turning the massive stage select block into a minimalist slider. Subtopics only appear when the user starts to move the slider and select the stages.
The page becomes lighter and more respectable while the materials cards become more contrasting and diverse.
The client likes it all. Starting to work on the remaining pages. Breaking down the process into stages, assembling a team of designers and distributing tasks. Using a Google Docs spreadsheet to track progress: each mock-up has a responsible person, a deadline and completion status.
Considering different types of product lists.
Receiving conceptual feedback from the client: all courses, videos and articles need to be combined in the Knowledge section. Discarding the idea of subtopics inside stages and the side menu on catalog pages as we won’t be able to implement them in time for the platform launch.
Simultaneously assembling mobile versions of the pages.
Trying to make the text on the About Platform page more interesting by showing a block with the best materials as a scrolling feed.
Drawing pages for the materials: courses, articles, lectures and presentations. Coming up with the scenarios of registering and authorizing.
Drawing the final versions of all icons. The result looks impressive.
Creating a library in Sketch with all the components of the user interface and the project’s design patterns which allow the client to assemble new pages.
Conducting design supervision over the typeset pages and catching bugs.
Watching the reaction of the prime minister and other members of the government to the result and launching right on schedule.
