Responsive UX/UI Design
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.
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.
- 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
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.
- 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
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 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 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.
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.
Based on the information collected from the research, a feature roadmap was created to prioritize key features of the STEAMotype website.
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
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
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.
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.
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
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.
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.
- 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
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
- Test hi-fidelity prototype with participants
- Complete the other pages
- Simplify wording
- Test, analyze, iterate and test again.
- Launch website