Appirio and Topcoder
Redefining the Topcoder platform and creation of Topcoder Connect.
Topcoder is a global community of developers and designers that compete for work. On the client side there was a need for an application that would allow clients to post jobs to the community, manage projects, communicate and handle all administrative business tasks as well.
I worked with the CEO, CTO, and product managers to create goals and a road map for 2015 and 2016. I ran design sprints, created wireframes and prototypes. Then ran user tests on the prototypes. When we were satisfied, we would fully design the feature and add it to the application.
Personas
We had access to marketing team information, user data and interviews to help us determine who our users were and what their needs would be. This allowed me to create detailed personas for each of the main user types our app needed to support.
My approach was to print these out and hang them on the walls where our team worked. This served to always remind us who we were designing for and what our goals should be. It gave us a sense of ownership and connection with our users.
App Map
Creating the map allowed us to visualize the scope of the app and identify key user flows. This also allows us to create a checklist for screens and scenarios.
Scenarios
In the case of screens or UI elements that had multiple views based on who/why/how a user was viewing , I created multiple versions of that element or screen to show all possible scenarios and ensure a complete design. As well as inform developers of all necessary functionality.
Design Specs
When a design was finalized I would do a spec sheet of the screen. This gives the developer and a detailed description of the UI elements size, spacing, color, font, line-width, etc. Pretty much all the information the developers needs to accurately build the UI as designed.
This usually involved sitting with the front end developer to fully flesh out any questions he/she had. This process ensured a consistent delivery of designs to production.
UI Kit
We created a detailed set of the applications features for both the front and backend. We unified these and created a Universal UI Kit for the Topcoder platform.
This serves as a source of truth for everyone involved in development. It informs any style guides and is a crucial asset for continued development, branding exercises and marketing materials.
Color Kit
Creating a detailed list o all the colors used across all UI elements to ensure a consistent usage is crucial. Especially when the application is large and depends upon many icons to communicate many different functions.
This allows all designers and developers to have a source of truth for colors app wide.
No comments.