steamuseum_mb_mockup

STEAMuseum

STEAMuseum

STEAMuseum

STEAMuseum

STEAMuseum

UI/UX Case Study

UX/UI Case Study

Overview

Overview

Chicago and Casablanca have shared a strong city relationship since 1982. In 2016, this relationship was brought to a new level of engagement through the development of an education project in the area of digital diplomacy called the STEAMuseum.

The initiative was to bring high school students together virtually to create and showcase collaborative curation in the STEAM fields (Science, Technology, Engineering, Art, & Math).

Chicago and Casablanca have shared a strong city relationship since 1982. In 2016, this relationship was brought to a new level of engagement through the development of an education project in the area of digital diplomacy called the STEAMuseum.

The initiative was to bring high school students together virtually to create and showcase collaborative curation in the STEAM fields (Science, Technology, Engineering, Art, & Math).

Chicago and Casablanca have shared a strong city relationship since 1982. In 2016, this relationship was brought to a new level of engagement through the development of an education project in the area of digital diplomacy called the STEAMuseum.

The initiative was to bring high school students together virtually to create and showcase collaborative curation in the STEAM fields (Science, Technology, Engineering, Art, & Math).

Chicago and Casablanca have shared a strong city relationship since 1982. In 2016, this relationship was brought to a new level of engagement through the development of an education project in the area of digital diplomacy called the STEAMuseum.

The initiative was to bring high school students together virtually to create and showcase collaborative curation in the STEAM fields (Science, Technology, Engineering, Art, & Math).

Chicago and Casablanca have shared a strong city relationship since 1982. In 2016, this relationship was brought to a new level of engagement through the development of an education project in the area of digital diplomacy called the STEAMuseum.

The initiative was to bring high school students together virtually to create and showcase collaborative curation in the STEAM fields (Science, Technology, Engineering, Art, & Math).

Team
Co-founder (Team Lead),
Project Manager,
Lead Developer,
Me (Student UI/UX Designer)

Team
Co-founder (Team Lead),
Project Manager,
Lead Developer,
Me (Student UI/UX Designer)

Team
Co-founder (Team Lead),
Project Manager,
Lead Developer,
Me (Student UI/UX Designer)

Team
Co-founder (Team Lead),
Project Manager,
Lead Developer,
Me (Student UI/UX Designer)

Team
Co-founder (Team Lead),
Project Manager,
Lead Developer,
Me (Student UI/UX Designer)

Client
Lisa (Project Director) - Chicago Sister Cities International

Client
Lisa (Project Director) - Chicago Sister Cities International

Client
Lisa (Project Director) - Chicago Sister Cities International

Client
Chicago Sister Cities International

Date
December 2016 - March 2017
(4 months)

Date
December 2016 - March 2017
(4 months)

Date
December 2016 - March 2017 
(4 months)

Date
December 2016 - March 2017
(4 months)

Date
December 2016 - March 2017
(4 months)

Sector
Nonprofit, Youth Education

Tools
Adobe XD, Photoshop, Illustrator

Sector
Nonprofit, Youth Education

Tools
Adobe XD, Photoshop, Illustrator

Tools
Adobe XD, Photoshop, Illustrator

Project Launch

Before I dove into the design, I was briefed on the project by our team lead and project manager on what my deliverables were. One key deliverable was to derive the taxonomy from our company's shelved tool, called CurateIt1. I was to derive the taxonomy from CurateIt to help inform the information architecture of our new project. 

Overview
Chicago and Casablanca have shared a strong city relationship since 1982. In 2016, this relationship was brought to a new level of engagement through the development of an education project in the area of digital diplomacy called the STEAMuseum.

The initiative was to bring high school students together virtually to create and showcase collaborative curation in the STEAM fields (Science, Technology, Engineering, Art, & Math).

Before I dove into the design, I was briefed on the project by our team lead and project manager on what my deliverables were. One key deliverable was to derive the taxonomy from our company's shelved tool, called CurateIt1. I was to derive the taxonomy from CurateIt to help inform the information architecture of our new project. 

Overview
Designed and launched the grant-funded pilot project, the STEAMuseum web platform. A digital museum that showcases collaborative curation between high school students in Chicago and Casablanca, Morocco.

Before I dove into the design, I was briefed on the project by our team lead and project manager on what my deliverables were. One key deliverable was to derive the taxonomy from our company's shelved tool, called CurateIt1. I was to derive the taxonomy from CurateIt to help inform the information architecture of our new project. 

taxonomy

We also went over other details:

  • Admins and Learners were our two types of users
  • A Network is a group of learners
  • A Cohort consists of two networks, one in Chicago and the other in Morocco
  • How the exhibitions would be managed
  • Integration into our backend system

We also went over other details:

  • Admins and Learners were our two types of users
  • A Network is a group of learners
  • A Cohort consists of two networks, one in Chicago and the other in Morocco
  • How the exhibitions would be managed
  • Integration into our backend system

Challenge 🌟

My task was to design a website that showcases collaborative curation between high school students in Chicago and Casablanca through the means of a digital museum.

My task was to design a website that showcases collaborative curation between high school students in Chicago and Casablanca through the means of a digital museum.

Research

The solution and direction of the project were predetermined by the founders and stakeholders before I was asked to aid in design. Whilst the direction of the project was already established and budget already set, I resorted to creating proto-personas instead, which were based on talks with our student and teacher liaison, Lisa (Project Director).

