MY ROLE

Self-directed as UX/UI designer

duration

80 hours

Design TEAM

Matt Farley, mentor

TOOLS

Sketch, Affinity Designer, Procreate, Invision, Whimsical and Zeplin

A website redesign for a non-profit online community

STEAMoTYPE

STEAMotype is a nonprofit online community that promotes and inspires engagement of Science, Technology, Engineering, and Mathematics through Art. Founded in 2017 by four co-founders/friends located in different parts of the world with backgrounds in STEM who noticed that there was an opportunity to combine their love for Science and Art on social media. What started as a simple interest in creating a monthly calligraphy challenge of science words blossomed into a platform for people, including those without STEM backgrounds, to engage in STEM in an accessible, fun, and shareable manner.

THE PROBLEM

After serving the Instagram community for over a year, the co-founders decided to create a website to serve as a placeholder for information. Currently, the website isn't getting much traffic, and most of the STEAMotype followers didn't even know of the website's presence. What the STEAM team hopes to accomplish with the re-design of the current website is increased visibility, engagement, a placeholder for future projects, while providing a reputable source for our followers. So the challenge became: how might we re-design a responsive website that would improve the information architecture, usability, visual design, and increase participation while covering core functionality?

VIEW PROTOTYPE

RESEARCH

USER DISCOVERY

A survey was conducted with 25 participants, ranging from 18 to 54 years old. 18 out of 25 were STEAMotype followers and 7 were Instagram users who did some kind of art.

KEY FINDINGS

  • Top 3 reasons why users followed STEAMotype: 94.4% Interested in the content, 83.3% liked the artwork, 72.2% want to participate in the challenges and 82.4% of the 18 follows would submit artwork if there was an alternative way instead of posting on their Instagram account (prefer an alternative method of submission because artwork does not go with their current brand)
  • Only 4 of the 18 STEAMotype followers have visited the website – most responded that they didn’t know that the website existed
  • ​Features that they would want to see on a Sci-Art website include: Artwork submissions, photo gallery, blogs, DIY projects, videos, and a Sci-Art show

Provisional Personas

SECONDARY RESEARCH

I conducted an indirect market competitive research  to understand, compare and contrast current trends in existing platforms. Currently, STEAMotype is the first of its kind to blend STEM subjects with handlettering art and have the opportunity to learn from their indirect competitors in creating a stronger brand presence and clearer navigation.

Indirect competitive Analysis

DEFINE

Using the information gathered from the indirect competitive analysis and user interviews - two personas were created: Meghan Tesla - Science student with an affinity for art and Tatiana Henry, the non-traditional artist who wants to challenge herself in new ways. Empathy maps were then created to understand the users: what do their daily lives entails, what influences them, their behaviors, their goals, their pains, etc.

Persona 1: Meghan is a 21 year old junior at UCLA majoring in biomedical engineering. Though her first love is science and all things STEM, her second love is art. She wants to somehow combine the two loves together - creating an artistic and informative science piece.

Meghan's Empathy Map

Persona 2: Tatiana is a 29 year old accountant working in Fi-Tech. When not working in the corporate job she practices her calligraphy. To push herself further she engages in several monthly challenges.

Tatiana's Empathy Map

STORYBOARD

After comparing the two personas, Meghan and Tatiana, I decided to continue the rest of the project with Meghan as the primary persona for the minimum viable. This storyboard depicts Meghan's initial discovery of STEAMotype on Instagram which encourages her to learn more about the group on their dedicated website. Eventually she signs up to participate as a contributing artist and writer.

Storyboard: Meghan's discovery of STEAMotype

INTERACTION DESIGN

INFORMATION ARCHITECTURE

After defining the personas and the features list I created a sitemap to define the website's information architecture. The sitemap was organized while keeping in mind of the STEAM team's goals of increasing visibility, engagement, and creating/providing a reputable source for our followers and the user's goals of finding interesting content, shared artwork and need of alternative method of artwork submission

TASK & USER FLOW

With the information architecture mapped out I created a user flow (derived from task flows)based on the persona, Meghan, and her journey navigating through STEAMotype after her initial encounter with the group on Instagram. From there I devised several exit points which included contacting the group/specific member, joining the group, submitting artwork/writing, and sharing a post.

FEATURE ROADMAP

Based on the information collected from the research, information architecture and user flows a feature roadmap was created to prioritize key features of the STEAMotype website.

USER INTERFACE DESIGN

WIREFRAMES

With the information architecture defined, I sketched out some wireframes for the main website pages that the users would interact with in order to complete the main tasks. I used the indirect competitor websites to be a reference for key elements that would work well for STEAMotype while considering current trends and other mix media spaces but also keeping in mind what the stakeholders intended the website to do which was to be a place that contained:

"Information about our mission, goals, team, and challenges. The website would be a good place to help recruit people to lead challenges. It should convey professionalism and showcase the efforts that the team and the community have put into STEAMotype, such that people would be proud to be part of STEAMotype and put it on their resume.” - A STEAMotype stakeholder.

Sketches: rough sketches of key pages

Using my rough wireframes as a focal point,  mid-fi responsive wireframes were designed for the key pages of STEAMotype's website.

PROTOTYPING + TESTING

Mid-fi wireframes were uploaded onto InVision (desktop version) to be used for remote and in-person testing.

The usability testing consisted of a total of 5 participants (2 female and 3 male): 2 out of 5 participants were familiar with STEAMotype and only 1 had visited the existing site. Each participant tested the Mid-Fi Invision prototype of STEAMotype desktop and mobile remotely. They were given 3 main tasks to complete for both mobile and desk that satisfied the test objectives.

Affinity Map

RESULTS

After the testing I organized the feedback into an Affinity Map to analyze the test findings based on patterns, successes, pains, and recommendations that aided in design iterations. 

DISCOVERIES

Overall, 100% of the participants were able to complete all 3 tasks across the two platforms. Users were able to navigate throughout the website easily and stated that the "flow is good." However, 100% of the participants were confused with the term "media" used to categorize blog posts, podcasts, newsletters and challenges.

50% of the participants were also unfamiliar with prototype testing and was initially confused with grey-scaling and would have liked to test out a hi-fi prototype. Despite the grey-scale, users found that there was a good balance between visuals and text - an improvement from the current website.​

REFLECTIONS & LEARNINGS

In this case study, I had the opportunity to work with real stakeholders/partners that I have known for some time. We spent the initial meetings to discover what they were looking for in a website, their expectations, their needs, and what their audience needed. One of the challenges was trying to get everyone on the same page to agree on what each stakeholder needed from the project and what was important to them.

WHAT I LEARNED

  • Mid-fidelity prototype testing is not as effective as hi-fidelity, though faster to prototype, participants found it confusing
  • Working with multiple stakeholders can be complex and more time should be spent to unify their visions into the design process

NEXT STEPS:

  • Test hi-fidelity prototype with participants
  • Complete the other pages
  • Simplify wording
  • Test, analyze, iterate and test again.

LAUNCH

Unfortunately STEAMotype co-founders decided to cease activity before the content was finalized and did not develop the site.