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.
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?
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 show
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.
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.
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.
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.
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
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.
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.
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.
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
- Test hi-fidelity prototype with participants
- Complete the other pages
- Simplify wording
- Test, analyze, iterate and test again.
Unfortunately STEAMotype co-founders decided to cease activity before the content was finalized and did not develop the site.