My resume
BACK
Challenge Builder
BACK

Challenge Builder

Internship project

Date

July - November 2018

Softwares

Sketch

Illustrator

Principle

InVision

Skills

UX Design

UI Design

Event Tracking

Renew the internal CMS (Content Management System) at Agorize, an open innovation online platform, in which I did my internship at the end of my 2nd year of UX/UI studies.
The Challenge Builder offers to clients companies the opportunity to customize their challenge presentation page, through different blocks and pages to fill in: article, gallery, text … But the main problem was that is was very complex to use them, the users were losing so much time and also the result were no always very personal and unic for each challenge.
So I propose 2 news blocks: timeline and accordion as well as an update for an existing block, the article block.
I work will an entiere product team with Product Designer, Developers, CTO, PM ... and who worked with very specific design methods such as the agile method.

Blocks

The problems

First, we received the return documents from the Product Alchemists (the PA), they are the internal people within the company who use the Challenge Builder to help customers companies organize their challenges, in the admin side. These returns target problems on current blocks, such a display problems, non-aligned elements, image trimming … etc, but also requests for new features.

Refocus the subject

So with my internship supervisor, we analyzed all these informations and after few interviews with the PAs, we decided to focus on improvements to the current blocks, but also on new ones. Both on the public part, visible by participants or visitors of the site, but also on the admin part, accessible to companies and PAs to modify the challenge pages.

- The new Timeline blocks: to present the steps of a challenge
- The new Accordion block: to display a FAQ
- The new Column block, transformed into an improvement of the Article block: which presents an image and a text.

These were the most used but also the simplest and fastest blocks to modify, in order to release the new features as soon as possible.

The concept

I then started thinking about how to improve these blocks. While trying to insert other requests from PAs, such as changing the colors of some elements but also having more freedom on the layout of titles.

WIREFRAMES

So I started by making wireframes to formalize my ideas but also to try as much layout as possible. Once one or more concepts were developed, I switched to Sketch to create the interfaces. Agorize's Design System allowed me to do this quickly.

TIMELINE BLOCK

Agorize's design teams make all the timelines by hand and it takes time, the purpose of this block was to reduce this working time by proposing a block that allows to present the steps of each challenge. While offering a customization so that each timeline is identical and fits the style of its challenge.
The user can then:

- Define a title and a subtitle
- Change the color of the timeline and steps
- Add a title and details for each period and date.

SEARCHES FOR TIMELINE BLOCK

ACCORDION BLOCK

Some challenge organizers offer FAQs to help participants. The Agorize’s teams develop accordions to layout these FAQs, but the situation is the same as with timelines, it takes time.

The accordion then proposes a list of questions associated with answers that appear when you click on them, that the organizer can customize and fill in as he wishes on the admin side.

The accordion name was preferred to FAQ, because this block can eventually be used for something else.

SEARCHES FOR ACCORDEON BLOCK

ARTICLE BLOCK

The existing article block was very limited, in fact it was only possible to fill in a text and place an image. The PAs then naturally requested an update for one of the most used blocks.

The user will now be able to choose the size of the image, its location on the left or right, but he will also be able to customize the background of the block, with a photo or a solid color.

SEARCHES FOR COLUMNS/ARTICLE BLOCK

The main goal was therefore to bring new versions or new blocks in order to optimize the working time of the PAs and Agorize’s teams, but also to allow more modifications with the possibility of customizing each block.

Testing phases

During a few months, several versions of these blocks will then be developed, accompanied by discussions with my internship supervisor, interviews with the PA managers, but above all testing phases.

For the testing phases we started by validating a user scenario that took the tester through all the interesting steps for the analysis and development of the feature.
For example with the Timeline block, we asked the user to create a new block, to change mains colors, to fill the title and add somes steps. Once this was done, he had to fill the different steps with text and images and then change their places.

Then I prototyped the scenario with InVision and the Craft plugin on Sketch. I was autonomous on this part, but once the protyping was finished my supervisor made a very first test and then validated or not.

Final designs

Here are the final versions made for the new blocks of the Challenge Builder, associated with their public part visible to the participants.

FINAL DESIGN OF THE TIMELINE BLOCK

FINAL DESIGN OF THE ACCORDION BLOCK

FINAL DESIGN OF THE ARTICLE BLOCK

At the end of my internship, the Timeline and Article blocks were still in development phases, in order to offer the very best versions to the customers. And today, the Accordion block is release and the companies use it to layout their challenges pages.

The future of the Challenge Builder

During the research for the Challenge Builder, we were asked for a moment to work on a much more innovative version.

I then worked on an immersive version, where the visitor and admin sides are now one. The administrator could indeed modify the blocks directly from the challenge pages. Only a sidebar would still be present to modify certain parameters such as the position of the blocks.

CONCEPT OF AN IMMERSIVE VERSION

In addition to this project, which occupied a good part of my internship, I worked on countless other projects.
They were all more interesting than each other and allowed me to work on my skills in UX and UI design but also in vector graphics or in more technical subjects such as event tracking or browsing analysis.