Stack Maps
UI Research & Design - Desktop Onboarding
UX/UI Team Project: StackMaps
Role: UX/UI Designer
Responsibilities included:
User Research & Results
Site Mapping & User Flows
Interface Design & Wireframing
High Fidelity Mockups
Tools: Figma
Team: 2 UX/UI Designers
Date/Duration: September, 2021 / 2 Weeks
Challenge: Our client works with the specially abled, teaching coding practices. The fidelity of her site in it's current format is providing to have a high accessibility curve for students. The client is hesitant to change her websites formatting due to budgetary restraints.
Solution: Iterate on the design of the clients site. Utilize the components available through the 'bootstrap open source toolkit' as a base for your design.
Iterating on Existing Designs
A common task for any UX/UI designer, iterating on existing designs is a process which can have varying degrees of complexity. Factors which could play into this are design systems/ style guides, development resources as well as the clients motivation to enact meaningful change. In this project, I grappled with utilizing the resources available to iterate on screens providing coding education. Deriving creative solutions, backed up by industry research and best practices.
Background
To start we were provided with a description of the website, as well as the knowledge that we were working in tandem with several other teams to raise the overall fidelity of the site. Additionally we were provided with the screens & description to the left, and set to work to iterate on the design of these pages.
Research
In order to best assist the client we were provided with ample time to conduct secondary research on coding boot-camps, accessibility requirements, onboarding practices, and learning management systems.
Throughout the design process we included relevant details of our research alongside our work whenever possible, allowing for the client to see the thought process which went into the updates to their website. This beneficial evidence of how the UX/UI design changes would impact a users experience with their website would be vital to swaying the opinion of hesitant shareholders.
The Dev Tools
Familiarizing myself with the tools for this job was most important. The client had expressed specific intent not to commit to any custom content for this project. To ensure that no time was wasted designing solutions that did not adhere to the clients wishes, I familiarized myself with the toolkit and took notes on useful components which could be helpful in meeting the clients needs.
After familiarizing myself with the toolkit and making notes and taking PNG samples of components which could prove useful I pulled the images into Figma and began recreating the general properties of the noted items.
Rebuild & Ideate
Rebuilding the website so that it was malleable in my design tool was the natural progression of my work with StackMaps. After rebuilding the site in Figma, I began testing different design ideas. Drawing from my research earlier, I began creating a few solutions to bring to my teammate in our planned meeting.
One advantage to utilizing a cloud based design tool such as Figma is allowing easy collaboration across time zones. As we were working from opposite sides of the country this allowed us to maintain a group file to view the others ideas, build upon them and incorporate elements into our design ideas.
Discuss & Refine
Coming together with my teammate we worked on cleaning up the design options which we would be presenting to the client. Additionally we found opportunity to add clarification on design decisions which were made in each of our screens, adding additional supporting research and clarification for the client.
After we met to discuss our ideas, and the research backing them we moved forward to mock up the screens to pixel perfect and give the client plenty of examples and rationale as to why design choices were made and how elements of their design toolbox were used to create the final designs.
Presenting to the Shareholder
With our designs combined and options for the client ready, we moved to present these designs to the shareholder. With the annotations provided on research screens and the high fidelity mock-ups we are confident that the client will have ample evidence to support the consideration developing one of these optimal solutions for communicating these explanations to their student base.
Reflection
During this project the biggest element of frustration or intrigue was the limited data which we were provided in terms of how these screens connect to other elements of the website. We were able to come up with many solutions tackling the core element of this project, presenting the data provided in an easily navigable format.
Looking Forward
Going forward, I would request specific direction from the client to access our data points. See how the material which I'll be working on over the course of the project connects to other parts of the website is extremely valuable to designing with the site in mind.
Working with the client to design a site map if one is unavailable is a great way of alleviating the process of identifying a screens place in the site hierarchy. This will also allow for the client to have a better concept of how the design which is being iterated on these pages can be applied to other parts of their site.