Responsive UX/UI Design

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.

View Final Design

TEAM

Self-directed as UX/UI designer, with guidance from course mentor, and stakeholders

TOOLS

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

duration

80 hours

challenge

As a co-founder/stakeholder of STEAMotype as well as the UX/UI designer for this project, I spoke to my fellow co-founders/stakeholders about what we needed the website to do. When we started STEAMotype our main mission was to increase visibility and presence in the community, create a space that allowed our love for STEAM to grow, and encourage women participation in STEAM fields. After about a year, we 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?

Solution

From research to implementation, I rebranded and designed a logo and responsive website for STEAMotype that would give them a placeholder for collective projects such future articles and podcasts, easily accessible contact form as well as an alternative method for followers to submit artwork and/or articles. 

RESEARCH

SECONDARY RESEARCH

To start the project 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.

KEY FINDINGS

  • Sci-Art can become very text or very visual heavy, need to find a balance between the two
  • Homepage needs to state clearly, the purpose of the website
  • Provide links to trusted sources
  • Need clear user flow and hierarchy

PRIMARY RESEARCH

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 shop

DEFINE

PERSONAS & EMPATHY MAPS

Using the information gathered from the indirect competitive analysis and user interviews - I created two personas to represent two types of STEAMotype followers: 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.

MEGHAN TESTLA

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.

TATIANA HENRY

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.

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.

FEATURE ROADMAP

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

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

USER FLOW

With the information architecture mapped out I created a user flow (derived from a task flow)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.

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.

INITIAL SKETCHES

MID-FIDELITY WIREFRAMES

Using my rough wireframes as a focal point, I designed mid-fi responsive wireframes for the key pages of STEAMotype's website. I started with the desktop versions and then scaled down to the tablet and mobile versions.

LOGO & BRANDING

The logo was inspired by a photo taken by one of the stakeholders, a Erlenmeyer flask that represented science, and a pen which I replaced with a paintbrush to represent art. 

UI KIT

Before making some changes to the mid-fi prototype types, I took a step back and brainstormed what it meant to create the STEAMotype brand and what the stakeholders' objectives were - to create a place where users could trust the source, be creative, be curious, and feel safe. Using those adjectives: trust, creative, curious, and safety  I built the STEAMotype brand using the colors blue for loyalty, wisdom, and strength; yellow for positivity, energy, and intellect; lastly, coral pink which gives it a light touch of fresh, invigorating, and feminine feel. Using those three main colors, I created the UI Kit to be used on the Hi-Fi wireframes.

BRANDING & HI-FIDELITY

Using the Affinity Map created, testers' inputs and UI kitI made some irritations to the mid-fi prototypes when creating and developing the hi-fi wireframes as seen below in the desktop wireframes which were reflected in the tablet and mobile versions.

PROTOTYPING + TESTING

PROTOTYPE

After iterating the initial set of mid-fi desktop and mobile wireframes and writing up a usability test plan I uploaded the mid-fi wireframes onto InVision (desktop version) to be used for remote and in-person testing. Although there was limited features and interactions available with using Invision for prototype testing,I wanted to test and observe how my design decisions performed with existing and new users, the flow between switching from desktop to mobile. Using the feedback I gathered from the testing (the good, the bad, and the needs improvement), I would then re-iterate.

TEST

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.

TEST OBJECTIVE

  • Evaluate the usability of the website
  • Test the navigation and flow
  • Determine task completion time
  • Observe and determine user’s successes and pain points when completing the designated tasks
  • Determine areas that need to be changed to increase usability

RESULTS

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 gray-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.​

With the feedback gathered, I created an Affinity Map to organize and analyze the test findings based on patterns, successes, pains, and recommendations that aided in design iterations. 

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:

  1. Test hi-fidelity prototype with participants
  2. Complete the other pages
  3. Simplify wording
  4. Test, analyze, iterate and test again.
  5. Launch website
LET's connect and build experiences!