Hyper Island Toolbox
YEAR: 2015 URL: toolbox.hyperisland.com
Hyper Island is a creative business school and consultancy specializing in real-world industry training using digital technology. Offices and campuses are in Sweden, Brazil, UK, US, and Singapore.
Open Source Toolbox for
Hyper Island
BRIEF
Hyper Island had 50+ tools and learning methods sitting in a folder on Google Drive. They wanted those resources to be shared with the world in an open source toolbox.
As a product, the Toolbox should continuously evolve with the business' ever-changing content. It needs to be adaptive, scalable, editable in real-time, and for it's many users, offer simple navigation and be easy to understand.
CLIENT
ROLE
SERVICE
Hyper Island
Lead Product Designer
- Prepared project plan and resource allocation.
- Lead design workshops with developers and internal team.
- Delivered UX, service design, graphic design, and branding.
- Created 100+ illustrations/icons.
In 4 fast-paced months, Hyper Island wanted to build an open-sourced toolbox from 50+ Google documents.
To bring the product to life, I worked on location in Stockholm and New York with an international, cross-departmental group from the Marketing, R&D, Design, and Developer teams. We spent a lot of time prototyping, testing, having feedback rounds, and iterating designs before getting to the final beta.
PROJECT OUTCOME
In January 2015 the beta version of the Hyper Island Toolbox was released. It contains methods for innovation, workshop tools, and techniques for change design. The users of this product include Hyper Island's large student population, alumni network, B2B partners, current and prospective clients, external Innovation Facilitators, and Organizational Development subject matter experts alike, who all use and enjoy the product daily.
OVERALL CHALLENGE
LEARNINGS
With nothing more than a few brand guidelines and approximately 50 Google docs, the challenge was to come up with a vision, bring the idea to fruition, and deliver a crisp product design in a very narrow window of time.
Beyond the delivery of a powerful and useful product, the Toolbox needed a strong foundation that would enable it to evolve with new product owners through the years. Just as it's content will change, the same is true for the vision of the Toolbox... Therefore anybody should be able to transform it with ease.
Requests for changes in this project's scope grew far beyond the original ask fairly quickly. A big [re-]learning from working with Hyper Island is to always set boundaries, have clear expectations with the team, and stick to agreed deliverables. If an ask deviates too far from the plan, a modified project plan and deliverables need to be agreed upon by the team, particularly if the relationship with the client is as casual and friendly as ours is.
Working ad-hoc in a lot of white space requires constant communication and clarity on anything ambiguous that may arise along the way. This project would have benefited from an agile structure with daily stand-ups.
Want to know what made this project special? See below for more details.
The initial "sitemap" created for the debrief, to show the client what needed to be designed and developed.
A competitor analysis and good examples of similar services and companies with a similar offering in the debrief.
To start, Hyper Island lacked a brief and only had a sort of mission statement/goal for what they wanted the product to be. Through a quick design exercise of asking questions in an open environment where everybody could participate, I was given clarity on what they were looking for. We articulated the overall goals together with a preferred outcome and talked through what fears and unintended consequences that could arise in a project like this.
From there I continued to interview stakeholders, this time one-on-one. This was done to ensure I had a strong understanding of the ultimate goal, shared insights, hopes and fears for the project, and to feel confident that the team was supportive and excited about next steps.
I followed up with a debrief. Even if I was a part of creating the brief it was a good way to put my own words down on paper and outline a proposed project plan, an initial sitemap, and present a competitor analysis highlighting examples of similar services and good examples.
After getting approval on the proposed project plan and debrief, I fine-tuned the project plan with the client, established design principles for the project and confirmed the project goal; Hyper Island wanted a simple, ever-changing and "easy" product that any age group could navigate and use. They needed a way for people to submit new tools and edit old ones... And they wanted a working beta done in 4 months.
After the project plan was approved, I went on to create a sitemap and flowchart, and a list of design requirements we needed to make this a sound product. I facilitated a workshop with the developers and HI's design team to create consensus on hierarchy and priorities. The team decided to make a fluid grid with responsive design.
This is a crucial step that is often overlooked on working teams. Plan well and you'll save a lot of time and effort later in the project. It doesn't mean there won't be changes... In fact, I changed the initial sitemap several times after iterations and feedback.
Figuring out the grid and breakpoints for Desktop
Wireframe for vertical mobile design.
Prototype with placeholders, margins and padding according to grid.
I made wireframes and quick prototypes to get the design process on it's way. After many feedback rounds, revisions and close collaboration with the developers, we finally had something!
Building a prototype collaboratively with developers is in my opinion - the best approach; it enables you to bounce ideas around faster while building a better product from the groud-up.
Responsive Design and Breakpoints: We decided to build the toolbox with a responsive design grid to make the experience seamless and cohesive- independent of the device.
This meant I had to design for "breakpoints" (meaning how the design would transform to a new aspect ratio to fit various screen sizes). In this case, we designed for Desktop, Landscape, vertical tablet, and mobile.
I wanted the tools to be visually exclusive and also have something other than an image that represented each tool so I suggested that we do one illustration/icon for each tool. To make sure that it would be easy to continue to grow the toolbox after I was done I created a library of icons that easily could be mixed and matched to create more icons without my involvement. It was also a great way to honor one of the goals of the Toolbox- scalability.
Fast forward: The client really liked the direction of these illustrations and requested that I would make this a separate project; to create an icon and illustration library to be used in Hyper Island's day-to-day communications. So the project started as a toolbox also got me involved in helping Hyper Island with their new branding, communication, and strategy.
Additional commentary/reflection:
- I learnt a lot from this sidetrack of creating an icon library. I spent a lot of time and effort on the icons and illustrations, but since it wasn't part of the original project plan, it created some tension re: updated contract and final costs. Something that could have been avoided with separating the two projects entirely even if they overlapped.
- Last minute, the client decided everything should be purple. This was due to a fear that we deviated too far from original brand colors (purple, teal, orange, and hot pink). I encouraged the use of many colors, stating that this was a brand product and did not have to follow guidelines so strictly, but the client preferred a more conservative approach.
I created over 100+ icons and illustrations for Hyper Island to be mixed and matched into new icons and illustrations. These icons were then used in all their communications and in the toolbox.
Following weeks of feedback, design iterations, and illustration work, it was time to put the final touches on the UI. We went back and forth with how complex to make the filtering and ended up with a super simple, scalable version. After the UI was in place, I started red-lining all the designs, together with documenting the CSS and all the design patterns for the developers.
I supported the development phase as I continued finishing all of the illustrations. Through a series of bi-weekly video chats and on-going discussions via Slack, we reviewed the development process.
Shortly thereafter, toolbox.hyperisland.com was finally up and running. Today, 4 years later, it is still a valued tool (and highly trafficked website) for Hyper Island that used by students, alumni, teachers, clients and partners, along with external visitors who discover it through friends or just on the web.
Thanks for caring so much about the design process!