Overview
Chicago and Casablanca have shared a strong city relationship since 1982. In 2016, this relationship was brought to a new level of engagement through the development of an education project in the area of digital diplomacy called the STEAMuseum.

The initiative was to bring high school students together virtually to create and showcase collaborative curation in the STEAM fields (Science, Technology, Engineering, Art, & Math).

Overview
Designed and launched the grant-funded pilot project, the STEAMuseum web platform. A digital museum that showcases collaborative curation between high school students in Chicago and Casablanca, Morocco.

Overview
Designed and launched the grant-funded pilot project, the STEAMuseum web platform. A digital museum that showcases collaborative curation between high school students in Chicago and Casablanca, Morocco.

Overview
Designed and launched the grant-funded pilot project, the STEAMuseum web platform. A digital museum that showcases collaborative curation between high school students in Chicago and Casablanca, Morocco.

proto-personas

I also asked clarifying questions before creating wireframes:

  • Does it matter what exhibitions look like?
    • i.e. MoMA, 70's style, Renaissance
  • Is there a limit to the # of artifacts in an exhibition?
  • What kind of images (artifacts) was going to be used?
  • Can users create cohorts?
  • Can users add collaborators to an exhibition?
  • etc.

After the meeting, I had enough instruction to create wireframes to present to the team.

wireframes, questions and notes on major screens
wireframes, questions and notes on major screens

Wireframes, questions, and notes for each major screen

With clarifying wireframe questions answered, I was ready to take home my new project and dive in.

☑ Deliverables

  • Keep # of pages small
  • Establish a museum motif
  • Enable students and admins the ability to create/edit/delete/publish exhibitions and galleries

Overview
Designed and launched the grant-funded pilot project, the STEAMuseum web platform. A digital museum that showcases collaborative curation between high school students in Chicago and Casablanca, Morocco.

Overview
Designed and launched the grant-funded pilot project, the STEAMuseum web platform. A digital museum that showcases collaborative curation between high school students in Chicago and Casablanca, Morocco.

Overview
Designed and launched the grant-funded pilot project, the STEAMuseum web platform. A digital museum that showcases collaborative curation between high school students in Chicago and Casablanca, Morocco.

Process
I began by thinking about the taxonomy of museums. And how I could incorporate that into my designs:

mind dump notes with pen and paper

Mind dump notes on pen & paper

Once I had a basic understanding of these terms, I began looking at inspiration in various places:

inspiration_2

Whitney's branding is simple and clear.

inspiration_1

The card structure with metadata at the bottom allows for an unlimited amount of art to be shown.

inspiration_3

The top and bottom menu border are really clean and simple.

Color
I chose to go with black, white and an accent color. It allowed for the uploaded artifacts to shine and not have to compete. We didn't have any control over what the students uploaded. So, I didn’t want bright branding colors to interfere with the students work.

Typography
I chose to go with the Arial because it was a simple typeface. It's based off of Helvetica, which is a typeface that is known for it's use in display's. Arial is contemporary, versatile and bland. It doesn't bring attention to itself. Most importantly it was a font that both Windows and Mac OS systems have. So it we didn’t have to host any fonts, especially because the webpage would be accessed in Morocco.

Layout
I chose to make the content modular. Squares and rectangles made sense to me because it resembled art frames. It'll be easier to organize the content and help people understand the interface easier and quicker.

Information Architecture
There were different states I had to account for:

  • CurateIt (Admin and Learner view)
    • Homepage
    • Exhibition
      • View All
      • Create (Student view when signed in)
    • Galleries
      • View all
      • Create (Student view when signed in)
    • Collection (Pool)
    • About
    • Contact
  • STEAMusuem (Public-facing side)
    • Homepage
    • Exhibition
    • Galleries
    • About
    • Contact

In future meetings with Lisa, the structuring of the website would help structure the curriculum for the students.

Design Iterations
This project went through two significant design iterations visually. As well as the necessary design iteration and review with the client and team. I'll only display the very first mockups I came back to the team with. Then the new design direction we went down, and then the final design we shipped.

STEAMuseum v0.1.0

steamuseum_v1

STEAMuseum v0.2.0

Screen Shot 2018-03-15 at 8.32.38 PM

STEAMuseum v1.0

Screen Shot 2018-03-15 at 8.35.14 PM

Projects

Now
User Experience Designer @ Northwestern University

Past
Summer Learning Experience Mentor @ Chicago Housing Authority

Now
User Experience Designer @ Northwestern University

Past
Summer Learning Experience Mentor @ Chicago Housing Authority

Now
User Experience Designer @ Northwestern University

Past
Summer Learning Experience Mentor @ Chicago Housing Authority

Now
User Experience Designer @ Northwestern University

Past
Summer Learning Experience Mentor @ Chicago Housing Authority

Now
User Experience Designer @ Northwestern University

Past
Summer Learning Experience Mentor @ Chicago Housing Authority

© 2018 David Vernier

© 2018 David Vernier

© 2018 David Vernier

© 2018 David Vernier

© 2018 David Vernier

Made with Semplice with 💙.

Made with Semplice with 💙.

Made with Semplice with 💙.

Made with Semplice with 💙.

Made with Semplice with 💙.